Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroLogo from "@/components/sections/hero/HeroLogo";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Zap, Target, Sparkles } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="aurora"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "hero" },
+            { name: "About", id: "/about" },
+            { name: "Services", id: "services" },
+            { name: "Work", id: "testimonials" },
+            { name: "Contact", id: "contact" },
+          ]}
+          brandName="Break Point Web Studio"
+          bottomLeftText="San Francisco, CA"
+          bottomRightText="hello@breakpointweb.com"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="About Break Point"
+          description="A high-performance digital boutique specializing in responsive architecture and precision code. We transform ambitions into exceptional digital experiences."
+          buttons={[
+            { text: "Explore Our Philosophy", href: "#about" },
+            { text: "Get In Touch", href: "#contact" },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/office-ready-work_1150-101.jpg?_wi=2"
+          imageAlt="Break Point Web Studio team workspace"
+          showDimOverlay={true}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title="Our Mission"
+          description={[
+            "Break Point Web Studio exists at the intersection of design excellence and technical precision. We are a high-performance digital boutique specializing in responsive architecture—building interfaces and systems that adapt flawlessly to every device, every user, and every moment of interaction.",            "We believe that the best digital solutions are those that work seamlessly across all touchpoints while maintaining blazing-fast performance and impeccable code quality. Every project we undertake is a commitment to elevating digital standards and pushing the boundaries of what's possible on the web."
+          ]}
+          buttons={[
+            { text: "Our Philosophy", href: "#services" },
+          ]}
+          showBorder={false}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardTen
+          title="Our Core Pillars"
+          description="The foundation of everything we do rests on three essential principles that guide our approach to digital excellence."
+          tag="Our Philosophy"
+          features={[
+            {
+              id: "1",              title: "Adaptability",              description: "We build solutions that evolve with your needs. From responsive design that works on every device to scalable architecture that grows with your business, adaptability is embedded in every line of code and every design decision we make.",              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg?_wi=2"
+              },
+              items: [
+                { icon: Zap, text: "Mobile-first responsive design" },
+                { icon: Target, text: "Scalable system architecture" },
+                { icon: Sparkles, text: "Future-proof solutions" },
+              ],
+              reverse: false,
+            },
+            {
+              id: "2",              title: "Performance",              description: "Speed matters. Every millisecond counts in user experience and search rankings. We obsess over performance metrics, optimize every asset, and employ cutting-edge techniques to deliver sites that load instantly and run flawlessly.",              media: {
+                imageSrc: "http://img.b2bpic.net/free-photo/top-view-woman-holding-tablet_23-2149762489.jpg?_wi=2"
+              },
+              items: [
+                { icon: Zap, text: "Sub-second load times" },
+                { icon: Target, text: "Core Web Vitals optimization" },
+                { icon: Sparkles, text: "Advanced caching strategies" },
+              ],
+              reverse: true,
+            },
+            {
+              id: "3",              title: "The Turning Point",              description: "Every successful digital project marks a turning point—the moment when strategy meets execution, vision becomes reality, and brands break through to new levels of customer engagement and business success.",              media: {
+                imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-landing-page-template_23-2149014644.jpg?_wi=2"
+              },
+              items: [
+                { icon: Zap, text: "Strategic digital transformation" },
+                { icon: Target, text: "Measurable business impact" },
+                { icon: Sparkles, text: "Breakthrough results" },
+              ],
+              reverse: false,
+            },
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardThree
+          title="Our Impact"
+          description="Proven results that demonstrate our commitment to excellence and client success."
+          metrics={[
+            { id: "1", icon: Zap, title: "Average Performance Improvement", value: "85%" },
+            { id: "2", icon: Target, title: "Client Retention Rate", value: "96%" },
+            { id: "3", icon: Sparkles, title: "Projects Delivered", value: "150+" },
+            { id: "4", icon: Zap, title: "Years of Excellence", value: "10+" },
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Ready to Break Point?"
+          title="Let's Create Your Next Digital Achievement"
+          description="Whether you're ready to transform your digital presence or want to discuss how we can help your business break through, we're here to listen and deliver exceptional results."
+          tagIcon={Sparkles}
+          inputPlaceholder="your@email.com"
+          buttonText="Start Conversation"
+          termsText="We respect your privacy. We'll only use your email to discuss your project."
+          background={{ variant: "rotated-rays-animated-grid" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Break Point"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -14,7 +14,7 @@ import { Award, Code, CreditCard, Gauge, Lock, Palette, Quote, ShoppingCart, Sma
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-bubble"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
@@ -29,7 +29,7 @@ export default function LandingPage() {
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "hero" },
-            { name: "About", id: "about" },
+            { name: "About", id: "/about" },
             { name: "Services", id: "services" },
             { name: "Work", id: "testimonials" },
             { name: "Contact", id: "contact" },
@@ -48,7 +48,7 @@ export default function LandingPage() {
             { text: "Start Your Project", href: "#contact" },
             { text: "View Our Work", href: "#testimonials" },
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/office-ready-work_1150-101.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/office-ready-work_1150-101.jpg?_wi=1"
           imageAlt="Break Point Web Studio modern workspace"
           showDimOverlay={true}
         />
@@ -75,7 +75,7 @@ export default function LandingPage() {
           features={[
             {
               id: "1",              title: "Web Design",              description: "We create stunning, user-centered website designs that reflect your brand identity and engage your audience. From concept to final pixels, we ensure every detail is perfect.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg"},
+                imageSrc: "http://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg?_wi=1"},
               items: [
                 { icon: Palette, text: "Brand-aligned visual design" },
                 { icon: Smartphone, text: "Responsive mobile-first approach" },
@@ -85,7 +85,7 @@ export default function LandingPage() {
             },
             {
               id: "2",              title: "Web Development",              description: "Our developers build fast, secure, and scalable web applications using modern technologies. We focus on clean code, best practices, and future-proof architecture.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-photo/top-view-woman-holding-tablet_23-2149762489.jpg"},
+                imageSrc: "http://img.b2bpic.net/free-photo/top-view-woman-holding-tablet_23-2149762489.jpg?_wi=1"},
               items: [
                 { icon: Code, text: "Full-stack development expertise" },
                 { icon: Lock, text: "Security and best practices" },
@@ -95,7 +95,7 @@ export default function LandingPage() {
             },
             {
               id: "3",              title: "E-Commerce Solutions",              description: "We build powerful e-commerce platforms that drive conversions. From product management to payment integration, we handle the technical complexity so you can focus on growth.",              media: {
-                imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-landing-page-template_23-2149014644.jpg"},
+                imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-landing-page-template_23-2149014644.jpg?_wi=1"},
               items: [
                 { icon: ShoppingCart, text: "Conversion-optimized design" },
                 { icon: CreditCard, text: "Secure payment processing" },

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #120006e6;
-  --primary-cta: #e63946;
+  --background: #1a1a1a;
+  --card: #2d2d2d;
+  --foreground: #ffffff;
+  --primary-cta: #00ff00;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #2d2d2d;
   --secondary-cta-text: #120006e6;
-  --accent: #e2e2e2;
-  --background-accent: #e2e2e2;
+  --accent: #00ff00;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);