Merge version_5_1782341025928 into main

Merge version_5_1782341025928 into main

src/pages/HomePage.tsx

@@ -12,7 +12,8 @@ import TestimonialsSection from './HomePage/sections/Testimonials';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import PopularItemsSection from './HomePage/sections/PopularItems';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -20,6 +21,7 @@ export default function HomePage(): React.JSX.Element {
   <AboutSection />
 
   <MenuSection />
+      <PopularItemsSection />
 
   <MetricsSection />
 

src/pages/HomePage/sections/PopularItems.tsx

@@ -0,0 +1,77 @@
+import { motion } from 'motion/react';
+import TextAnimation from '@/components/ui/TextAnimation';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import Button from '@/components/ui/Button';
+import Tag from '@/components/ui/Tag';
+import ImageOrVideo from '@/components/ui/ImageOrVideo';
+
+export default function PopularItemsSection() {
+  const popularItems = [
+    {
+      name: "Bean and Cheese Pupusa",
+      description: "Our most popular item! Melted cheese and savory refried beans inside a warm, handmade corn tortilla.",
+      price: "$3.50",
+      imageSrc: "https://picsum.photos/seed/368528480/1200/800"
+    },
+    {
+      name: "Revueltas (Pork, Bean & Cheese)",
+      description: "The classic combination of seasoned pork chicharron, beans, and cheese.",
+      price: "$4.00",
+      imageSrc: "https://picsum.photos/seed/1350818826/1200/800"
+    },
+    {
+      name: "Loroco and Cheese Pupusa",
+      description: "A traditional Salvadoran favorite featuring the unique, earthy flavor of loroco flower buds.",
+      price: "$4.00",
+      imageSrc: "https://picsum.photos/seed/2068017062/1200/800"
+    }
+  ];
+
+  return (
+    <section data-webild-section="popular-items" id="popular-items" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Customer Favorites" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Most Loved by Our Guests"
+            variant="fade-blur"
+            tag="h2"
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+            gradientText={false}
+          />
+          <ScrollReveal variant="fade" delay={0.2}>
+            <p className="text-lg text-accent max-w-2xl mx-auto mb-8">
+              Discover the dishes that keep our customers coming back for more. From our famous bean and cheese pupusas to traditional favorites, there's something for everyone.
+            </p>
+            <Button text="Order Online Now" variant="primary" href="#order" />
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {popularItems.map((item, index) => (
+            <ScrollReveal variant="fade" key={index} delay={0.1 * index} className="h-full">
+              <div className="card h-full flex flex-col overflow-hidden rounded-lg">
+                <div className="relative h-64 w-full">
+                  <ImageOrVideo
+                    imageSrc={item.imageSrc}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="p-6 flex flex-col flex-grow">
+                  <div className="flex justify-between items-start mb-4">
+                    <h3 className="text-xl font-bold text-foreground">{item.name}</h3>
+                    <span className="text-lg font-semibold text-foreground">{item.price}</span>
+                  </div>
+                  <p className="text-accent flex-grow mb-6">{item.description}</p>
+                  <Button text="Add to Order" variant="secondary" className="w-full" />
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}