Merge version_5_1782341025928 into main

Merge version_5_1782341025928 into main

src/components/Layout.tsx

@@ -56,6 +56,19 @@ export default function Layout() {
         <FooterSimple
       brand="Pupusas Deli"
       columns={[
+        {
+          title: "Location",
+          items: [
+            {
+              label: "2615 Little Rock Rd",
+              href: "#",
+            },
+            {
+              label: "Charlotte, NC 28214",
+              href: "#",
+            },
+          ],
+        },
         {
           title: "Menu",
           items: [

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/Contact.tsx

@@ -10,17 +10,17 @@ export default function ContactSection(): React.JSX.Element {
     <div id="contact" data-section="contact">
         <SectionErrorBoundary name="contact">
               <ContactCta
-          tag="Visit Us"
-          text="Come visit our deli today and taste authentic Salvadoran pupusas made with love."
-          primaryButton={{
+        tag="Visit Us"
+        text="Come visit our deli today at 2615 Little Rock Rd, Charlotte, NC 28214 and taste authentic Salvadoran pupusas made with love."
+        primaryButton={{
             text: "Get Directions",
             href: "#",
           }}
-          secondaryButton={{
-            text: "Call Us",
-            href: "tel:5555555555",
+        secondaryButton={{
+            text: "Call Us: +1 980-256-5980",
+            href: "tel:+19802565980",
           }}
-        />
+      />
         </SectionErrorBoundary>
       </div>
   );

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>
+  );
+}