Switch to version 2: modified src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,305 +2,124 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
+        borderRadius="soft"
-        contentWidth="smallMedium"
+        contentWidth="medium"
-        sizing="mediumLargeSizeMediumTitles"
+        sizing="largeSizeMediumTitles"
-        background="noiseDiagonalGradient"
+        background="noise"
-        cardStyle="inset"
+        cardStyle="outline"
-        primaryButtonStyle="radial-glow"
+        primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
-        headingFontWeight="light"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Services", id: "#services" },
-          name: "Services",
+        { name: "About", id: "#about" },
-          id: "#services",
+        { name: "Reviews", id: "#reviews" },
-        },
+        { name: "FAQ", id: "#faq" },
-        {
+        { name: "Contact", id: "#contact" },
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Reviews",
-          id: "#reviews",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
       ]}
       brandName="Nick's Repair"
-      button={{
-        text: "(605) 432-4317",
-        href: "tel:6054324317",
-      }}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplit
+      <HeroLogoBillboardSplit
-      background={{
+      logoText="NICK'S REPAIR"
-        variant: "gradient-bars",
+      description="Professional small engine expertise, locally owned and trusted in Milbank for over 20 years. Free estimates on all repairs."
-      }}
+      buttons={[{ text: "Get a Quote", href: "#contact" }, { text: "Our Services", href: "#services" }]}
-      title="Expert Repair for the Engines You Rely On."
+      layoutOrder="default"
-      description="5.0 Stars on Google · Locally Owned · 20+ Years Experience · Free Estimates"
+      background={{ variant: "gradient-bars" }}
-      buttons={[
-        {
-          text: "Call Nick Now — (605) 432-4317",
-          href: "tel:6054324317",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545652.jpg"
-      imageAlt="Expert small engine repair workshop"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/pov-client-advertises-organic-farming_482257-80727.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-with-coffee-cup_23-2149442257.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/pretty-young-woman-enjoying-coffee-cup_23-2148756348.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/positive-customer-approving-new-offer_1262-17151.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545652.jpg",
-          alt: "Customer",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Locally Owned & Operated",
-        },
-        {
-          type: "text",
-          text: "Over 20 Years Experience",
-        },
-        {
-          type: "text",
-          text: "Certified Engine Technician",
-        },
-        {
-          type: "text",
-          text: "Fast Turnaround Times",
-        },
-        {
-          type: "text",
-          text: "Quality Guaranteed",
-        },
-      ]}
     />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardEight
+      <FeatureCardNineteen
+      title="Engine Services"
+      description="We specialize in reviving equipment with precision and reliability."
       textboxLayout="split"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       features={[
-        {
+        { id: 1, tag: "Lawn", title: "Lawn & Garden", subtitle: "Complete care", description: "Mowers, trimmers, and riding equipment maintenance.", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-working-car_52683-112916.jpg" },
-          id: 1,
+        { id: 2, tag: "Power", title: "Outdoor Tools", subtitle: "Tune-ups", description: "Professional chainsaw and heavy power equipment tuning.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-gardener-holding-trimmer-yard_342744-539.jpg" },
-          title: "Lawn & Garden",
+        { id: 3, tag: "Units", title: "Power Units", subtitle: "Restoration", description: "Complete generator maintenance and engine repair.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-service_23-2150171258.jpg" }
-          description: "Expert care for mowers, trimmers, and riding equipment.",
-          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-working-car_52683-112916.jpg",
-          imageAlt: "Lawn mower repair",
-        },
-        {
-          id: 2,
-          title: "Outdoor Tools",
-          description: "Professional chainsaw and power equipment tuning.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-gardener-holding-trimmer-yard_342744-539.jpg",
-          imageAlt: "Chainsaw repair",
-        },
-        {
-          id: 3,
-          title: "Power Units",
-          description: "Complete generator maintenance and repair.",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-service_23-2150171258.jpg",
-          imageAlt: "Generator repair",
-        },
       ]}
-      title="Comprehensive Repair Services"
-      description="We treat every engine like it's our own. No shortcuts, no compromises."
     />
   </div>
 
   <div id="about" data-section="about">
-      <MediaAbout
+      <TextSplitAbout
+      title="Our Philosophy"
+      description={["We believe in the old-fashioned way of doing business: if it's broken, we fix it right.", "We don't just patch up engines—we restore performance and longevity, ensuring your equipment lasts for the long haul."]}
       useInvertedBackground={false}
-      title="Nick's Philosophy"
-      description="Born and raised in Milbank, Nick believes in the old-fashioned way of doing business. If it's broken, we fix it right. We don't just patch up engines—we restore performance and longevity, ensuring your equipment lasts for the long haul."
-      imageSrc="http://img.b2bpic.net/free-photo/set-work-tools-toolbox_1170-1493.jpg?_wi=1"
-      imageAlt="Nick at work"
     />
   </div>
 
   <div id="reviews" data-section="reviews">
-      <TestimonialCardOne
+      <TestimonialCardSix
-      animationType="slide-up"
+      title="What Our Neighbors Say"
+      description="Trusted by the Milbank community for years."
       textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
+      animationType="blur-reveal"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "1", name: "Anthony Hillman", handle: "@localguide", testimonial: "Expert service, very professional.", imageSrc: "http://img.b2bpic.net/free-photo/pov-client-advertises-organic-farming_482257-80727.jpg" },
-          id: "1",
+        { id: "2", name: "Tim Wendland", handle: "@customer", testimonial: "Nick fixed my mower in record time.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-with-coffee-cup_23-2149442257.jpg" }
-          name: "Anthony Hillman",
-          role: "Local Guide",
-          company: "29 reviews",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pov-client-advertises-organic-farming_482257-80727.jpg?_wi=1",
-        },
-        {
-          id: "2",
-          name: "Tim Wendland",
-          role: "Customer",
-          company: "5 reviews",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-with-coffee-cup_23-2149442257.jpg",
-        },
-        {
-          id: "3",
-          name: "Tim Tyler",
-          role: "Customer",
-          company: "2 reviews",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-enjoying-coffee-cup_23-2148756348.jpg",
-        },
-        {
-          id: "4",
-          name: "Kelldog",
-          role: "Local Guide",
-          company: "26 reviews",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/positive-customer-approving-new-offer_1262-17151.jpg",
-        },
-        {
-          id: "5",
-          name: "Sarah J.",
-          role: "Customer",
-          company: "12 reviews",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pov-client-advertises-organic-farming_482257-80727.jpg?_wi=2",
-        },
       ]}
-      title="Trusted by Milbank Neighbors"
-      description="5.0 / 5 Stars based on 6 reviews."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
+      <FaqSplitText
-      textboxLayout="split"
+      sideTitle="Need Answers?"
+      sideDescription="Common questions about our repair process."
+      faqsAnimation="slide-up"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "1", title: "Do you offer pick-up?", content: "Yes, we can arrange local pick-up in Milbank." },
-          id: "faq-1",
+        { id: "2", title: "Free estimates?", content: "Absolutely, bring your machine by for an assessment." }
-          title: "Do you offer pick-up?",
-          content: "Yes, we can arrange local pick-up in Milbank if needed.",
-        },
-        {
-          id: "faq-2",
-          title: "What equipment do you service?",
-          content: "We handle mowers, generators, chainsaws, trimmers, and more.",
-        },
-        {
-          id: "faq-3",
-          title: "Do you offer free estimates?",
-          content: "Absolutely. Bring your machine by for a professional assessment.",
-        },
       ]}
-      title="Frequently Asked Questions"
-      description="Got questions about your engine? We have answers."
-      faqsAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/set-work-tools-toolbox_1170-1493.jpg?_wi=2"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCenter
+      tag="Contact"
+      title="Get Your Equipment Ready"
+      description="Visit us in Milbank or call 605-432-4317."
+      background={{ variant: "gradient-bars" }}
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      text="Visit us at 521 Friendship Cir, Milbank SD 57252 or call 605-432-4317 to get started today."
-      buttons={[
-        {
-          text: "Call Now",
-          href: "tel:6054324317",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterSimple
       columns={[
-        {
+        { title: "Navigation", items: [{ label: "Services", href: "#services" }, { label: "About", href: "#about" }] },
-          items: [
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Reviews",
-              href: "#reviews",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Google Maps",
-              href: "https://maps.google.com",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
       ]}
-      logoText="NICK'S REPAIR"
+      bottomLeftText="© 2024 Nick's Repair"
+      bottomRightText="Milbank, SD"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-manrope), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f0e8;
+  --background: #ffffff;
-  --card: #fdfaf5;
+  --card: #f9f9f9;
-  --foreground: #1a1208;
+  --foreground: #000612e6;
-  --primary-cta: #c8a84b;
+  --primary-cta: #15479c;
-  --primary-cta-text: #1a1208;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #1a1208;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #f5f0e8;
+  --secondary-cta-text: #000612e6;
-  --accent: #8b3a1e;
+  --accent: #e2e2e2;
-  --background-accent: #efe8dd;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);