Merge pull request #28 from WRCRoboticsClub/dev-website-2.0

prashantbhandary · web-flow · commit 38d22029279e · 2025-07-17T20:25:38.000+05:45
edited the testimonials and the banner of the hero section
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "glob-parent": "^5.1.2",
     "globby": "^11.0.0",
     "isomorphic-unfetch": "^3.0.0",
+    "lottie-react": "^2.4.1",
     "next": "^12.3.4",
     "next-compose-plugins": "^2.2.1",
     "next-optimized-images": "^2.6.2",
diff --git a/src/assets/robot-hero.json b/src/assets/robot-hero.json
diff --git a/src/components/KeyFeature/key-feature.data.js b/src/components/KeyFeature/key-feature.data.js
@@ -9,27 +9,27 @@ export const data = [
     imgSrc: Performance,
     altText: "Interactive Training",
     title: "Interactive Training",
-    text: "55+ interactive training modules",
+    text: "550+ interactive training modules",
   },
   {
     id: 2,
     imgSrc: Partnership,
     altText: "Students reached",
     title: "Students reached",
-    text: "More than 10,000 students",
+    text: "More than 50,000 students",
   },
   {
     id: 3,
     imgSrc: Subscription,
     altText: "Competition",
     title: "Competition",
-    text: "55+ competitions",
+    text: "100+ competitions",
   },
   {
     id: 4,
     imgSrc: Support,
     altText: "Awards",
     title: "Awards",
-    text: "7+ honors and awards",
+    text: "20+ honors and awards",
   },
 ];
diff --git a/src/components/KeyFeature/key-feature.js b/src/components/KeyFeature/key-feature.js
@@ -12,7 +12,6 @@ export default function KeyFeature() {
         <SectionHeader
           title="Achievements"
         />
-
         <Grid sx={styles.grid}>
           {data.map((item) => (
             <FeatureCardColumn
diff --git a/src/components/Testimonials.js b/src/components/Testimonials.js
@@ -0,0 +1,74 @@
+/** @jsxImportSource @theme-ui/core */
+import { jsx } from "theme-ui";
+import { Container } from "theme-ui";
+import SectionHeader from "./section-header";
+import Carousel from "react-multi-carousel";
+import "react-multi-carousel/lib/styles.css";
+import { data } from "./testimonials.data";
+
+const responsive = {
+  desktop: {
+    breakpoint: { max: 3000, min: 1024 },
+    items: 2,
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 640 },
+    items: 1,
+  },
+  mobile: {
+    breakpoint: { max: 640, min: 0 },
+    items: 1,
+  },
+};
+
+export default function Testimonials() {
+  return (
+    <section sx={{ variant: "section.Testimonials" }} id="testimonials">
+      <Container sx={styles.container}>
+        <SectionHeader title="Testimonials" />
+        <Carousel
+          responsive={responsive}
+          infinite={true}
+          autoPlay={true}
+          autoPlaySpeed={3000}
+          keyBoardControl={true}
+          showDots={false}
+          arrows={false}
+          containerClass="carousel-container"
+          itemClass="carousel-item-padding-40-px"
+        >
+          {data.map((person) => (
+            <div
+              key={person.id}
+              sx={{
+                textAlign: "center",
+                px: 3,
+                py: 4,
+                borderRadius: 8,
+                boxShadow: "0 4px 8px rgba(0,0,0,0.1)",
+                bg: "background",
+                mx: 2,
+              }}
+            >
+            
+              <h3 sx={{ fontSize: 3, mb: 1 }}>{person.name}</h3>
+              <p sx={{ fontStyle: "italic", color: "textMuted", mb: 2 }}>
+                {person.role}
+              </p>
+              <p sx={{ fontSize: 2, color: "text" }}>“{person.text}”</p>
+            </div>
+          ))}
+        </Carousel>
+      </Container>
+    </section>
+
+    
+  );
+}
+
+
+const styles = {
+  container: {
+    marginTop: "80px",
+  },
+};
diff --git a/src/components/testimonials.data.js b/src/components/testimonials.data.js
@@ -0,0 +1,32 @@
+export const data = [
+    {
+      id: 1,
+      name: "Alija Bujel",
+      role: "Former Executive Head, Robotics Club",
+      text: "Being a part of the Robotics Club was the most transformative experience of my college life.",
+
+    },
+    {
+      id: 2,
+      name: "Sandesh Ghorshai",
+      role: "Executive Head",
+      text: "The competitions and workshops were incredibly fun and insightful. Highly recommended!",
+
+    },
+    {
+      id: 3,
+      name: "Sumit Sigdel",
+      role: "Vice Executive Head",
+      text: "It's amazing to see students push boundaries with creativity and tech at WRC Robotics.",
+
+    },
+    {
+        id: 4,
+        name: "Prashant Bhandari",
+        role: "Executive Member",
+        text: "Must amazing place to learn and grow in the field of robotics. The team is very supportive and knowledgeable.",
+  
+      },
+
+  ];
+  
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,64 +1,72 @@
 /** @jsxImportSource @theme-ui/core */
-import ShapeLeft from "../assets/shape-left.png";
-import ShapeRight from "../assets/shape-right.png";
-import { Container, Box, Heading, Text, Image, Button } from "theme-ui";
-import BannerImg from "../assets/homepage_photo.jpg";
+import { Container, Box, Heading, Text, Button } from "theme-ui";
+import Lottie from "lottie-react";
+import RobotAnimation from "../assets/robot-hero.json";
 import KeyFeature from "../components/KeyFeature/key-feature";
 import Services from "../components/services/service";
+import Testimonials from "../components/Testimonials";
 
 export default function Home() {
   return (
     <section sx={styles.banner} id="home">
       <Container sx={styles.banner.container}>
+        {/* Left - Content */}
         <Box sx={styles.banner.contentBox}>
           <Heading as="h4" variant="heroPrimary">
-            Robotics Club, Pashchimanchal Campus, Lamachaur, Pokhara.
+            Robotics Club, Pashchimanchal Campus, Pokhara.
           </Heading>
           <Text as="p" variant="heroSecondary">
-            We are a team of multiple disciples teamed up to continue and
-            improve the culture of innovation, creative learning and teaching
-            with extracurricular activities around campus.
+          We are a team of passionate students working to promote innovation, creative learning,
+          and technical growth through engaging activities beyond the classroom.
           </Text>
           <Button variant="primary">Explore</Button>
         </Box>
-        <Box sx={styles.banner.imageBox}>
-          <Image src={BannerImg.src} alt="banner" />
+
+        {/* Right - Animation */}
+        <Box sx={styles.banner.animationBox}>
+          <Lottie
+            animationData={RobotAnimation}
+            loop
+            style={{ width: "auto", maxWidth: "20000px", height: "auto" }}
+          />
         </Box>
       </Container>
       <KeyFeature />
-      <Services />
+      {/* <Services /> */}
+      < Testimonials />
     </section>
   );
 }
 
 const styles = {
   banner: {
-    pt: ["140px", "145px", "155px", "170px", null, null, "180px", "215px"],
+    pt: ["120px", "130px", "140px", "150px", "180px"],
     pb: [2, null, 0, null, 2, 0, null, 5],
     position: "relative",
     zIndex: 2,
 
     container: {
-      minHeight: "inherit",
       display: "flex",
-      flexDirection: "row",
-      justifyContent: "center",
+      flexDirection: ["column", "column", "row"],
+      justifyContent: "space-between",
+      alignItems: "center",
+      px: [3, 4, 5],
+      gap: [4, 5, 6],
     },
+
     contentBox: {
-      width: ["100%", "90%", "535px", null, "57%", "60%", "68%", "60%"],
-      mx: "auto",
-      textAlign: "center",
-      mb: ["40px", null, null, null, null, 7],
+      flex: "1",
+      textAlign: ["center", "center", "center"],
+      maxWidth: ["100%", "90%", "50%"],
+      mb: ["30px", "40px", 0],
     },
-    imageBox: {
+
+    animationBox: {
+      flex: "1",
+      display: "flex",
       justifyContent: "center",
-      textAlign: "center",
-      display: "inline-flex",
-      mb: [0, null, -6, null, null, "-40px", null, -3],
-      img: {
-        position: "relative",
-        height: [200, "auto"],
-      },
+      alignItems: "center",
+      maxWidth: ["100%", "100%", "50%"],
     },
   },
 };
diff --git a/yarn.lock b/yarn.lock
@@ -2937,6 +2937,18 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-react@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.1.tgz"
+  integrity sha512-LQrH7jlkigIIv++wIyrOYFLHSKQpEY4zehPicL9bQsrt1rnoKRYCYgpCUe5maqylNtacy58/sQDZTkwMcTRxZw==
+  dependencies:
+    lottie-web "^5.10.2"
+
+lottie-web@^5.10.2:
+  version "5.13.0"
+  resolved "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz"
+  integrity sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
