Feat/Home_page_enhancement (#111)

* home page enhancements

* storybook builded

src/app/page.tsx

@@ -4,7 +4,9 @@ import MainCarousel from "@/components/molecules/MainCarousel";
 import RichAndHealthy from "@/components/molecules/RichAndHealthy";
 import SpecialMenu from "@/components/molecules/SpecialMenu";
 import BigOfferSection from "@/components/templates/bigOfferSection/BigOfferSection";
+import HighlightSection from "@/components/templates/HighlightSection/HighlightSection";
 import PopularDishesSection from "@/components/templates/popularDishesSection/PopularDishesSection";
+import TestimonialSection from "@/components/templates/testimonialSection/TestimonialSection";
 
 const slides = Array.from({ length: 5 }, (item, index) => ({
   id: index,
@@ -35,6 +37,8 @@ export default function Home() {
         <BigOfferSection />
         <SpecialMenu meals={meals} />
         <DeliverySection />
+        <HighlightSection />
+        <TestimonialSection />
       </MainContainer>
     </div>
   );

src/components/atoms/specialMealCard/SpecialMealCard.module.scss

@@ -2,6 +2,7 @@
 @import "../../../foundations/sass/all";
 
 .card {
+  border: 1px solid $special-meal-card-color;
   border-radius: $br-md;
   color: $special-meal-card-color;
   height: px-to-rem(180);

src/components/molecules/TestimonialCard/TestimonialCard.module.scss

@@ -10,6 +10,10 @@
   position: relative;
   width: px-to-rem(443);
 
+  &--blur {
+    filter: blur(3px);
+  }
+
   &__image {
     border: 4px solid $testimonial-card-image-border-color;
     border-radius: $br-full;

src/components/molecules/TestimonialCard/TestimonialCard.stories.tsx

@@ -8,6 +8,7 @@ export const Default = {
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. ",
     rating: 4,
     image: "/images/man.jpg",
+    isActive: true,
   },
 };
 

src/components/molecules/TestimonialCard/TestimonialCard.tsx

@@ -8,15 +8,17 @@ interface TestimonialCardProps {
   description: string;
   rating: number;
   image: string;
+  isActive?: boolean;
 }
 const TestimonialCard: React.FC<TestimonialCardProps> = ({
   name,
   description,
   rating,
   image,
+  isActive = true,
 }) => {
   return (
-    <div className={styles.card}>
+    <div className={`${styles.card} ${isActive ? "" : styles["card--blur"]}`}>
       <Image
         src={image}
         width={100}

src/components/templates/HighlightSection/HighlightSection.module.scss

@@ -0,0 +1,24 @@
+@import "../../../foundations/sass/all";
+
+.section {
+  &__heading {
+    color: $primary-color;
+    font-size: $fs-lg;
+    font-weight: $fw-bold;
+    line-height: px-to-rem(25);
+    margin-bottom: px-to-rem(33);
+    text-align: center;
+  }
+
+  &__content {
+    display: flex;
+    gap: 1rem;
+
+    @include tablet {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      margin: auto;
+    }
+  }
+}

src/components/templates/HighlightSection/HighlightSection.stories.tsx

@@ -0,0 +1,11 @@
+import { Meta } from "@storybook/react";
+import HighlightSection from "./HighlightSection";
+
+const highlightSection: Meta<typeof HighlightSection> = {
+  title: "Templates/HighlightSection",
+  component: HighlightSection,
+};
+
+export const Default = {};
+
+export default highlightSection;

src/components/templates/HighlightSection/HighlightSection.tsx

@@ -0,0 +1,36 @@
+import HighlightCard from "@/components/atoms/HighlightCard";
+import React from "react";
+import styles from "./HighlightSection.module.scss";
+
+const HighlightSection = () => {
+  return (
+    <div className={styles.section}>
+      <h2 className={styles.section__heading}>Why We are the best</h2>
+      <div className={styles.section__content}>
+        <HighlightCard
+          image="icons/highlight-icon.svg"
+          title="100 % Fresh Foods"
+          description="Beguiled and demoralized by all get charms pleasure the moments ever so blinded by desire."
+          link="/"
+          mode="secondary"
+        />
+        <HighlightCard
+          image="icons/highlight-icon.svg"
+          title="100 % Fresh Foods"
+          description="Beguiled and demoralized by all get charms pleasure the moments ever so blinded by desire."
+          link="/"
+          mode="primary"
+        />
+        <HighlightCard
+          image="icons/highlight-icon.svg"
+          title="100 % Fresh Foods"
+          description="Beguiled and demoralized by all get charms pleasure the moments ever so blinded by desire."
+          link="/"
+          mode="secondary"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HighlightSection;

src/components/templates/testimonialSection/Testimonial.stories.tsx

@@ -0,0 +1,11 @@
+import { Meta } from "@storybook/react";
+import TestimonialSection from "./TestimonialSection";
+
+const testimonialSection: Meta<typeof TestimonialSection> = {
+  title: "Templates/TestimonialSection",
+  component: TestimonialSection,
+};
+
+export const Default = {};
+
+export default testimonialSection;

src/components/templates/testimonialSection/TestimonialSection.module.scss

@@ -0,0 +1,53 @@
+@import "../../../foundations/sass/all";
+
+.testimonial-section {
+  text-align: center;
+
+  &__name {
+    color: $testimonial-section-color;
+    font-size: $fs-lg;
+    font-weight: $fw-bold;
+    margin-bottom: px-to-rem(15);
+  }
+
+  &__heading {
+    color: $testimonial-section-color;
+    font-size: $fs-xxl;
+    font-weight: $fw-bold;
+    line-height: 1.2;
+    margin-bottom: px-to-rem(20);
+    text-align: center;
+
+    span {
+      color: $testimonial-section-secondary-color;
+    }
+  }
+
+  &__swiper {
+    box-sizing: border-box;
+    height: fit-content;
+    max-width: px-to-rem(1220);
+    min-height: px-to-rem(345);
+    padding: px-to-rem(10);
+    text-align: center;
+
+    & > div {
+      div {
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    & > div:last-of-type {
+      margin: auto;
+
+      & > span {
+        border: 2px solid $primary-color;
+
+        &.swiper-pagination-bullet-active {
+          background: $primary-color;
+        }
+      }
+    }
+  }
+}

src/components/templates/testimonialSection/TestimonialSection.tsx

@@ -0,0 +1,69 @@
+"use client";
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import { Pagination } from "swiper/modules";
+import styles from "./TestimonialSection.module.scss";
+import TestimonialCard from "@/components/molecules/TestimonialCard/TestimonialCard";
+const TestimonialSection = () => {
+  const [currentSlide, setCurrentSlide] = React.useState(0);
+  return (
+    <div className={styles["testimonial-section"]}>
+      <p className={styles["testimonial-section__name"]}>Testimonial</p>
+      <h2 className={styles["testimonial-section__heading"]}>
+        <span>Review</span> form our guests
+      </h2>
+      <Swiper
+        modules={[Pagination]}
+        spaceBetween={10}
+        slidesPerView={2.5}
+        breakpoints={{
+          0: {
+            slidesPerView: 1,
+            spaceBetween: 10,
+          },
+          640: {
+            slidesPerView: 2,
+            spaceBetween: 20,
+          },
+          768: {
+            slidesPerView: 2,
+            spaceBetween: 40,
+          },
+          1024: {
+            slidesPerView: 2.5,
+            spaceBetween: 50,
+          },
+        }}
+        centeredSlides={true}
+        onSlideChange={(swiper) => setCurrentSlide(swiper.realIndex)}
+        initialSlide={1}
+        pagination={{ clickable: true }}
+        loop
+        onSwiper={(swiper) => console.log(swiper.activeIndex)}
+        autoplay={{
+          delay: 3000,
+          disableOnInteraction: false,
+        }}
+        className={styles["testimonial-section__swiper"]}
+      >
+        {Array.from({ length: 10 }).map((_, index) => (
+          <SwiperSlide key={index}>
+            <TestimonialCard
+              name={"Bernadette R. Martin"}
+              description={
+                "Also very good and so was the service. I had the mushroom risotto with scallops which was awesome. My wife had a burger over greens ..."
+              }
+              isActive={index == currentSlide}
+              rating={3}
+              image={"/images/man.jpg"}
+            />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default TestimonialSection;