Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -14,36 +14,21 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="medium"
         sizing="mediumLargeSizeLargeTitles"
-        background="floatingGradient"
-        cardStyle="outline"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="glass"
+        background="noise"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
         headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Portfolio",
-          id: "/portfolio",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Portfolio", id: "/portfolio" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="LocalWeb Studio"
     />
@@ -51,21 +36,19 @@ export default function LandingPage() {
 
   <div id="about-page" data-section="about-page">
       <TextSplitAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Helping You Grow Online"
       description={[
-        "I started LocalWeb Studio because I saw too many great local businesses missing out on customers because they didn't have an online presence. My goal is simple: to make professional web design easy, affordable, and accessible for everyone.",
-      ]}
+        "I started LocalWeb Studio because I saw too many great local businesses missing out on customers because they didn't have an online presence. My goal is simple: to make professional web design easy, affordable, and accessible for everyone."]}
     />
   </div>
 
   <div id="about-mission" data-section="about-mission">
       <TextSplitAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="My Values"
       description={[
-        "Reliable service, clear communication, and business results are at the heart of everything I do. I am focused on outcomes, not just design, helping you turn visitors into loyal customers.",
-      ]}
+        "Reliable service, clear communication, and business results are at the heart of everything I do. I am focused on outcomes, not just design, helping you turn visitors into loyal customers."]}
     />
   </div>
 
@@ -73,28 +56,12 @@ export default function LandingPage() {
       <FooterSimple
       columns={[
         {
-          title: "Links",
-          items: [
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Portfolio",
-              href: "/portfolio",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
+          title: "Links",          items: [
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Services", href: "/services" },
+            { label: "Portfolio", href: "/portfolio" },
+            { label: "Contact", href: "/contact" },
           ],
         },
       ]}
@@ -105,4 +72,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -15,36 +15,21 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="medium"
         sizing="mediumLargeSizeLargeTitles"
-        background="floatingGradient"
-        cardStyle="outline"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="glass"
+        background="noise"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
         headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Portfolio",
-          id: "/portfolio",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Portfolio", id: "/portfolio" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="LocalWeb Studio"
     />
@@ -52,36 +37,21 @@ export default function LandingPage() {
 
   <div id="contact-form" data-section="contact-form">
       <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      useInvertedBackground={true}
+      background={{ variant: "radial-gradient" }}
       text="Let’s build your website. No pressure, just a quick conversation about your business needs. Reach out and let's get you online today."
-      buttons={[
-        {
-          text: "Contact Now",
-          href: "#",
-        },
-      ]}
+      buttons={[{ text: "Contact Now", href: "#" }]}
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitText
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       sideTitle="Questions Before We Chat?"
       faqsAnimation="slide-up"
       faqs={[
-        {
-          id: "c1",
-          title: "How do payments work?",
-          content: "We require a 50% deposit to start and 50% on completion.",
-        },
-        {
-          id: "c2",
-          title: "What if I have an existing site?",
-          content: "We can help you redesign it or migrate your existing data.",
-        },
+        { id: "c1", title: "How do payments work?", content: "We require a 50% deposit to start and 50% on completion." },
+        { id: "c2", title: "What if I have an existing site?", content: "We can help you redesign it or migrate your existing data." },
       ]}
     />
   </div>
@@ -90,28 +60,12 @@ export default function LandingPage() {
       <FooterSimple
       columns={[
         {
-          title: "Links",
-          items: [
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Portfolio",
-              href: "/portfolio",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
+          title: "Links",          items: [
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Services", href: "/services" },
+            { label: "Portfolio", href: "/portfolio" },
+            { label: "Contact", href: "/contact" },
           ],
         },
       ]}
@@ -122,4 +76,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -18,10 +18,10 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="medium"
         sizing="mediumLargeSizeLargeTitles"
-        background="floatingGradient"
-        cardStyle="outline"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="glass"
+        background="noise"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
         headingFontWeight="medium"
     >
       <ReactLenis root>
@@ -41,9 +41,10 @@ export default function LandingPage() {
   <div id="hero-home" data-section="hero-home">
       <HeroLogo
       logoText="Helping Local Businesses Get Online Fast"
-      description="Affordable, professional websites built for real results. We help local businesses get more customers with clean, fast, and mobile-friendly websites."
+      description="Minimal, professional websites built for real results. Clean, fast, mobile-friendly designs that convert."
       buttons={[{ text: "Request a Free Quote", href: "/contact" }]}
-      imageSrc="http://img.b2bpic.net/free-photo/desktop-with-computer_23-2148110247.jpg?_wi=1"
+      imageSrc="http://img.b2bpic.net/free-photo/minimal-abstract-dark-background_1253-1258.jpg?_wi=1"
+      showDimOverlay={true}
     />
   </div>
 
@@ -51,31 +52,22 @@ export default function LandingPage() {
       <FeatureCardNine
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       features={[
-        {
-          title: "Mobile-Friendly",          description: "Every site looks great on every phone and device.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-food-breakfast-wooden-table_53876-16232.jpg?_wi=1", imageAlt: "mockup" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/specialist-discussing-x-ray-imaging-with-patient-isolated-mockup-display_482257-123955.jpg?_wi=1", imageAlt: "mockup" }
-        },
-        {
-          title: "Fast Delivery",          description: "Get your professional site live in weeks, not months.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg?_wi=1", imageAlt: "mockup" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-food-breakfast-wooden-table_53876-16232.jpg?_wi=2", imageAlt: "mockup" }
-        },
-        {
-          title: "Affordable Pricing",          description: "Professional results that fit your small business budget.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/specialist-discussing-x-ray-imaging-with-patient-isolated-mockup-display_482257-123955.jpg?_wi=2", imageAlt: "mockup" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg?_wi=2", imageAlt: "mockup" }
-        }
+        { title: "Mobile-Friendly", description: "Every site looks great on every phone and device.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=1" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=2" } },
+        { title: "Fast Delivery", description: "Get your professional site live in weeks, not months.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=3" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=4" } },
+        { title: "Affordable Pricing", description: "Professional results that fit your small business budget.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=5" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=6" } }
       ]}
       showStepNumbers={true}
-      title="Why Work With Us"
-      description="We build websites that actually help your business grow."
+      title="Minimal Design, Maximum Results"
+      description="We strip away the noise to deliver high-converting experiences."
     />
   </div>
 
   <div id="socialProof" data-section="socialProof">
       <SocialProofOne
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Trusted by Local Heroes"
       description="Businesses just like yours rely on us to grow their digital presence."
       names={["The Coffee Cup", "Heights Dental", "City Repair Shop", "Metro Accounting", "Green Garden Landscaping"]}
@@ -84,7 +76,7 @@ export default function LandingPage() {
 
   <div id="faq" data-section="faq">
       <FaqSplitText
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       sideTitle="Frequently Asked Questions"
       sideDescription="Clear answers to your most common questions."
       faqsAnimation="slide-up"
@@ -92,16 +84,14 @@ export default function LandingPage() {
         { id: "f1", title: "How long does a build take?", content: "Most projects are completed within 2 to 4 weeks." },
         { id: "f2", title: "Do I need to host it myself?", content: "We provide hosting packages so you don't have to worry about the technical side." },
         { id: "f3", title: "Will my site work on mobile?", content: "Absolutely, all our designs are fully responsive." },
-        { id: "f4", title: "Can I edit the content later?", content: "Yes, we build sites with easy-to-use CMS tools." },
-        { id: "f5", title: "What if I need support?", content: "Our maintenance plans cover ongoing support and updates." }
       ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCenter
-      useInvertedBackground={false}
-      background={{ variant: "plain" }}
+      useInvertedBackground={true}
+      background={{ variant: "radial-gradient" }}
       tag="Get in touch"
       title="Ready to get started?"
       description="Send us your email and we'll reach out to discuss your project."
@@ -119,4 +109,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/portfolio/page.tsx

@@ -15,36 +15,21 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="medium"
         sizing="mediumLargeSizeLargeTitles"
-        background="floatingGradient"
-        cardStyle="outline"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="glass"
+        background="noise"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
         headingFontWeight="medium"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Portfolio",
-          id: "/portfolio",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Portfolio", id: "/portfolio" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="LocalWeb Studio"
     />
@@ -55,44 +40,11 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       products={[
-        {
-          id: "p1",
-          name: "Local Restaurant",
-          price: "Featured",
-          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-food-breakfast-wooden-table_53876-16232.jpg?_wi=7",
-        },
-        {
-          id: "p2",
-          name: "Medical Clinic",
-          price: "Featured",
-          imageSrc: "http://img.b2bpic.net/free-photo/specialist-discussing-x-ray-imaging-with-patient-isolated-mockup-display_482257-123955.jpg?_wi=7",
-        },
-        {
-          id: "p3",
-          name: "Service Business",
-          price: "Featured",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg?_wi=6",
-        },
-        {
-          id: "p4",
-          name: "Local Barbershop",
-          price: "Demo",
-          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-food-breakfast-wooden-table_53876-16232.jpg?_wi=8",
-        },
-        {
-          id: "p5",
-          name: "Small Clinic Site",
-          price: "Demo",
-          imageSrc: "http://img.b2bpic.net/free-photo/specialist-discussing-x-ray-imaging-with-patient-isolated-mockup-display_482257-123955.jpg?_wi=8",
-        },
-        {
-          id: "p6",
-          name: "Contractor Site",
-          price: "Demo",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg?_wi=7",
-        },
+        { id: "p1", name: "Local Restaurant", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=1" },
+        { id: "p2", name: "Medical Clinic", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=2" },
+        { id: "p3", name: "Service Business", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=3" },
       ]}
       title="Our Work"
       description="Showcasing local businesses we have helped get online."
@@ -102,16 +54,10 @@ export default function LandingPage() {
   <div id="socialProof" data-section="socialProof">
       <SocialProofOne
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Client Success Stories"
       description="We are proud to partner with these local business leaders."
-      names={[
-        "Downtown Pizza",
-        "Peak Fitness",
-        "River Bank Law",
-        "Breeze Cafe",
-        "Sun Solar",
-      ]}
+      names={["Downtown Pizza", "Peak Fitness", "River Bank Law", "Breeze Cafe", "Sun Solar"]}
     />
   </div>
 
@@ -119,28 +65,12 @@ export default function LandingPage() {
       <FooterSimple
       columns={[
         {
-          title: "Links",
-          items: [
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Portfolio",
-              href: "/portfolio",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
+          title: "Links",          items: [
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Services", href: "/services" },
+            { label: "Portfolio", href: "/portfolio" },
+            { label: "Contact", href: "/contact" },
           ],
         },
       ]}
@@ -151,4 +81,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -15,10 +15,10 @@ export default function ServicesPage() {
         borderRadius="rounded"
         contentWidth="medium"
         sizing="mediumLargeSizeLargeTitles"
-        background="floatingGradient"
-        cardStyle="outline"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="glass"
+        background="noise"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
         headingFontWeight="medium"
     >
       <ReactLenis root>
@@ -39,14 +39,13 @@ export default function ServicesPage() {
       <PricingCardNine
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       plans={[
-        { id: "basic", title: "Basic Website", price: "$500+", period: "once", features: ["3-5 pages", "Mobile-friendly design", "Contact form", "Basic SEO"], button: { text: "Get Started", href: "/contact" }, imageSrc: "http://img.b2bpic.net/free-photo/specialist-discussing-x-ray-imaging-with-patient-isolated-mockup-display_482257-123955.jpg?_wi=3", imageAlt: "mockup" },
-        { id: "ecommerce", title: "E-Commerce", price: "$1200+", period: "once", features: ["Full online store", "Booking system", "E-commerce setup", "Advanced SEO"], button: { text: "Contact for Quote", href: "/contact" }, imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg?_wi=3", imageAlt: "mockup" },
-        { id: "maintenance", title: "Maintenance", price: "$50", period: "/mo", features: ["Security updates", "Regular edits", "Performance monitoring", "Support"], button: { text: "Sign Up", href: "/contact" }, imageSrc: "http://img.b2bpic.net/free-photo/desktop-with-computer_23-2148110247.jpg?_wi=2", imageAlt: "mockup" }
+        { id: "basic", title: "Basic Website", price: "$500+", period: "once", features: ["3-5 pages", "Mobile-friendly design", "Contact form"], button: { text: "Get Started", href: "/contact" }, imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=7" },
+        { id: "ecommerce", title: "E-Commerce", price: "$1200+", period: "once", features: ["Online store", "Booking system"], button: { text: "Contact", href: "/contact" }, imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=8" },
       ]}
       title="Website Packages"
-      description="Affordable packages to get your business seen."
+      description="Affordable, high-impact solutions for your business."
     />
   </div>
 
@@ -54,24 +53,13 @@ export default function ServicesPage() {
       <FeatureCardNine
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       features={[
-        {
-          title: "SEO Optimization",          description: "Get found by more local customers on Google.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-food-breakfast-wooden-table_53876-16232.jpg?_wi=3", imageAlt: "mockup" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/specialist-discussing-x-ray-imaging-with-patient-isolated-mockup-display_482257-123955.jpg?_wi=4", imageAlt: "mockup" }
-        },
-        {
-          title: "Content Writing",          description: "Professional text that tells your business story.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg?_wi=4", imageAlt: "mockup" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-food-breakfast-wooden-table_53876-16232.jpg?_wi=4", imageAlt: "mockup" }
-        },
-        {
-          title: "Logo Design",          description: "Polished brand visuals to stand out from the crowd.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/specialist-discussing-x-ray-imaging-with-patient-isolated-mockup-display_482257-123955.jpg?_wi=5", imageAlt: "mockup" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg?_wi=5", imageAlt: "mockup" }
-        }
+        { title: "SEO", description: "Get found by local customers.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=1" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-pattern_1253-1258.jpg?_wi=2" } },
       ]}
       showStepNumbers={false}
-      title="Additional Services"
-      description="Tailored solutions for your specific business needs."
+      title="Tailored Solutions"
+      description="Beyond just design, we help you succeed."
     />
   </div>
 
@@ -85,4 +73,4 @@ export default function ServicesPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);