218 lines
11 KiB
TypeScript
218 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "About", id: "#about" },
|
|
{ name: "Features", id: "#features" },
|
|
{ name: "Pricing", id: "#pricing" },
|
|
{ name: "Contact", id: "#contact" },
|
|
]}
|
|
brandName="Kybo"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{ variant: "plain" }}
|
|
title="Design SaaS tools that scale seamlessly."
|
|
description="Transform complex design workflows into beautiful, efficient experiences. Kybo empowers teams to build high-performance products."
|
|
tag="Elevate your design"
|
|
buttons={[{ text: "Start building", href: "#contact" }]}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/old-couturier-checking-fashion-sketches-atelier-working-modern-designs-with-laptop-tablet-experienced-designer-searching-handmade-models-online-needlework-handheld-shot_482257-67826.jpg?_wi=1", imageAlt: "Dashboard UI design" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/mobile-app-analytics-dashboard_23-2151957122.jpg?_wi=1", imageAlt: "Mobile App UI" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Trusted by 500+ design teams"
|
|
tagIcon={Sparkles}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={true}
|
|
title="Built for designers, not just developers."
|
|
description="Kybo bridges the gap between creative intent and technical execution, allowing your team to prototype, test, and iterate with lightning speed."
|
|
imageSrc="http://img.b2bpic.net/free-photo/still-life-graphic-design-day_52683-160824.jpg"
|
|
imageAlt="Design team collaborative space"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: "f1", title: "Design Systems", tags: ["Core"], imageSrc: "http://img.b2bpic.net/free-photo/abstract-banner-lego-art-poster-design_460848-7061.jpg" },
|
|
{ id: "f2", title: "Interactive Prototyping", tags: ["Fast"], imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-interface_23-2152011741.jpg" },
|
|
{ id: "f3", title: "Collaborative Workspace", tags: ["Sync"], imageSrc: "http://img.b2bpic.net/free-photo/colleagues-looking-tablet-discussing-new-ideas-office_176420-1724.jpg" },
|
|
{ id: "f4", title: "Automated Handoff", tags: ["Automation"], imageSrc: "http://img.b2bpic.net/free-photo/clay-wavy-shape-blue-handmade-creative-art_53876-134200.jpg" },
|
|
{ id: "f5", title: "Real-time Sync", tags: ["Live"], imageSrc: "http://img.b2bpic.net/free-photo/adorable-3d-character-children_23-2150473658.jpg" },
|
|
]}
|
|
title="Powerful features for modern SaaS."
|
|
description="Equip your team with the tools needed to design faster and smarter."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{ id: "p1", name: "Framework Base", price: "$99", variant: "Core", imageSrc: "http://img.b2bpic.net/free-photo/start-up-business-rocket-icon_53876-13918.jpg" },
|
|
{ id: "p2", name: "Analytics Pro", price: "$149", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-photo/charts-with-economy-development-desk_23-2148541972.jpg" },
|
|
{ id: "p3", name: "Cloud Storage", price: "$49", variant: "Base", imageSrc: "http://img.b2bpic.net/free-photo/man-showing-dropbox-icon-sofa_53876-65419.jpg" },
|
|
{ id: "p4", name: "API Service", price: "$199", variant: "Dev", imageSrc: "http://img.b2bpic.net/free-vector/creative-web-development-25-line-filled-icon-pack-such-as-code-programming-mobile-language-app_1142-21250.jpg" },
|
|
{ id: "p5", name: "Feedback Loop", price: "$79", variant: "Base", imageSrc: "http://img.b2bpic.net/free-photo/collage-customer-experience-concept_23-2149367125.jpg" },
|
|
{ id: "p6", name: "Automation Pro", price: "$299", variant: "Advanced", imageSrc: "http://img.b2bpic.net/free-vector/infographic-elements-about-email-creativity_1209-153.jpg" },
|
|
]}
|
|
title="Integrated Design Toolkit"
|
|
description="A comprehensive set of tools tailored for your SaaS growth."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic", title: "Starter", price: "$49", period: "/mo", features: ["Design Systems", "Prototyping", "Community Access"],
|
|
button: { text: "Get Started" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/college-student-captivated-by-her-literature-assignment-academic-library_482257-123167.jpg"
|
|
},
|
|
{
|
|
id: "pro", title: "Professional", price: "$149", period: "/mo", features: ["Advanced Analytics", "Cloud Storage", "API Access"],
|
|
button: { text: "Get Started" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/old-couturier-checking-fashion-sketches-atelier-working-modern-designs-with-laptop-tablet-experienced-designer-searching-handmade-models-online-needlework-handheld-shot_482257-67826.jpg?_wi=2"
|
|
},
|
|
{
|
|
id: "enterprise", title: "Enterprise", price: "$499", period: "/mo", features: ["Custom Automation", "Priority Support", "Dedicated Manager"],
|
|
button: { text: "Contact Us" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mobile-app-analytics-dashboard_23-2151957122.jpg?_wi=2"
|
|
},
|
|
]}
|
|
title="Flexible pricing for every size."
|
|
description="Choose the perfect plan for your design team."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "m1", value: "5x", description: "Faster prototyping" },
|
|
{ id: "m2", value: "90%", description: "Team efficiency boost" },
|
|
{ id: "m3", value: "24/7", description: "Global support uptime" },
|
|
]}
|
|
title="Proven impact at scale."
|
|
description="Our tools deliver measurable results."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah Chen", role: "Head of Design", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg" },
|
|
{ id: "2", name: "Marc Davis", role: "Product Lead", company: "CreativeOps", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586558.jpg" },
|
|
{ id: "3", name: "Elena Ross", role: "Product Manager", company: "GrowthApp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098593.jpg" },
|
|
{ id: "4", name: "David Kim", role: "Design Lead", company: "TechStream", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/long-curly-hair-youn-man-with-crossed-hands_158595-3775.jpg" },
|
|
{ id: "5", name: "Maya Singh", role: "Director of UX", company: "CloudScale", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg" },
|
|
]}
|
|
kpiItems={[
|
|
{ value: "500+", label: "Design Teams" },
|
|
{ value: "1M+", label: "Prototypes Built" },
|
|
{ value: "99.9%", label: "Satisfaction Rate" },
|
|
]}
|
|
title="Loved by design teams worldwide."
|
|
description="See why top product companies trust Kybo."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{ id: "q1", title: "Does this tool work with Figma?", content: "Yes, Kybo offers full integration with Figma and other leading design tools." },
|
|
{ id: "q2", title: "Can I cancel at any time?", content: "Yes, our flexible subscription model allows you to cancel whenever you need." },
|
|
{ id: "q3", title: "Do you offer enterprise discounts?", content: "Contact us to discuss custom enterprise pricing and dedicated support options." },
|
|
]}
|
|
title="Common questions."
|
|
description="Find everything you need to know about Kybo."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{ variant: "plain" }}
|
|
tag="Ready to get started?"
|
|
title="Start your design journey with Kybo today."
|
|
description="Join thousands of designers building the future."
|
|
buttons={[{ text: "Contact our team", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Kybo"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }],
|
|
},
|
|
{
|
|
title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Kybo SaaS Design. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|