Merge version_2 into main

Merge version_2 into main

src/app/contact/page.tsx

@@ -2,12 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import ContactCTA from "@/components/sections/contact/ContactCTA";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterSimple from "@/components/sections/footer/FooterSimple";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 
-export default function LandingPage() {
+export default function ContactPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -22,109 +21,33 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
-        {
+            { name: "Home", id: "/" },
-          name: "Home",
+            { name: "Work", id: "/work" },
-          id: "/",
+            { name: "Services", id: "/services" },
-        },
+            { name: "Contact", id: "/contact" },
-        {
-          name: "Work",
-          id: "/work",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
           ]}
           brandName="KJ Web Studio"
         />
-  </div>
         
-  <div id="contact-page" data-section="contact-page">
+        <ContactCTA 
-      <ContactCenter
+          tag="Get In Touch"
+          title="Ready to start your project?"
+          description="We are here to help your local business grow. Let's discuss your goals and how we can achieve them."
+          buttons={[{ text: "Send Message" }]}
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contact"
-      title="Let's build your website."
-      description="Reach out to discuss your project. kjwebstudio@outlook.com"
-      buttonText="Send Message"
         />
-  </div>
 
-  <div id="blog" data-section="blog">
-      <BlogCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Agency Insights"
-      description="Stay updated with industry trends."
-      blogs={[
-        {
-          id: "b1",
-          category: "Design",
-          title: "Why Conversion Matters",
-          excerpt: "Learn how small changes impact user behavior.",
-          imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-blank-white-screen-turquoise-table-with-nearby-chair_23-2147924199.jpg",
-          authorName: "KJ Admin",
-          authorAvatar: "http://img.b2bpic.net/free-photo/ideas-creation-design-process-icon_53876-124499.jpg",
-          date: "2024-10-01",
-        },
-        {
-          id: "b2",
-          category: "Local SEO",
-          title: "Local SEO Tips",
-          excerpt: "How to get found in your city.",
-          imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg",
-          authorName: "KJ Admin",
-          authorAvatar: "http://img.b2bpic.net/free-photo/business-brainstorm-planning-work-ideas-concept_53876-120969.jpg",
-          date: "2024-09-20",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
         <FooterSimple
           columns={[
-        {
+            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
-          title: "Company",
+            { title: "Services", items: [{ label: "Design", href: "/services" }, { label: "Leads", href: "/services" }] },
-          items: [
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Design",
-              href: "/services",
-            },
-            {
-              label: "Leads",
-              href: "/services",
-            },
-          ],
-        },
           ]}
           bottomLeftText="© 2024 KJ Web Studio"
           bottomRightText="kjwebstudio@outlook.com"
         />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/page.tsx

@@ -29,22 +29,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",
+        { name: "Work", id: "/work" },
-          id: "/",
+        { name: "Services", id: "/services" },
-        },
+        { name: "Contact", id: "/contact" },
-        {
-          name: "Work",
-          id: "/work",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
       ]}
       brandName="KJ Web Studio"
     />
@@ -52,21 +40,10 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       logoText="KJ Web Studio"
       description="We design modern, high-converting websites for local businesses that want more calls, leads, and clients."
-      buttons={[
+      buttons={[{ text: "Request a Website", href: "/contact" }, { text: "View Work", href: "/work" }]}
-        {
-          text: "Request a Website",
-          href: "/contact",
-        },
-        {
-          text: "View Work",
-          href: "/work",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/apartment-diy-decoration-furnishing-interior_53876-120878.jpg"
       imageAlt="minimalist web agency hero"
       mediaAnimation="slide-up"
@@ -79,30 +56,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "1", value: "24h", title: "Fast Turnaround", items: ["Ready to launch fast"] },
-          id: "1",
+        { id: "2", value: "100%", title: "Mobile-First", items: ["Works on every device"] },
-          value: "24h",
+        { id: "3", value: "High", title: "Conversion", items: ["Optimized for calls"] },
-          title: "Fast Turnaround",
-          items: [
-            "Ready to launch fast",
-          ],
-        },
-        {
-          id: "2",
-          value: "100%",
-          title: "Mobile-First",
-          items: [
-            "Works on every device",
-          ],
-        },
-        {
-          id: "3",
-          value: "High",
-          title: "Conversion",
-          items: [
-            "Optimized for calls",
-          ],
-        },
       ]}
       title="Results-Driven"
       description="Websites built for real business impact."
@@ -115,21 +71,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
-        {
+        { icon: Layout, title: "Website Design", description: "Clean, modern websites built to convert." },
-          icon: Layout,
+        { icon: Smartphone, title: "Landing Pages", description: "High-performing pages for specific campaigns." },
-          title: "Website Design",
+        { icon: Mail, title: "Lead Gen", description: "Integrated forms and call systems." },
-          description: "Clean, modern websites built to convert.",
-        },
-        {
-          icon: Smartphone,
-          title: "Landing Pages",
-          description: "High-performing pages for specific campaigns.",
-        },
-        {
-          icon: Mail,
-          title: "Lead Gen",
-          description: "Integrated forms and call systems.",
-        },
       ]}
       title="Our Services"
       description="Everything you need to grow your local business."
@@ -143,60 +87,12 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "1", brand: "Contractor", name: "Contractor Web Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg" },
-          id: "1",
+        { id: "2", brand: "Barber", name: "Barber Shop Web Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg" },
-          brand: "Contractor",
+        { id: "3", brand: "Resto", name: "Restaurant Web Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836115.jpg" },
-          name: "Contractor Web Concept",
+        { id: "4", brand: "Clinic", name: "Clinic Web Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5885.jpg" },
-          price: "High Impact",
+        { id: "5", brand: "Lawyer", name: "Law Firm Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/top-view-builder-desk-with-tablet-mock-up_23-2148269846.jpg" },
-          rating: 5,
+        { id: "6", brand: "Gym", name: "Fitness Concept", price: "High Impact", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-applying-hairdresser-hairstylist-beauty-saloon_627829-4642.jpg" },
-          reviewCount: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg",
-        },
-        {
-          id: "2",
-          brand: "Barber",
-          name: "Barber Shop Web Concept",
-          price: "High Impact",
-          rating: 5,
-          reviewCount: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg",
-        },
-        {
-          id: "3",
-          brand: "Resto",
-          name: "Restaurant Web Concept",
-          price: "High Impact",
-          rating: 5,
-          reviewCount: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836115.jpg",
-        },
-        {
-          id: "4",
-          brand: "Clinic",
-          name: "Clinic Web Concept",
-          price: "High Impact",
-          rating: 5,
-          reviewCount: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5885.jpg",
-        },
-        {
-          id: "5",
-          brand: "Lawyer",
-          name: "Law Firm Concept",
-          price: "High Impact",
-          rating: 5,
-          reviewCount: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-builder-desk-with-tablet-mock-up_23-2148269846.jpg",
-        },
-        {
-          id: "6",
-          brand: "Gym",
-          name: "Fitness Concept",
-          price: "High Impact",
-          rating: 5,
-          reviewCount: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-applying-hairdresser-hairstylist-beauty-saloon_627829-4642.jpg",
-        },
       ]}
       title="Recent Work"
       description="Concepts designed for local growth."
@@ -208,44 +104,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       tag="Our Agency"
       title="We help local businesses dominate their digital presence."
-      buttons={[
+      buttons={[{ text: "Learn More", href: "/about" }]}
-        {
-          text: "Learn More",
-          href: "/about",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
+        { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
-          title: "Company",
+        { title: "Services", items: [{ label: "Design", href: "/services" }, { label: "Leads", href: "/services" }] },
-          items: [
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Design",
-              href: "/services",
-            },
-            {
-              label: "Leads",
-              href: "/services",
-            },
-          ],
-        },
       ]}
       bottomLeftText="© 2024 KJ Web Studio"
       bottomRightText="kjwebstudio@outlook.com"

src/app/services/page.tsx

@@ -2,13 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import { Code, MessageSquare, Phone, Rocket } from "lucide-react";
+import { Layout, Smartphone, Mail, Globe, Zap, Palette } from "lucide-react";
 
-export default function LandingPage() {
+export default function ServicesPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -26,77 +25,46 @@ export default function LandingPage() {
         <div id="nav" data-section="nav">
             <NavbarStyleFullscreen
               navItems={[
-        {
+                { name: "Home", id: "/" },
-          name: "Home",
+                { name: "Work", id: "/work" },
-          id: "/",
+                { name: "Services", id: "/services" },
-        },
+                { name: "Contact", id: "/contact" },
-        {
-          name: "Work",
-          id: "/work",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
               ]}
               brandName="KJ Web Studio"
             />
         </div>
 
-  <div id="services-page" data-section="services-page">
+        <div id="features" data-section="features">
-      <FeatureHoverPattern
+            <FeatureCardTwentySix
-      animationType="slide-up"
+              title="Our Premium Digital Services"
-      textboxLayout="default"
+              description="We build high-performance digital infrastructure designed to convert visitors into loyal, paying customers for your local business."
-      useInvertedBackground={true}
-      features={[
-        {
-          icon: Code,
-          title: "Website Design",
-          description: "Professional business websites.",
-        },
-        {
-          icon: Rocket,
-          title: "Landing Pages",
-          description: "High-conversion landing pages.",
-        },
-        {
-          icon: Phone,
-          title: "Lead Systems",
-          description: "Call-generating inquiry systems.",
-        },
-        {
-          icon: MessageSquare,
-          title: "AI Chat",
-          description: "Automated engagement bots.",
-        },
-      ]}
-      title="Our Services"
-      description="We specialize in high-converting web solutions."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqDouble
               textboxLayout="default"
               useInvertedBackground={false}
-      title="Common Questions"
+              features={[
-      description="Find out how we work."
-      faqsAnimation="slide-up"
-      faqs={[
                 {
-          id: "f1",
+                  title: "Custom Web Design",                  description: "Hand-crafted, professional website layouts tailored to your brand identity and industry standards.",                  buttonIcon: Palette,
-          title: "How long does a site take?",
+                  imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg"
-          content: "Most projects are completed within 7-10 business days.",
                 },
                 {
-          id: "f2",
+                  title: "Mobile-First Development",                  description: "Fully responsive design that guarantees seamless functionality and stunning visuals across all mobile devices.",                  buttonIcon: Smartphone,
-          title: "What platforms do you use?",
+                  imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg"
-          content: "We use modern, fast, and SEO-optimized web tech.",
                 },
+                {
+                  title: "Lead Generation Systems",                  description: "Strategic integration of high-converting contact forms, click-to-call buttons, and automated capture systems.",                  buttonIcon: Mail,
+                  imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836115.jpg"
+                },
+                {
+                  title: "Search Engine Optimization",                  description: "Core technical SEO implementation to improve your local search visibility and attract more nearby traffic.",                  buttonIcon: Globe,
+                  imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5885.jpg"
+                },
+                {
+                  title: "High-Speed Hosting",                  description: "Lightning-fast load times that keep visitors engaged and improve your site's performance and ranking.",                  buttonIcon: Zap,
+                  imageSrc: "http://img.b2bpic.net/free-photo/top-view-builder-desk-with-tablet-mock-up_23-2148269846.jpg"
+                },
+                {
+                  title: "Content Management",                  description: "User-friendly administration interfaces so you can easily update your services, offers, and contact information.",                  buttonIcon: Layout,
+                  imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-applying-hairdresser-hairstylist-beauty-saloon_627829-4642.jpg"
+                }
               ]}
             />
         </div>
@@ -104,32 +72,8 @@ export default function LandingPage() {
         <div id="footer" data-section="footer">
             <FooterSimple
               columns={[
-        {
+                { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
-          title: "Company",
+                { title: "Services", items: [{ label: "Design", href: "/services" }, { label: "Leads", href: "/services" }] },
-          items: [
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Design",
-              href: "/services",
-            },
-            {
-              label: "Leads",
-              href: "/services",
-            },
-          ],
-        },
               ]}
               bottomLeftText="© 2024 KJ Web Studio"
               bottomRightText="kjwebstudio@outlook.com"

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #000612e6;
+  --foreground: #0a0a0a;
-  --primary-cta: #15479c;
+  --primary-cta: #4f46e5;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #f1f5f9;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
+  --accent: #8b5cf6;
-  --background-accent: #c4c4c4;
+  --background-accent: #f5f3ff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/work/page.tsx

@@ -2,13 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import { Clock, Smartphone, TrendingUp } from "lucide-react";
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 
-export default function LandingPage() {
+export default function WorkPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -26,84 +24,28 @@ export default function LandingPage() {
         <div id="nav" data-section="nav">
             <NavbarStyleFullscreen
               navItems={[
-        {
+                { name: "Home", id: "/" },
-          name: "Home",
+                { name: "Work", id: "/work" },
-          id: "/",
+                { name: "Services", id: "/services" },
-        },
+                { name: "Contact", id: "/contact" },
-        {
-          name: "Work",
-          id: "/work",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
               ]}
               brandName="KJ Web Studio"
             />
         </div>
 
-  <div id="work-page" data-section="work-page">
+        <div id="work-showcase" data-section="work-showcase">
-      <ProductCardTwo
+            <ProductCardThree
+              title="Our Portfolio"
+              description="A selection of high-converting concepts designed for local business growth."
               animationType="slide-up"
-      textboxLayout="default"
+              gridVariant="one-large-right-three-stacked-left"
-      gridVariant="two-columns-alternating-heights"
+              textboxLayout="split"
               useInvertedBackground={false}
               products={[
-        {
+                { id: "1", name: "Contractor Web Concept", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg" },
-          id: "w1",
+                { id: "2", name: "Barber Shop Web Concept", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg" },
-          brand: "Contractor",
+                { id: "3", name: "Restaurant Web Concept", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/woman-working-as-engineer_23-2148836115.jpg" },
-          name: "Contractor Web Concept",
+                { id: "4", name: "Clinic Web Concept", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5885.jpg" }
-          price: "Lead Focus",
-          rating: 5,
-          reviewCount: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-13570.jpg",
-        },
-        {
-          id: "w2",
-          brand: "Barber",
-          name: "Barber Shop Web Concept",
-          price: "Lead Focus",
-          rating: 5,
-          reviewCount: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-white-representation-sasquatch-hairy-beast_23-2151368313.jpg",
-        },
-      ]}
-      title="Our Work"
-      description="See the concepts that turn visitors into clients."
-    />
-  </div>
-
-  <div id="metric" data-section="metric">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Proven Impact"
-      description="Our designs drive real metrics for business owners."
-      metrics={[
-        {
-          id: "m1",
-          icon: TrendingUp,
-          title: "Avg. Lead Increase",
-          value: "45%",
-        },
-        {
-          id: "m2",
-          icon: Smartphone,
-          title: "Mobile Traffic",
-          value: "80%",
-        },
-        {
-          id: "m3",
-          icon: Clock,
-          title: "Build Time",
-          value: "7 Days",
-        },
               ]}
             />
         </div>
@@ -111,32 +53,8 @@ export default function LandingPage() {
         <div id="footer" data-section="footer">
             <FooterSimple
               columns={[
-        {
+                { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
-          title: "Company",
+                { title: "Services", items: [{ label: "Design", href: "/services" }, { label: "Leads", href: "/services" }] },
-          items: [
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Design",
-              href: "/services",
-            },
-            {
-              label: "Leads",
-              href: "/services",
-            },
-          ],
-        },
               ]}
               bottomLeftText="© 2024 KJ Web Studio"
               bottomRightText="kjwebstudio@outlook.com"