make it responsive + next section done

components/arcade/review/project.js

@@ -4,11 +4,11 @@ import { Box, Flex, Text } from 'theme-ui'
 
 const Project = ({img, name, projectName, country}) => {
     return(
-        <Box sx={{backgroundColor: '#FFF7E5', borderRadius: '5px', display: 'flex', px: 3, py: 2, my: 2, mr: 3}}>
+        <Box sx={{backgroundColor: '#FFF7E5', borderRadius: '5px', display: 'flex', px: 3, py: 2, my: 2, mr: 3, color: '#35290F', width: '250px'}}>
             <Box sx={{backgroundImage: `url('${img}')`, width: '50px', height: '50px', backgroundSize: 'cover', mr: 3}}></Box>
             <Box>
                 <Text sx={{fontWeight: 'bold'}} as="p">{projectName}</Text>
-                <Text as="p">{name}, {country}</Text>
+                <Text as="p">{name.split(" ")[0]}{country != '' ? `, ${country}` : ''}</Text>
             </Box>
         </Box>
     )

package.json

@@ -45,13 +45,14 @@
     "date-fns": "^2.30.0",
     "devtools-detect": "^4.0.1",
     "form-data": "^4.0.0",
-    "framer-motion": "^11.3.29",
+    "framer-motion": "^11.3.30",
     "fuzzysort": "^2.0.4",
     "geopattern": "^1.2.3",
     "globby": "^11.0.4",
     "graphql": "^16.8.1",
     "howler": "^2.2.4",
     "js-confetti": "^0.12.0",
+    "jsx-runtime": "^1.2.0",
     "jszip": "^3.10.1",
     "jszip-utils": "^0.1.0",
     "leaflet": "^1.9.4",
@@ -68,7 +69,9 @@
     "react-countdown": "^2.3.6",
     "react-datepicker": "^4.24.0",
     "react-dom": "^18.3.1",
+    "react-fast-marquee": "^1.6.5",
     "react-horizontal-scrolling-menu": "^6.0.2",
+    "react-intersection-observer": "^9.13.0",
     "react-konami-code": "^2.3.0",
     "react-leaflet": "^4.2.1",
     "react-lite-youtube-embed": "^2.4.0",

pages/arcade/review.js

@@ -5,6 +5,9 @@ import { Balancer } from 'react-wrap-balancer'
 import Fade from 'react-reveal/Fade'
 import Project from '../../components/arcade/review/project'
 import { motion } from 'framer-motion'
+import { TypeAnimation } from 'react-type-animation'
+import { useInView } from 'react-intersection-observer'
+import Marquee from 'react-fast-marquee'
 
 /** @jsxImportSource theme-ui */
 
@@ -124,25 +127,26 @@ const testData = [
 ]
 
 const projectVariants = {
-  initial: { x: '100%', opacity: 0, y: '100%' }, // Start off-screen to the right
-  animate: (index) => ({
+  initial: {
+    x: '100%',
+    y: '90vh',
+    opacity: 0
+  },
+  animate: index => ({
     x: 0,
+    y: '90vh',
     opacity: 1,
     transition: {
-      duration: 0.5,
-      delay: index * 1, // Adjust this factor to control the delay for each project
-    },
+      duration: 1,
+      delay: index * 3 // Staggered delay based on index
+    }
   }),
   moveUp: {
-    y: '-1000%', // Move the project upward
+    y: '-90vh',
     transition: {
       ease: 'linear',
-      duration: 30 // Control the speed of the upward movement
+      duration: 60
     }
-  },
-  exit: {
-    opacity: 0, // Fade out or continue sliding up
-    transition: { duration: 0.5 }
   }
 }
 
@@ -156,6 +160,13 @@ const projectVariants = {
 
 const Review = () => {
   const [map, setMap] = useState(null)
+  const { ref, inView, entry } = useInView({ threshold: 0 })
+
+  const [isSmallScreen, setIsSmallScreen] = useState(0)
+
+  useEffect(() => {
+    setIsSmallScreen(window.innerWidth <= 780)
+  }, [])
 
   useEffect(() => {
     import('react-leaflet').then(
@@ -184,10 +195,10 @@ const Review = () => {
         <div
           sx={{
             display: 'grid',
-            gridTemplateColumns: ['1fr', '2fr 1fr', '3fr 1fr']
+            gridTemplateColumns: ['1fr', '1fr', '2fr 1fr', '3fr 1fr']
           }}
         >
-          <div sx={{ px: 5, py: 4 }}>
+          <div sx={{ px: [3, 4, 5, 5], py: 4, pr: [3, 4, 3, 5] }}>
             <Fade>
               <Text
                 as="h3"
@@ -220,23 +231,31 @@ const Review = () => {
                 </Text>
               </Balancer>
             </Fade>
-            <MapContainer
-              center={[51.505, -0.09]}
-              zoom={2}
-              scrollWheelZoom={false}
-              sx={{ height: '400px', borderRadius: '10px' }}
-            >
-              <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-              />
-              <Marker position={[51.505, -0.09]}>
-                <Popup>
-                  A pretty CSS3 popup. <br /> Easily customizable.
-                </Popup>
-              </Marker>
-            </MapContainer>
-            <Fade>
+            <Fade delay={300}>
+              <MapContainer
+                center={[51.505, -0.09]}
+                zoom={2}
+                scrollWheelZoom={false}
+                sx={{
+                  height: ['300px', '350px', '400px', '400px'],
+                  width: ['350px', '450px', '100%', '100%'],
+                  // width: '100%',
+                  borderRadius: '10px'
+                  // margin: ['auto', 'auto', 'initial', 'initial']
+                }}
+              >
+                <TileLayer
+                  attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <Marker position={[51.505, -0.09]}>
+                  <Popup>
+                    A pretty CSS3 popup. <br /> Easily customizable.
+                  </Popup>
+                </Marker>
+              </MapContainer>
+            </Fade>
+            <Fade delay={400}>
               <Button
                 as="a"
                 sx={{
@@ -255,45 +274,153 @@ const Review = () => {
             </Fade>
           </div>
           <div id="projects">
-            <motion.div
-              initial="initial"
-              animate="animate"
-              exit="exit"
-              
-              // variants={containerVariants}
-              sx={{ height: '100vh' }}
-            >
-              {testData.map((p, index) => (
-                <motion.div
-                  key={p.id}
-                  custom={index} 
-                  variants={projectVariants}
-                  initial="initial"
-                  animate="animate"
-                  whileInView="moveUp"
-                  exit="exit"
-                  sx={{ position: 'relative', width: '100%' }} // Ensure projects stack vertically
-                >
+            {isSmallScreen ? (
+              <Marquee pauseOnHover={true} autoFill={true} className="h-52">
+                {testData.map((p, index) => (
                   <Project
                     name={p.user[0]}
                     projectName={p.title}
                     country={p.country[0]}
                     img={p.imageLink}
                   />
-                </motion.div>
-              ))}
-            </motion.div>
-            {/* {testData.map(p => (
-              <Project
-                name={p.user[0]}
-                projectName={p.title}
-                country={p.country[0]}
-                img={p.imageLink}
-              />
-            ))} */}
+                ))}
+              </Marquee>
+            ) : (
+              <motion.div
+                initial="initial"
+                animate="animate"
+                exit="exit"
+                // variants={containerVariants}
+                sx={{ height: '100vh', width: '100%' }}
+              >
+                {testData.map((p, index) => (
+                  <motion.div
+                    key={p.id}
+                    custom={index}
+                    variants={projectVariants}
+                    initial="initial"
+                    animate="animate"
+                    whileInView="moveUp"
+                    // exit="exit"
+                    sx={{ position: 'absolute', width: '60%' }} // Ensure projects stack vertically
+                  >
+                    <Project
+                      name={p.user[0]}
+                      projectName={p.title}
+                      country={p.country[0]}
+                      img={p.imageLink}
+                    />
+                  </motion.div>
+                ))}
+              </motion.div>
+            )}
           </div>
         </div>
+        <div
+          sx={{
+            backgroundImage: 'url(/arcade/review/beigeRocky.png)',
+            width: '100vw',
+            height: '800px',
+            backgroundSize: 'cover',
+            color: '#35290F'
+          }}
+        >
+          <div
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: ['1fr', '1fr', '2fr 1.5fr'],
+              pt: 6,
+              pb: 5
+            }}
+          >
+            <img
+              sx={{ width: '90%', margin: 'auto' }}
+              src="/arcade/review/rundown.png"
+            />
+            <div
+              ref={ref}
+              sx={{
+                display: 'flex',
+                flexDirection: ['row', 'row', 'column'],
+                gap: '20px',
+                flexWrap: 'wrap',
+                width: ['350px', '400px', '300px'],
+                margin: 'auto',
+                justifyContent: 'space-between'
+              }}
+            >
+              {inView && (
+                <>
+                  <div>
+                    <TypeAnimation
+                      sequence={['10,000']}
+                      speed={50}
+                      sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
+                      className="slackey"
+                      cursor={false}
+                    />
+                    <br />
+                    <TypeAnimation
+                      sequence={['', 500, 'high schoolers']}
+                      speed={50}
+                      sx={{ fontSize: [3, 3, 4], mt: 0 }}
+                      cursor={false}
+                    />
+                  </div>
+                  <div>
+                    <TypeAnimation
+                      sequence={['', 1000, '150,000']}
+                      speed={50}
+                      sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
+                      className="slackey"
+                      cursor={false}
+                    />
+                    <br />
+                    <TypeAnimation
+                      sequence={['', 1500, 'hours building']}
+                      speed={50}
+                      sx={{ fontSize: [3, 3, 4], mt: 0 }}
+                      cursor={false}
+                    />
+                  </div>
+                  <div>
+                    <TypeAnimation
+                      sequence={['', 2000, '4,000']}
+                      speed={50}
+                      sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
+                      className="slackey"
+                      cursor={false}
+                    />
+                    <br />
+                    <TypeAnimation
+                      sequence={['', 2500, 'projects']}
+                      speed={50}
+                      sx={{ fontSize: [3, 3, 4], mt: 0 }}
+                      cursor={false}
+                    />
+                  </div>
 
+                  <div>
+                    <TypeAnimation
+                      sequence={['', 3000, '$200,000']}
+                      speed={50}
+                      sx={{ fontSize: [4, '38px', '52px'], mb: 0 }}
+                      className="slackey"
+                      cursor={false}
+                    />
+                    <br />
+                    <TypeAnimation
+                      sequence={['', 3500, 'in prizes']}
+                      speed={50}
+                      sx={{ fontSize: [3, 3, 4], mt: 0 }}
+                      cursor={false}
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
         <style>{styled}</style>
       </body>
       <script

yarn.lock

@@ -4334,10 +4334,10 @@ formdata-node@^4.3.2:
     node-domexception "1.0.0"
     web-streams-polyfill "4.0.0-beta.3"
 
-framer-motion@^11.3.29:
-  version "11.3.29"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.3.29.tgz#5ec10a350b89789d43ea7d9c6bde45b28470f196"
-  integrity sha512-uyDuUOeOElJEA3kbkbyoTNEf75Jih1EUg0ouLKYMlGDdt/LaJPmO+FyOGAGxM2HwKhHcAoKFNveR5A8peb7yhw==
+framer-motion@^11.3.30:
+  version "11.3.30"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.3.30.tgz#9c82ea5e0318592a7046d91d8ba29060d5c4a9cc"
+  integrity sha512-9VmqGe9OIjfMoCcs+ZsKXlv6JaG5QagKX2F1uSbkG3Z33wgjnz60Kw+CngC1M49rDYau+Y9aL+8jGagAwrbVyw==
   dependencies:
     tslib "^2.4.0"
 
@@ -5553,6 +5553,13 @@ jsprim@^1.2.2:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+jsx-runtime@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/jsx-runtime/-/jsx-runtime-1.2.0.tgz#3bae0dad50ec30541bb5b0420b104856694350cb"
+  integrity sha512-iCxmRTlUAWmXwHZxN0JSx/T7eRi0SkKAskE0lp+j4W1mzdNp49ja/9QI2ZmlggPM95RqnDw5ioYjw0EcvpIClw==
+  dependencies:
+    object-assign "^3.0.0"
+
 jszip-utils@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/jszip-utils/-/jszip-utils-0.1.0.tgz#8c04cdedcdb291e83f055f5b261b3a3188ceca0b"
@@ -6901,6 +6908,11 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+  integrity sha512-jHP15vXVGeVh1HuaA2wY6lxk+whK/x4KBG88VXeRma7CCun7iGD5qPc4eYykQ9sdQvg8jkwFKsSxHln2ybW3xQ==
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -7500,6 +7512,11 @@ react-fast-compare@^3.0.1, react-fast-compare@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
+react-fast-marquee@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz#98929ae93eef087a607a71e9d45ab76bba97dc16"
+  integrity sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==
+
 react-horizontal-scrolling-menu@^6.0.2:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-6.1.0.tgz#decd85838295372a83a987c060e923d21952b3f5"
@@ -7507,6 +7524,11 @@ react-horizontal-scrolling-menu@^6.0.2:
   dependencies:
     smooth-scroll-into-view-if-needed "^2.0.2"
 
+react-intersection-observer@^9.13.0:
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.13.0.tgz#ee10827954cf6ccc204d027f8400a6ddb8df163a"
+  integrity sha512-y0UvBfjDiXqC8h0EWccyaj4dVBWMxgEx0t5RGNzQsvkfvZwugnKwxpu70StY4ivzYuMajavwUDjH4LJyIki9Lw==
+
 react-is@16.13.1, react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"