Merge version_1 into main #2
403
src/app/page.tsx
403
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user