Merge version_1 into main #2
328
src/app/page.tsx
328
src/app/page.tsx
@@ -33,22 +33,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Kybo"
|
||||
/>
|
||||
@@ -56,39 +44,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
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",
|
||||
},
|
||||
]}
|
||||
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",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/irritated-nervous-executive-manager-having-mental-breakdown_482257-77633.jpg",
|
||||
imageAlt: "Irritated nervous executive manager having mental breakdown",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glasses-lie-laptop-reflecting-light-from-screen-dark_169016-53051.jpg",
|
||||
imageAlt: "Glasses lie on the laptop reflecting light from the screen in the dark",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tired-corporate-employee-working-overhours-marketing-project_482257-77671.jpg",
|
||||
imageAlt: "Tired corporate employee working overhours at marketing project",
|
||||
},
|
||||
{ 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", imageAlt: "Dashboard UI design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/mobile-app-analytics-dashboard_23-2151957122.jpg", imageAlt: "Mobile App UI" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
@@ -113,46 +76,11 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -166,48 +94,12 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -221,52 +113,19 @@ export default function LandingPage() {
|
||||
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",
|
||||
imageAlt: "College student captivated by her literature assignment at the academic library",
|
||||
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",
|
||||
imageAlt: "College student captivated by her literature assignment at the academic library",
|
||||
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"
|
||||
},
|
||||
{
|
||||
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",
|
||||
imageAlt: "College student captivated by her literature assignment at the academic library",
|
||||
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"
|
||||
},
|
||||
]}
|
||||
title="Flexible pricing for every size."
|
||||
@@ -281,21 +140,9 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -308,60 +155,16 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -373,21 +176,9 @@ export default function LandingPage() {
|
||||
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.",
|
||||
},
|
||||
{ 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."
|
||||
@@ -398,18 +189,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
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: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact our team", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -418,30 +202,10 @@ export default function LandingPage() {
|
||||
logoText="Kybo"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Kybo SaaS Design. All rights reserved."
|
||||
|
||||
Reference in New Issue
Block a user