Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,350 +2,130 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import { ShieldCheck } from "lucide-react";
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import MediaAbout from '@/components/sections/about/MediaAbout';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-stagger"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="reveal-blur"
         borderRadius="rounded"
         contentWidth="compact"
-        sizing="mediumLarge"
+        sizing="largeSizeMediumTitles"
-        background="circleGradient"
+        background="noise"
-        cardStyle="subtle-shadow"
+        cardStyle="solid"
-        primaryButtonStyle="diagonal-gradient"
+        primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
-        headingFontWeight="light"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+          <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Products", id: "#menu" },
-          name: "Menu",
+              { name: "About", id: "#about" },
-          id: "#menu",
+              { name: "Reviews", id: "#reviews" },
-        },
+              { name: "Contact", id: "#visit" },
-        {
+            ]}
-          name: "About",
+            brandName="State Supply Co Inc"
-          id: "#about",
+            button={{ text: "Get a Quote", href: "#visit" }}
-        },
+          />
-        {
+        </div>
-          name: "Reviews",
-          id: "#reviews",
-        },
-        {
-          name: "Visit Us",
-          id: "#visit",
-        },
-      ]}
-      brandName="The Coffee Brewer"
-      button={{
-        text: "Order Now",
-        href: "#",
-      }}
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplit
+          <HeroSplit
-      background={{
+            title="Reliable Roofing Supplies for Pros"
-        variant: "gradient-bars",
+            description="Top-grade roofing materials for contractors who get the job done right. Proudly serving Cleveland since 2004."
-      }}
+            tag="20+ Years of Excellence"
-      title="Great coffee, homemade soups, and a place that feels like home"
+            tagIcon={ShieldCheck}
-      description="Espresso drinks, fresh teas, homemade soups and sandwiches — served by the friendliest guy in town."
+            buttons={[{ text: "View Products", href: "#menu" }, { text: "Contact Us", href: "#visit" }]}
-      tag="Your cozy neighborhood coffee spot in Lyndhurst"
+            background={{ variant: "gradient-bars" }}
-      buttons={[
+            imageSrc="https://images.unsplash.com/photo-1632393397750-717013e26006?q=80&w=1200"
-        {
+            imageAlt="Professional roofing materials"
-          text: "See Our Menu",
+          />
-          href: "#menu",
+        </div>
-        },
-        {
-          text: "Find Us",
-          href: "#visit",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/top-view-cake-hot-beverage_23-2149271443.jpg?_wi=1"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-shot-cafe-wooden-table-with-jar-decorative-flowers-against-blurred-background_181624-59999.jpg",
-          alt: "Customer enjoying coffee",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/cream-liquer_23-2148014925.jpg",
-          alt: "Happy guest",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/easter-coffee-decorations-still-life_23-2150244092.jpg",
-          alt: "Coffee enthusiast",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/cozy-autumn-composition-with-cup-coffee-candles-bed_169016-21720.jpg",
-          alt: "Local resident",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-asian-adult-female-woman-wear-apron-standing-entrance-her-workshop-pottery-studio-incasual-cloth-relax-smiling-confident-warm-welcomeasian-woman-with-her-home-studio-workshop_609648-2692.jpg",
-          alt: "Friendly visitor",
-        },
-      ]}
-      avatarText="Join our community of coffee lovers"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Hand-crafted espresso",
-        },
-        {
-          type: "text",
-          text: "Freshly baked pastries",
-        },
-        {
-          type: "text",
-          text: "Homemade daily soups",
-        },
-        {
-          type: "text",
-          text: "Locally roasted beans",
-        },
-        {
-          type: "text",
-          text: "Friendly neighborhood vibe",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="highlights" data-section="highlights">
+        <div id="highlights" data-section="highlights">
-      <FeatureCardNineteen
+          <FeatureCardNineteen
-      textboxLayout="default"
+            title="Our Core Strength"
-      useInvertedBackground={false}
+            description="Professional-grade supplies designed for long-lasting performance."
-      features={[
+            textboxLayout="default"
-        {
+            useInvertedBackground={true}
-          tag: "Coffee",
+            features={[
-          title: "Great Coffee & Espresso",
+              { tag: "Durability", title: "Industrial Grade", subtitle: "Built tough", description: "Materials designed to withstand harsh Cleveland weather.", imageSrc: "https://images.unsplash.com/photo-1596422846543-75c6fc197f07?q=80&w=800" },
-          subtitle: "Premium quality",
+              { tag: "Availability", title: "Always Stocked", subtitle: "Pro inventory", description: "Get what you need when you need it.", imageSrc: "https://images.unsplash.com/photo-1581094794329-c8112a4722b5?q=80&w=800" },
-          description: "Expertly brewed espresso and fine coffee selections.",
+              { tag: "Expertise", title: "Contractor Focus", subtitle: "Expert advice", description: "We understand the trade inside and out.", imageSrc: "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=800" }
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-sweet-homemade-desserts_140725-114504.jpg",
+            ]}
-          imageAlt: "Delicious sweet and homemade desserts",
+          />
-        },
+        </div>
-        {
-          tag: "Food",
-          title: "Homemade Soups & Sandwiches",
-          subtitle: "Fresh daily",
-          description: "Made-from-scratch recipes that satisfy your cravings.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cake-hot-beverage_23-2149271443.jpg?_wi=2",
-          imageAlt: "Delicious sweet and homemade desserts",
-        },
-        {
-          tag: "Atmosphere",
-          title: "Cozy Casual Atmosphere",
-          subtitle: "Stay a while",
-          description: "A perfect neighborhood gem for conversation and comfort.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-joyful-african-student-woman-with-dark-wavy-hair-green-cardigan-sitting-cafe-drinking-cup-coffee-smiling-camera-woman-waiting-her-boyfriend-after-university_176420-12329.jpg?_wi=1",
-          imageAlt: "Delicious sweet and homemade desserts",
-        },
-        {
-          tag: "Service",
-          title: "Dine-In, Takeout & Delivery",
-          subtitle: "Conveniently yours",
-          description: "Serving you wherever you prefer to enjoy our coffee.",
-          imageSrc: "http://img.b2bpic.net/free-photo/strawberry-syrup-pie-served-with-cup-tea_114579-61842.jpg?_wi=1",
-          imageAlt: "Delicious sweet and homemade desserts",
-        },
-      ]}
-      title="Welcome to The Coffee Brewer"
-      description="Our promise of quality, comfort, and local care in every visit."
-    />
-  </div>
 
-  <div id="menu" data-section="menu">
+        <div id="menu" data-section="menu">
-      <ProductCardFour
+          <ProductCardFour
-      animationType="slide-up"
+            title="Building Materials"
-      textboxLayout="default"
+            description="Quality supplies for your next roofing project."
-      gridVariant="three-columns-all-equal-width"
+            gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
+            animationType="slide-up"
-      products={[
+            textboxLayout="default"
-        {
+            useInvertedBackground={false}
-          id: "p1",
+            products={[
-          name: "Espresso & Coffee",
+              { id: "1", name: "Shingle Bundles", price: "Inquire", variant: "Asphalt / Composite", imageSrc: "https://images.unsplash.com/photo-1520633107062-84156677f525?q=80&w=400" },
-          price: "From $3.50",
+              { id: "2", name: "Underlayment", price: "Inquire", variant: "Premium Synthetic", imageSrc: "https://images.unsplash.com/photo-1589939705384-5185137a7f0f?q=80&w=400" },
-          variant: "Lattes, Cappuccinos & Iced Drinks",
+              { id: "3", name: "Flashing Kits", price: "Inquire", variant: "Aluminum / Copper", imageSrc: "https://images.unsplash.com/photo-1613490493576-7fde63acd811?q=80&w=400" },
-          imageSrc: "http://img.b2bpic.net/free-photo/strawberry-syrup-pie-served-with-cup-tea_114579-61842.jpg?_wi=2",
+              { id: "4", name: "Safety Equipment", price: "Inquire", variant: "Harnesses / Gear", imageSrc: "https://images.unsplash.com/photo-1504307653684-33634033f0b2?q=80&w=400" }
-        },
+            ]}
-        {
+          />
-          id: "p2",
+        </div>
-          name: "Tea Selection",
-          price: "From $3.00",
-          variant: "Great variety of fresh teas",
-          imageSrc: "http://img.b2bpic.net/free-photo/colored-water-cups-white-background-side-view-space-text_176474-5166.jpg",
-        },
-        {
-          id: "p3",
-          name: "Homemade Soups",
-          price: "Bowl $6.00",
-          variant: "Fresh daily, best in town",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-touching-bowl_23-2148666864.jpg",
-        },
-        {
-          id: "p4",
-          name: "Sandwiches & Quick Bites",
-          price: "From $7.50",
-          variant: "Fresh, fairly priced goodness",
-          imageSrc: "http://img.b2bpic.net/free-photo/grilled-bbq-pork-chop-meat-steak_74190-6146.jpg",
-        },
-        {
-          id: "p5",
-          name: "Smoothies",
-          price: "From $5.50",
-          variant: "Great smoothies, great flavors",
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-red-smoothie-with-ingredients_23-2147684404.jpg",
-        },
-        {
-          id: "p6",
-          name: "Desserts & Snacks",
-          price: "From $2.50",
-          variant: "Biscotti, sweets, and treats",
-          imageSrc: "http://img.b2bpic.net/free-photo/various-cookies-wooden-tray-gray-background_114579-8065.jpg",
-        },
-      ]}
-      title="What we're serving"
-      description="Something delicious for every visit."
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <MediaAbout
+          <MediaAbout
-      useInvertedBackground={false}
+            title="Meet Jim"
-      title="Meet Mark"
+            description="Jim has been running State Supply Co Inc for over two decades. He knows exactly what contractors need to get the job done efficiently. Whether you're a seasoned expert or building your first crew, Jim is here to support your success."
-      description="Mark has been welcoming guests to The Coffee Brewer with warmth, great conversation, and an even better cup of coffee. Originally from Jordan, he brings a worldly perspective and a genuine love of hospitality to every visit. Whether you're stopping in for your morning espresso, a bowl of his famous homemade soup, or just a peaceful place to sit — Mark makes sure every guest feels at home. Come in and say hello. You'll be glad you did."
+            tag="About the Founder"
-      tag="Owner, coffee lover, and your host"
+            imageSrc="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800"
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-beautiful-joyful-african-student-woman-with-dark-wavy-hair-green-cardigan-sitting-cafe-drinking-cup-coffee-smiling-camera-woman-waiting-her-boyfriend-after-university_176420-12329.jpg?_wi=2"
+            useInvertedBackground={true}
-    />
+          />
-  </div>
+        </div>
 
-  <div id="reviews" data-section="reviews">
+        <div id="reviews" data-section="reviews">
-      <TestimonialCardSix
+          <TestimonialCardSix
-      animationType="slide-up"
+            title="Trusted by Cleveland Pros"
-      textboxLayout="default"
+            description="See what local contractors have to say."
-      useInvertedBackground={false}
+            animationType="slide-up"
-      testimonials={[
+            useInvertedBackground={false}
-        {
+            testimonials={[
-          id: "r1",
+              { id: "1", name: "Mike D.", handle: "Roofing Contractor", testimonial: "Best service in town. Jim is a legend.", icon: ShieldCheck },
-          name: "Manoj J.",
+              { id: "2", name: "Sarah W.", handle: "Builder", testimonial: "Reliable inventory and fair prices.", icon: ShieldCheck }
-          handle: "Regular Guest",
+            ]}
-          testimonial: "Mark the owner is always helpful and fun to chat with. I always visit for espresso, coffee, or some small snacks. I love his fresh meat soups.",
+            textboxLayout="default"
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-barista-girl_23-2148436110.jpg",
+          />
-        },
+        </div>
-        {
-          id: "r2",
-          name: "Anthony M.",
-          handle: "Coffee Lover",
-          testimonial: "Mark is always friendly and customer service oriented. His coffee has a great kick to it and fairly priced.",
-          imageSrc: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg",
-        },
-        {
-          id: "r3",
-          name: "Jenna M.",
-          handle: "Fan of Lattes",
-          testimonial: "Great customer service! I had an iced caramel latte with almond milk and whipped cream. Sooo good! Love the ambiance. 10/10.",
-          imageSrc: "http://img.b2bpic.net/free-photo/dreamy-beautiful-woman-student-sitting-cafe-with-books-magazines-smiling-holding-phone-thinking_176420-12422.jpg",
-        },
-        {
-          id: "r4",
-          name: "Carolyn L.",
-          handle: "Soup Fanatic",
-          testimonial: "Hands down the best soups in town! All homemade, so good! Served by the nicest man ever! Great sandwiches too!",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-asian-adult-female-woman-wear-apron-standing-entrance-her-workshop-pottery-studio-incasual-cloth-relax-smiling-confident-warm-welcomeasian-woman-with-her-home-studio-workshop_609648-2692.jpg",
-        },
-        {
-          id: "r5",
-          name: "NiNi D.",
-          handle: "First Timer",
-          testimonial: "The gentleman was VERY friendly and fast preparing our order. I love the aesthetic — very cozy, peaceful, and it has some cool things to look at.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cake-hot-beverage_23-2149271443.jpg?_wi=3",
-        },
-      ]}
-      title="What people are saying"
-      description="Genuine feedback from our wonderful community."
-    />
-  </div>
 
-  <div id="visit" data-section="visit">
+        <div id="visit" data-section="visit">
-      <ContactSplitForm
+          <ContactSplitForm
-      useInvertedBackground={false}
+            title="Get in touch with Jim"
-      title="Come in and stay a while"
+            description="14602 Velour Ave, Cleveland, OH 44110"
-      description="29001 Cedar Rd Suite 202, Lyndhurst, OH 44124 | (330) 906-1424"
+            inputs={[{ name: "name", type: "text", placeholder: "Company Name" }, { name: "email", type: "email", placeholder: "Email Address" }]}
-      inputs={[
+            buttonText="Send Quote Request"
-        {
+            useInvertedBackground={true}
-          name: "name",
+          />
-          type: "text",
+        </div>
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-        },
-      ]}
-      buttonText="Get Directions"
-      imageSrc="http://img.b2bpic.net/free-photo/top-view-cake-hot-beverage_23-2149271443.jpg?_wi=4"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+          <FooterLogoEmphasis
-      columns={[
+            logoText="State Supply Co Inc"
-        {
+            columns={[
-          items: [
+              { items: [{ label: "14602 Velour Ave, Cleveland" }, { label: "Questions? Call today" }] }
-            {
+            ]}
-              label: "29001 Cedar Rd Suite 202, Lyndhurst, OH 44124",
+          />
-              href: "#",
+        </div>
-            },
-            {
-              label: "(330) 906-1424",
-              href: "tel:3309061424",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Menu",
-              href: "#menu",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Reviews",
-              href: "#reviews",
-            },
-            {
-              label: "Visit Us",
-              href: "#visit",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Accepted: Credit, Debit & Mobile",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="The Coffee Brewer"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f6f0e9;
+  --background: #1C1C1C;
-  --card: #efe7dd;
+  --card: #262626;
-  --foreground: #2b180a;
+  --foreground: #FFFFFF;
-  --primary-cta: #2c1a0e;
+  --primary-cta: #8B2A2A;
   --primary-cta-text: #f5ecd7;
-  --secondary-cta: #f5ecd7;
+  --secondary-cta: #404040;
   --secondary-cta-text: #2c1a0e;
-  --accent: #c9a84c;
+  --accent: #8B2A2A;
-  --background-accent: #efe7dd;
+  --background-accent: #262626;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);