Update src/app/styles/variables.css

src/app/about/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+
+export default function AboutPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "/services" },
+    { name: "Portfolio", id: "/portfolio" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div id="about-hero" data-section="about-hero" className="py-12 md:py-20 lg:py-24">
+        <HeroOverlay
+          title="About Us"
+          description="Learn more about our mission, values, and the team behind our success."
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
+          imageSrc="https://images.unsplash.com/photo-1552588102-167814c407d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          imageAlt="About us background image"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/case-studies/page.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import { Sparkles } from 'lucide-react';
+
+export default function CaseStudiesPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "/services" },
+    { name: "Portfolio", id: "/portfolio" },
+    { name: "Case Studies", id: "/case-studies" },
+    { name: "Contact", id: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div id="case-study" data-section="case-study" className="py-12 md:py-20 lg:py-24">
+        <MetricSplitMediaAbout
+          tag="Case Study Highlight"
+          tagIcon={Sparkles}
+          title="Revolutionizing E-commerce for a Leading Retailer"
+          description="We partnered with a major retail client to completely overhaul their online shopping experience, focusing on performance, user engagement, and conversion optimization. Our solution integrated advanced AI-driven recommendations and a streamlined checkout process, leading to significant business growth."
+          metrics={[
+            { value: '30%', title: 'Increase in Conversion Rate' },
+            { value: '25%', title: 'Reduction in Bounce Rate' }
+          ]}
+          imageSrc="https://placehold.co/800x600/png?text=Case+Study+Image"
+          imageAlt="E-commerce platform interface showing product listings and shopping cart"
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -1,105 +1,51 @@
-"use client";
-
+'use client';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import Link from "next/link";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "Services", id: "/services" },
-    { name: "Projects", id: "/projects" },
+    { name: "Home", id: "/" },
     { name: "About", id: "/about" },
-    { name: "Contact", id: "/contact" },
-  ];
-  const navButton = { text: "Get Free Estimate", href: "/contact" };
-
-  const contactImageSrc = "https://pixabay.com/get/g72a24bc90d1df3c0df13f2608f4cd7669818a1b7622e34625712d914ead7f7c9019d57d38b5d0f426da175ba1df9b03d96036ed26552bf217b60b9c8a2f7dbe3_1280.jpg";
-
-  const footerColumns = [
-    {
-      title: "Services",      items: [
-        { label: "Roofing", href: "/services" },
-        { label: "Masonry & Concrete", href: "/services" },
-        { label: "Chimneys", href: "/services" },
-        { label: "Gutters & Drainage", href: "/services" },
-        { label: "Waterproofing", href: "/services" },
-      ],
-    },
-    {
-      title: "Company",      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Projects", href: "/projects" },
-        { label: "Testimonials", href: "/testimonials" },
-        { label: "Why Choose Us", href: "/features" },
-      ],
-    },
-    {
-      title: "Contact",      items: [
-        { label: "Get an Estimate", href: "/contact" },
-        { label: "Call Us Now", href: "tel:+15551234567" },
-        { label: "Service Area", href: "/" },
-      ],
-    },
-    {
-      title: "Legal",      items: [
-        { label: "Privacy Policy", href: "/" },
-        { label: "Terms of Service", href: "/" },
-      ],
-    },
+    { name: "Services", id: "/services" },
+    { name: "Portfolio", id: "/portfolio" },
+    { name: "Case Studies", id: "/case-studies" },
+    { name: "Contact", id: "/contact" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="expand-hover"
-      defaultTextAnimation="entrance-slide"
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
       borderRadius="soft"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="floatingGradient"
-      cardStyle="inset"
+      cardStyle="glass-depth"
       primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="layered"
-      headingFontWeight="light"
+      secondaryButtonStyle="solid"
+      contentWidth="medium"
+      sizing="medium"
+      background="aurora"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
-          brandName="Grand NJ Construction"
-          navItems={navItems}
-          button={navButton}
-        />
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
       </div>
-
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" className="py-12 md:py-20 lg:py-24">
         <ContactSplitForm
-          title="Get Your Free Estimate Today"
-          description="Don’t Wait Until a Small Problem Becomes a Big One. Roof leaks, cracked steps, and chimney issues only get worse—and more expensive. Fill out the form below or call us for a fast response. Limited availability—most projects booked within days."
+          title="Get in Touch"
+          description="We're here to help! Send us a message and we'll get back to you as soon as possible."
           inputs={[
-            { name: "name", type: "text", placeholder: "Your Name", required: true },
-            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
-            { name: "address", type: "text", placeholder: "Project Address (NJ)", required: true },
-            { name: "project_type", type: "text", placeholder: "Project Type (e.g., Roofing, Masonry)", required: false },
+            { name: 'name', type: 'text', placeholder: 'Your Name', required: true },
+            { name: 'email', type: 'email', placeholder: 'Your Email', required: true }
           ]}
-          textarea={{ name: "message", placeholder: "Tell us about your project...", rows: 5, required: false }}
-          useInvertedBackground={false}
-          imageSrc={contactImageSrc}
-          imageAlt="Grand NJ Construction team discussing plans with a client"
-          mediaAnimation="opacity"
+          textarea={{ name: 'message', placeholder: 'Your Message', rows: 5, required: true }}
+          imageSrc="/placeholders/placeholder-16-9.svg"
+          imageAlt="Contact Us"
           mediaPosition="right"
-          buttonText="Request Estimate"
-          ariaLabel="Contact form for free estimates"
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={footerColumns}
-          bottomLeftText="© 2024 Grand NJ Construction. All rights reserved. Fully Insured."
-          bottomRightText="Built for Grand NJ Construction"
-          ariaLabel="Site footer"
+          buttonText="Send Message"
+          onSubmit={(data) => console.log('Contact form submitted:', data)}
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -1,5 +1,61 @@
-import { redirect } from 'next/navigation';
+'use client';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import { Sparkles } from 'lucide-react';
 
-export default function Home() {
-  redirect('/components');
+export default function HomePage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "/services" },
+    { name: "Portfolio", id: "/portfolio" },
+    { name: "Case Studies", id: "/case-studies" },
+    { name: "Contact", id: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      contentWidth="medium"
+      sizing="medium"
+      background="aurora"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div id="home" data-section="home" className="py-12 md:py-20 lg:py-24">
+        <HeroSplitDoubleCarousel
+          background={{ variant: 'glowing-orb' }}
+          tag="Welcome"
+          tagIcon={Sparkles}
+          title="Crafting Digital Experiences"
+          description="We specialize in building cutting-edge web applications and delightful user interfaces."
+          carouselPosition="right"
+          leftCarouselItems={[
+            { imageSrc: '/placeholder1.jpg', imageAlt: 'Web design concept' },
+            { imageSrc: '/placeholder2.jpg', imageAlt: 'Mobile app UI' },
+            { imageSrc: '/placeholder3.jpg', imageAlt: 'Data visualization dashboard' },
+            { imageSrc: '/placeholder4.jpg', imageAlt: 'Cloud infrastructure' }
+          ]}
+          rightCarouselItems={[
+            { imageSrc: '/placeholder5.jpg', imageAlt: 'Responsive website' },
+            { imageSrc: '/placeholder6.jpg', imageAlt: 'Creative agency workspace' },
+            { imageSrc: '/placeholder7.jpg', imageAlt: 'Digital marketing strategy' },
+            { imageSrc: '/placeholder8.jpg', imageAlt: 'E-commerce solutions' }
+          ]}
+          buttons={[
+            { text: 'View Services', href: '/services' },
+            { text: 'Our Work', href: '/portfolio' }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
 }

src/app/portfolio/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+
+export default function PortfolioPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "/services" },
+    { name: "Portfolio", id: "/portfolio" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div id="portfolio-hero" data-section="portfolio-hero" className="py-12 md:py-20 lg:py-24">
+        <HeroOverlay
+          title="Our Portfolio"
+          description="Explore our latest projects and see how we bring ideas to life."
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
+          imageSrc="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          imageAlt="Portfolio background image"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+
+export default function ServicesPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Services", id: "/services" },
+    { name: "Portfolio", id: "/portfolio" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div id="services-hero" data-section="services-hero" className="py-12 md:py-20 lg:py-24">
+        <HeroOverlay
+          title="Our Services"
+          description="We offer a comprehensive suite of digital services to help your business thrive."
+          textPosition="center"
+          showBlur={true}
+          showDimOverlay={false}
+          imageSrc="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          imageAlt="Services background image"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0F0F0F;
-  --card: #2A2A2A;
-  --foreground: #F8F8F8;
-  --primary-cta: #C9A14A;
-  --primary-cta-text: #0F0F0F;
-  --secondary-cta: #F8F8F8;
-  --secondary-cta-text: #0F0F0F;
-  --accent: #C9A14A;
-  --background-accent: #C9A14A;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/testimonials/page.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+
+export default function TestimonialsPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Contact', id: '/contact' },
+    { name: 'Testimonials', id: '/testimonials' }
+  ];
+
+  // Placeholder images for testimonials
+  const testimonialImages = [
+    'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1507003211169-e69fe254be2c?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=2788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+  ];
+
+  const testimonialsData = [
+    { id: '1', name: 'Alice Smith', imageSrc: testimonialImages[0], imageAlt: 'Alice Smith, CEO of InnovateCorp' },
+    { id: '2', name: 'Bob Johnson', imageSrc: testimonialImages[1], imageAlt: 'Bob Johnson, Lead Developer at TechSolutions' },
+    { id: '3', name: 'Charlie Brown', imageSrc: testimonialImages[2], imageAlt: 'Charlie Brown, Marketing Director at GrowthCo' },
+    { id: '4', name: 'Diana Prince', imageSrc: testimonialImages[3], imageAlt: 'Diana Prince, Founder of FutureLabs' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardTwelve
+          testimonials={testimonialsData}
+          cardTitle="Hear What Our Clients Say"
+          cardTag="Client Reviews"
+          useInvertedBackground={false}
+          cardAnimation="slide-up"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}