categoried new secton updated

src/app/page.tsx

@@ -1,6 +1,7 @@
 import Hero from "@/components/Hero/Hero";
 import PopularDishes from "@/components/PopularDishes/PopularDishes";
 import About from "@/components/About/About";
+import Categories from "@/components/Categories/Categories";
 import Menu from "@/components/Menu/Menu";
 import Gallery from "@/components/Gallery/Gallery";
 import Testimonials from "@/components/Testimonials/Testimonials";
@@ -21,6 +22,7 @@ export default function Home() {
       <Hero />
       <PopularDishes />
       <About />
+      <Categories/>
       <Menu />
       <Gallery />
       <Testimonials />

src/components/Categories/Categories.module.css

@@ -0,0 +1,195 @@
+.categoriesSection {
+    text-align: center;
+    background-color: #000000;
+    background-image: url(/images/about-us/guest-bg.webp);
+    background-position: center;
+    background-size: cover;
+    padding: 80px 10px;
+    position: relative;
+}
+
+.sectionHeading {
+    padding: 0px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.smallHeading {
+    font-size: var(--small-text-size);
+    color: var(--color-paragraph);
+    font-family: var(--font-lato);
+    font-weight: 600;
+    letter-spacing: 2px;
+    margin-bottom: 1rem;
+}
+
+.mainHeading {
+    font-family: var(--font-playfair);
+    font-size: var(--main-heading-size);
+    color: #f5e6d3;
+    line-height: 1.3;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.description {
+    font-size: var(--body-size);
+    color: var(--color-paragraph);
+    line-height: 1.8;
+    font-family: var(--font-lato);
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.categoriesGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 3rem;
+    padding: 0 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.categoryCard {
+    position: relative;
+    cursor: pointer;
+    transition: all 0.4s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.categoryCard:hover {
+    transform: translateY(-10px);
+}
+
+.imageContainer {
+    position: relative;
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    transition: all 0.4s ease;
+}
+
+.categoryCard:hover .imageContainer {
+    box-shadow: 0 15px 50px rgba(196, 156, 92, 0.6);
+}
+
+.imageWrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.categoryImage {
+    object-fit: cover;
+    transition: transform 0.6s ease;
+}
+
+.categoryCard:hover .categoryImage {
+    transform: scale(1.15);
+}
+
+.overlay {
+    display: none;
+}
+
+.categoryContent {
+    width: 100%;
+    transition: transform 0.4s ease;
+}
+
+.categoryCard:hover .categoryContent {
+    transform: translateY(-5px);
+}
+
+.categoryName {
+    font-family: var(--font-playfair);
+    font-size: 1.4rem;
+    color: #f5e6d3;
+    font-weight: 700;
+    text-transform: uppercase;
+    margin: 0 0 1rem 0;
+    letter-spacing: 1px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.decorativeLine {
+    width: 60px;
+    height: 3px;
+    background: linear-gradient(90deg, #c49c5c 0%, transparent 100%);
+    margin: 0 auto;
+    transition: width 0.4s ease;
+}
+
+.categoryCard:hover .decorativeLine {
+    width: 100px;
+    background: linear-gradient(90deg, #c49c5c 0%, #b07c4b 100%);
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .categoriesGrid {
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 2.5rem;
+    }
+
+    .imageContainer {
+        width: 160px;
+        height: 160px;
+    }
+
+    .categoryName {
+        font-size: 1.3rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .categoriesSection {
+        padding: 60px 10px;
+    }
+
+    .categoriesGrid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+        padding: 0 1rem;
+    }
+
+    .imageContainer {
+        width: 140px;
+        height: 140px;
+    }
+
+    .categoryName {
+        font-size: 1.2rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .categoriesSection {
+        padding: 50px 10px;
+    }
+
+    .categoriesGrid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.5rem;
+    }
+
+    .imageContainer {
+        width: 120px;
+        height: 120px;
+    }
+
+    .categoryName {
+        font-size: 1.1rem;
+    }
+
+    .sectionHeading {
+        padding: 0px 15px 30px;
+    }
+}

src/components/Categories/Categories.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import styles from "@/components/Categories/Categories.module.css";
+import { menuData } from "@/utils/constant";
+
+export default function Categories() {
+    // Map categories with representative food images
+    const categoryImages: { [key: string]: string } = {
+        'Kebabs': '/images/home/categories/kebabs.webp',
+        'Doner': '/images/home/categories/doner.webp',
+        'Pides': '/images/home/categories/pides.webp',
+        'Sandwiches & Wraps': '/images/home/categories/wraps.webp',
+        'Special Mix Platters': '/images/home/categories/platter.webp',
+        'Specialty Dishes': '/images/home/categories/speciality.webp',
+        'Appetizers': '/images/home/categories/appetizers.webp',
+        'Sides': '/images/home/categories/sides.webp',
+        'Salads': '/images/home/categories/salads.webp',
+        'Drinks': '/images/home/categories/drinks.webp',
+        'Desserts': '/images/home/categories/dessert.webp'
+    };
+
+    // Extract unique categories from menuData with custom images
+    const categories = menuData.map(section => ({
+        name: section.category,
+        image: categoryImages[section.category] || section.image
+    }));
+
+    // Animation variants
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.15,
+                delayChildren: 0.2
+            }
+        }
+    };
+
+    const cardVariants = {
+        hidden: { opacity: 0, y: 50, scale: 0.9 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            transition: {
+                duration: 0.6,
+                ease: "easeOut" as const
+            }
+        }
+    };
+
+    return (
+        <section className={styles.categoriesSection}>
+            {/* Heading Section */}
+            <section className={styles.sectionHeading}>
+                <div
+                    className={styles.smallHeading}
+                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}
+                >
+                    <Image src="/images/dinner.png" alt="Categories Decorative Dinner Icon" width={24} height={24} />
+                    <span>DISCOVER</span>
+                    <Image src="/images/eat.png" alt="Categories Decorative Cutlery Icon" width={24} height={24} />
+                </div>
+                <h2 className={styles.mainHeading}>Our Menu Categories</h2>
+                <p className={styles.description}>
+                    Explore our authentic Turkish culinary offerings, featuring everything from charcoal-grilled kebabs and flavorful mezzes to hearty mains and handcrafted desserts. Each category celebrates the rich traditions and vibrant tastes of Anatolia.
+                </p>
+            </section>
+
+            {/* Categories Grid */}
+            <motion.div
+                className={styles.categoriesGrid}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true, amount: 0.2 }}
+                variants={containerVariants}
+            >
+                {categories.map((category, index) => (
+                    <motion.div
+                        key={index}
+                        className={styles.categoryCard}
+                        variants={cardVariants}
+                        whileHover={{
+                            y: -10,
+                            transition: { duration: 0.3 }
+                        }}
+                    >
+                        <div className={styles.imageContainer}>
+                            <div className={styles.imageWrapper}>
+                                <Image
+                                    src={category.image}
+                                    alt={`${category.name} Category`}
+                                    fill
+                                    className={styles.categoryImage}
+                                />
+                            </div>
+                            <div className={styles.overlay}></div>
+                        </div>
+                        <div className={styles.categoryContent}>
+                            <h3 className={styles.categoryName}>{category.name}</h3>
+                            <div className={styles.decorativeLine}></div>
+                        </div>
+                    </motion.div>
+                ))}
+            </motion.div>
+        </section>
+    );
+}