Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -1,127 +1,22 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import SplitAbout from '@/components/sections/about/SplitAbout';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
+import { Users } from "lucide-react";
 
-export default function LandingPage() {
+export default function AboutPage() {
   return (
-    <ThemeProvider
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-        defaultButtonVariant="expand-hover"
+      <div id="nav" data-section="nav">
-        defaultTextAnimation="entrance-slide"
+        <NavbarLayoutFloatingOverlay 
-        borderRadius="soft"
+          navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]} 
-        contentWidth="mediumLarge"
+          brandName="Masi Digital"
-        sizing="mediumLarge"
+        />
-        background="grid"
+      </div>
-        cardStyle="soft-shadow"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="medium"
-    >
-      <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Masi Digital"
-      button={{
-        text: "Get a Free Preview",
-        href: "/contact",
-      }}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Built for Growth"
-      description="Masi Digital was founded to bridge the gap between aesthetic design and technical lead generation."
-      bulletPoints={[
-        {
-          title: "Local Focus",
-          description: "We understand the Long Island market.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-interior-design-project_23-2150346478.jpg"
-      mediaAnimation="opacity"
-    />
-  </div>
-
-  <div id="team" data-section="team">
-      <TeamCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      title="Our Leadership"
-      description="Meet the team building your future."
-      members={[
-        {
-          id: "t1",
-          name: "Masi Team",
-          role: "Digital Strategists",
-          description: "Focused on your success.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-successful-business-leader-posing_1262-21162.jpg",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
       <FooterBaseCard
-      logoText="Masi Digital"
+        logoText="Masi Digital"
-      columns={[
+        columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "Contact", href: "/contact" }] }]}
-        {
+      />
-          title: "Links",
-          items: [
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "masidigitalco@gmail.com",
-              href: "mailto:masidigitalco@gmail.com",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2025 Masi Digital. All Rights Reserved."
-    />
-  </div>
-      </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -1,119 +1,21 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
-export default function LandingPage() {
+export default function ContactPage() {
   return (
-    <ThemeProvider
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-        defaultButtonVariant="expand-hover"
+      <div id="nav" data-section="nav">
-        defaultTextAnimation="entrance-slide"
+        <NavbarLayoutFloatingOverlay 
-        borderRadius="soft"
+          navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]} 
-        contentWidth="mediumLarge"
+          brandName="Masi Digital"
-        sizing="mediumLarge"
+        />
-        background="grid"
+      </div>
-        cardStyle="soft-shadow"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="medium"
-    >
-      <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Masi Digital"
-      button={{
-        text: "Get a Free Preview",
-        href: "/contact",
-      }}
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Get in touch"
-      title="Start Your Project"
-      description="Let's talk about how to get you more customers."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Quick Answers"
-      description="Don't see your question? Email us."
-      faqsAnimation="opacity"
-      faqs={[
-        {
-          id: "c1",
-          title: "Can I get a custom quote?",
-          content: "Yes, contact us via email.",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
       <FooterBaseCard
-      logoText="Masi Digital"
+        logoText="Masi Digital"
-      columns={[
+        columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "About", href: "/about" }] }]}
-        {
+      />
-          title: "Links",
-          items: [
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "masidigitalco@gmail.com",
-              href: "mailto:masidigitalco@gmail.com",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2025 Masi Digital. All Rights Reserved."
-    />
-  </div>
-      </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -29,70 +29,29 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",
+        { name: "Services", id: "/services" },
-          id: "/",
+        { name: "About", id: "/about" },
-        },
+        { name: "Contact", id: "/contact" },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
       ]}
       brandName="Masi Digital"
-      button={{
+      button={{ text: "Get a Free Preview", href: "/contact" }}
-        text: "Get a Free Preview",
-        href: "/contact",
-      }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain",
-      }}
       title="Your Business Is Losing Customers Right Now."
       description="Every day without a professional website is a day someone searches for your business and calls your competitor instead. Masi Digital changes that."
       tag="WEB DESIGN · AUTOMATION · AI"
       buttons={[
-        {
+        { text: "Get a Free Preview", href: "/contact" },
-          text: "Get a Free Preview",
+        { text: "masidigitalco@gmail.com", href: "mailto:masidigitalco@gmail.com" },
-          href: "/contact",
-        },
-        {
-          text: "masidigitalco@gmail.com",
-          href: "mailto:masidigitalco@gmail.com",
-        },
       ]}
       mediaItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-template-with-photo_52683-19826.jpg", imageAlt: "Typography driven visual" },
-          imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-template-with-photo_52683-19826.jpg",
+        { imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-31485.jpg", imageAlt: "Modern web dashboard" },
-          imageAlt: "Typography driven visual",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-template_52683-31485.jpg",
-          imageAlt: "Modern web dashboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/bright-wavy-lines-black-background_1035-6329.jpg",
-          imageAlt: "AI automation flow",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/furniture-shopping-app-design_23-2148646512.jpg",
-          imageAlt: "Mobile responsive preview",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-template-with-photo_52683-19804.jpg",
-          imageAlt: "Conversion focused layout",
-        },
       ]}
     />
   </div>
@@ -103,57 +62,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
+        { id: "tier1", badge: "TIER 01", price: "Starting at $1,000", subtitle: "Professional Website", buttons: [{ text: "See what's included", href: "/services" }], features: ["Professional design", "Mobile responsive", "Local SEO setup"] },
-          id: "tier1",
+        { id: "tier2", badge: "TIER 02 — MOST POPULAR", price: "Starting at $1,000", subtitle: "Website + Lead Automation", buttons: [{ text: "See what's included", href: "/services" }], features: ["Everything in Tier 1", "Instant automated text", "Full CRM dashboard"] },
-          badge: "TIER 01",
-          price: "Starting at $1,000",
-          subtitle: "Professional Website",
-          buttons: [
-            {
-              text: "See what's included",
-              href: "/services",
-            },
-          ],
-          features: [
-            "Professional design",
-            "Mobile responsive",
-            "Local SEO setup",
-          ],
-        },
-        {
-          id: "tier2",
-          badge: "TIER 02 — MOST POPULAR",
-          price: "Starting at $1,000",
-          subtitle: "Website + Lead Automation",
-          buttons: [
-            {
-              text: "See what's included",
-              href: "/services",
-            },
-          ],
-          features: [
-            "Everything in Tier 1",
-            "Instant automated text",
-            "Full CRM dashboard",
-          ],
-        },
-        {
-          id: "tier3",
-          badge: "TIER 03 — FULL SYSTEM",
-          price: "Starting at $1,000",
-          subtitle: "The Full System",
-          buttons: [
-            {
-              text: "See what's included",
-              href: "/services",
-            },
-          ],
-          features: [
-            "Everything in Tier 2",
-            "AI Receptionist 24/7",
-            "Automated Booking",
-          ],
-        },
       ]}
       title="Three Levels. One Goal. More Jobs."
       description="You do the work. We make sure the phone never stops ringing."
@@ -166,13 +76,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Trusted by Local Leaders"
       description="We partner with businesses that demand excellence and results."
-      names={[
+      names={["Long Island HVAC", "Metro Construction", "Elite Landscaping", "Island Auto Repair", "Coastal Plumbing"]}
-        "Long Island HVAC",
-        "Metro Construction",
-        "Elite Landscaping",
-        "Island Auto Repair",
-        "Coastal Plumbing",
-      ]}
     />
   </div>
 
@@ -184,16 +88,8 @@ export default function LandingPage() {
       description="Everything you need to know about our digital transformation process."
       faqsAnimation="slide-up"
       faqs={[
-        {
+        { id: "f1", title: "How long does a website take?", content: "Most projects are completed within 2 to 4 weeks depending on complexity." },
-          id: "f1",
+        { id: "f2", title: "Do you offer SEO?", content: "Yes, we build every site with local SEO best practices to ensure you get found." },
-          title: "How long does a website take?",
-          content: "Most projects are completed within 2 to 4 weeks depending on complexity.",
-        },
-        {
-          id: "f2",
-          title: "Do you offer SEO?",
-          content: "Yes, we build every site with local SEO best practices to ensure you get found.",
-        },
       ]}
     />
   </div>
@@ -207,20 +103,8 @@ export default function LandingPage() {
       title="Real World Results"
       description="We don't just build sites; we build high-performing business engines."
       metrics={[
-        {
+        { id: "m1", value: "2x", title: "Lead Volume", description: "Average increase in inquiries", icon: TrendingUp },
-          id: "m1",
+        { id: "m2", value: "90%", title: "Automation", description: "Task reduction for owners", icon: Star },
-          value: "2x",
-          title: "Lead Volume",
-          description: "Average increase in inquiries",
-          icon: TrendingUp,
-        },
-        {
-          id: "m2",
-          value: "90%",
-          title: "Automation",
-          description: "Task reduction for owners",
-          icon: Star,
-        },
       ]}
     />
   </div>
@@ -229,32 +113,8 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="Masi Digital"
       columns={[
-        {
+        { title: "Links", items: [{ label: "Services", href: "/services" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
-          title: "Links",
+        { title: "Contact", items: [{ label: "masidigitalco@gmail.com", href: "mailto:masidigitalco@gmail.com" }] },
-          items: [
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "masidigitalco@gmail.com",
-              href: "mailto:masidigitalco@gmail.com",
-            },
-          ],
-        },
       ]}
       copyrightText="© 2025 Masi Digital. All Rights Reserved."
     />
@@ -262,4 +122,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -1,128 +1,21 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import SplitAbout from '@/components/sections/about/SplitAbout';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Globe } from "lucide-react";
 
-export default function LandingPage() {
+export default function ServicesPage() {
   return (
-    <ThemeProvider
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-        defaultButtonVariant="expand-hover"
+      <div id="nav" data-section="nav">
-        defaultTextAnimation="entrance-slide"
+        <NavbarLayoutFloatingOverlay 
-        borderRadius="soft"
+          navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]} 
-        contentWidth="mediumLarge"
+          brandName="Masi Digital"
-        sizing="mediumLarge"
+        />
-        background="grid"
+      </div>
-        cardStyle="soft-shadow"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="medium"
-    >
-      <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Masi Digital"
-      button={{
-        text: "Get a Free Preview",
-        href: "/contact",
-      }}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <SplitAbout
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Tailored Web Solutions"
-      description="High-conversion web design matched with intelligent automation systems."
-      bulletPoints={[
-        {
-          title: "Clean Design",
-          description: "Minimalist UI that drives action.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/employee-office-leaving-desk-present-revenue-figures-tablet_482257-126652.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
-
-  <div id="metric" data-section="metric">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      title="Our Services Impact"
-      description="Quantifiable growth for your business."
-      metrics={[
-        {
-          id: "ms1",
-          value: "100+",
-          title: "Web Projects",
-          description: "Successfully launched",
-          icon: Globe,
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
       <FooterBaseCard
-      logoText="Masi Digital"
+        logoText="Masi Digital"
-      columns={[
+        columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
-        {
+      />
-          title: "Links",
-          items: [
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "About",
-              href: "/about",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "masidigitalco@gmail.com",
-              href: "mailto:masidigitalco@gmail.com",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2025 Masi Digital. All Rights Reserved."
-    />
-  </div>
-      </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #f9f9f9;
+  --card: #ffffff;
-  --foreground: #0f172a;
+  --foreground: #000b1d;
-  --primary-cta: #3b82f6;
+  --primary-cta: #00205b;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f1f5f9;
   --secondary-cta-text: #3b82f6;
-  --accent: #e2e8f0;
+  --accent: #007bff;
-  --background-accent: #eff6ff;
+  --background-accent: #e0e7ff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);