From 1412b6828bc7b43a6682eb3f263f1284f38a7a60 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 9 Apr 2026 16:07:53 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 403 +++++++++++++++--------------------------------
 1 file changed, 126 insertions(+), 277 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e13d297..71cc7de 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -18,292 +18,141 @@ export default function LandingPage() {
         defaultButtonVariant="hover-bubble"
         defaultTextAnimation="reveal-blur"
         borderRadius="pill"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-      ]}
-      brandName="Syncro"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "About", id: "about" },
+              { name: "Features", id: "features" },
+              { name: "Pricing", id: "pricing" },
+              { name: "Testimonials", id: "testimonials" },
+              { name: "Contact", id: "contact" }
+            ]}
+            brandName="Syncro"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "gradient-bars",
-      }}
-      logoText="Syncro"
-      description="The productivity OS for modern teams. Manage your work, documents, and communications in one seamless, high-performance workspace."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#contact",
-        },
-        {
-          text: "Learn More",
-          href: "#about",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/a-highly-modern-clean-saas-productivity--1775750760933-7a7e2963.png?_wi=1"
-      imageAlt="Syncro platform dashboard"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            background={{ variant: "gradient-bars" }}
+            logoText="Syncro"
+            description="The productivity OS for modern teams. Manage your work, documents, and communications in one seamless, high-performance workspace."
+            buttons={[
+              { text: "Get Started", href: "#contact" },
+              { text: "Learn More", href: "#about" }
+            ]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/a-highly-modern-clean-saas-productivity--1775750760933-7a7e2963.png"
+            imageAlt="Syncro platform dashboard"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric
-      useInvertedBackground={false}
-      title="Built for High-Velocity Teams"
-      metrics={[
-        {
-          icon: Zap,
-          label: "Time Saved Per Task",
-          value: "40%",
-        },
-        {
-          icon: ShieldCheck,
-          label: "Security Uptime",
-          value: "99.9%",
-        },
-        {
-          icon: Users,
-          label: "Active Organizations",
-          value: "500+",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <AboutMetric
+            useInvertedBackground={false}
+            title="Built for High-Velocity Teams"
+            metrics={[
+              { icon: Zap, label: "Time Saved Per Task", value: "40%" },
+              { icon: ShieldCheck, label: "Security Uptime", value: "99.9%" },
+              { icon: Users, label: "Active Organizations", value: "500+" }
+            ]}
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Daily Focus",
-          description: "AI-driven suggestions for your daily workflow, focusing on what matters most.",
-          bentoComponent: "3d-task-list",
-          items: [
-            {
-              icon: Calendar,
-              label: "Review Q3 Strategy",
-              time: "09:00",
-            },
-            {
-              icon: Mail,
-              label: "Client Follow-up",
-              time: "11:30",
-            },
-            {
-              icon: Code,
-              label: "Sprint Planning",
-              time: "14:00",
-            },
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/floating-task-card-ui-component-for-a-pr-1775750771334-57f06789.png",
-          imageAlt: "Floating task card UI component for a productivity application, futuristic design.",
-        },
-        {
-          title: "Seamless Team Collaboration",
-          description: "Real-time communication tools integrated directly into your project documents.",
-          bentoComponent: "chat",
-          aiIcon: Star,
-          userIcon: User,
-          exchanges: [
-            {
-              userMessage: "Update the roadmap?",
-              aiResponse: "Roadmap updated.",
-            },
-          ],
-          placeholder: "Collaborate...",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/a-highly-modern-clean-saas-productivity--1775750760933-7a7e2963.png?_wi=2",
-          imageAlt: "Floating task card UI component for a productivity application, futuristic design.",
-        },
-        {
-          title: "Visual Analytics",
-          description: "Deep insights into your productivity metrics with customizable reporting tools.",
-          bentoComponent: "line-chart",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-young-tech-pr-1775750781066-72fdd643.png?_wi=1",
-          imageAlt: "Floating task card UI component for a productivity application, futuristic design.",
-        },
-      ]}
-      title="Everything You Need to Scale"
-      description="Powerful features designed to reduce friction and amplify output."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureBento
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              {
+                title: "Daily Focus",                description: "AI-driven suggestions for your daily workflow, focusing on what matters most.",                bentoComponent: "3d-task-list",                title: "Daily Tasks",                items: [
+                  { icon: Calendar, label: "Review Q3 Strategy", time: "09:00" },
+                  { icon: Mail, label: "Client Follow-up", time: "11:30" },
+                  { icon: Code, label: "Sprint Planning", time: "14:00" }
+                ]
+              },
+              {
+                title: "Seamless Team Collaboration",                description: "Real-time communication tools integrated directly into your project documents.",                bentoComponent: "chat",                aiIcon: Star,
+                userIcon: User,
+                exchanges: [
+                  { userMessage: "Update the roadmap?", aiResponse: "Roadmap updated." }
+                ],
+                placeholder: "Collaborate..."
+              },
+              {
+                title: "Visual Analytics",                description: "Deep insights into your productivity metrics with customizable reporting tools.",                bentoComponent: "line-chart"
+              }
+            ]}
+            title="Everything You Need to Scale"
+            description="Powerful features designed to reduce friction and amplify output."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "starter",
-          badge: "Entry",
-          price: "$12",
-          subtitle: "Perfect for freelancers",
-          features: [
-            "Personal workspace",
-            "Up to 5 projects",
-            "Basic integrations",
-          ],
-        },
-        {
-          id: "professional",
-          badge: "Popular",
-          price: "$39",
-          subtitle: "For small teams",
-          features: [
-            "Shared workspaces",
-            "Unlimited projects",
-            "Priority support",
-            "Advanced API",
-          ],
-        },
-        {
-          id: "enterprise",
-          badge: "Scale",
-          price: "Custom",
-          subtitle: "For organizations",
-          features: [
-            "SAML SSO",
-            "Advanced security",
-            "Dedicated support",
-            "Custom workflows",
-          ],
-        },
-      ]}
-      title="Transparent Pricing"
-      description="Choose the plan that fits your growth trajectory."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              { id: "starter", badge: "Entry", price: "$12", subtitle: "Perfect for freelancers", features: ["Personal workspace", "Up to 5 projects", "Basic integrations"] },
+              { id: "professional", badge: "Popular", price: "$39", subtitle: "For small teams", features: ["Shared workspaces", "Unlimited projects", "Priority support", "Advanced API"] },
+              { id: "enterprise", badge: "Scale", price: "Custom", subtitle: "For organizations", features: ["SAML SSO", "Advanced security", "Dedicated support", "Custom workflows"] }
+            ]}
+            title="Transparent Pricing"
+            description="Choose the plan that fits your growth trajectory."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah Miller",
-          role: "PM",
-          company: "Innovate",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-young-tech-pr-1775750781066-72fdd643.png?_wi=2",
-        },
-        {
-          id: "2",
-          name: "David Chen",
-          role: "Eng",
-          company: "Nexus",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-female-softwa-1775750789999-67756b2d.png",
-        },
-        {
-          id: "3",
-          name: "Emma Wilson",
-          role: "Marketing",
-          company: "BrandCo",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-creative-desi-1775750799158-caee6527.png",
-        },
-        {
-          id: "4",
-          name: "Marcus Aurelius",
-          role: "Ops",
-          company: "Logic",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-product-manag-1775750811386-7e08904e.png",
-        },
-        {
-          id: "5",
-          name: "Julia Roberts",
-          role: "Design",
-          company: "ArtCore",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-creative-team-1775750821154-6d9577db.png",
-        },
-      ]}
-      title="Loved by Productivity Experts"
-      description="Join thousands of teams that have transformed their productivity with Syncro."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "1", name: "Sarah Miller", role: "PM", company: "Innovate", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-young-tech-pr-1775750781066-72fdd643.png" },
+              { id: "2", name: "David Chen", role: "Eng", company: "Nexus", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-female-softwa-1775750789999-67756b2d.png" },
+              { id: "3", name: "Emma Wilson", role: "Marketing", company: "BrandCo", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-creative-desi-1775750799158-caee6527.png" },
+              { id: "4", name: "Marcus Aurelius", role: "Ops", company: "Logic", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-product-manag-1775750811386-7e08904e.png" },
+              { id: "5", name: "Julia Roberts", role: "Design", company: "ArtCore", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/professional-portrait-of-a-creative-team-1775750821154-6d9577db.png" }
+            ]}
+            title="Loved by Productivity Experts"
+            description="Join thousands of teams that have transformed their productivity with Syncro."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      title="Ready to get productive?"
-      description="Join our waitlist for exclusive early access to Syncro."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/abstract-dark-blue-tech-background-with--1775750829717-b7b59a25.png"
-      mediaAnimation="slide-up"
-      tag="Waitlist"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            useInvertedBackground={false}
+            background={{ variant: "plain" }}
+            title="Ready to get productive?"
+            description="Join our waitlist for exclusive early access to Syncro."
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AJb0zJP2EWyuYlH5wmRP5jjTA5/abstract-dark-blue-tech-background-with--1775750829717-b7b59a25.png"
+            mediaAnimation="slide-up"
+            tag="Waitlist"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Product",
-              href: "#",
-            },
-            {
-              label: "Security",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="Syncro"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Syncro"
+            columns={[
+              { items: [{ label: "Product", href: "#" }, { label: "Security", href: "#" }] },
+              { items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
+              { items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1