351 lines
21 KiB
TypeScript
351 lines
21 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Brain, HardDrive, Heart, HelpCircle, Palette, Play, Search, Shield, Sparkles, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Storage", id: "storage" },
|
|
{ name: "AI Chat", id: "chat" },
|
|
{ name: "Customize", id: "customize" },
|
|
{ name: "Settings", id: "settings" }
|
|
]}
|
|
brandName="Koko"
|
|
bottomLeftText="AI-Powered Cloud Storage"
|
|
bottomRightText="Free, Cross-Platform, Intelligent"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Meet Koko: Your AI-Powered Storage Companion"
|
|
description="Experience a revolutionary storage platform where your cloud meets consciousness. Koko is an intelligent, autonomous 3D companion who learns your habits, responds to your actions, and makes file management feel personal. Upload, access, and organize your memories seamlessly across all devices with military-grade encryption and unlimited capacity."
|
|
background={{ variant: "radial-gradient" }}
|
|
tag="Next-Generation Storage"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "#signup" },
|
|
{ text: "Watch Demo", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/a-modern-sleek-cloud-storage-interface-s-1773763276842-e0cf6c46.png", imageAlt: "Koko storage interface showcase"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/koko-a-manga-style-ai-companion-characte-1773763276619-7f329c70.png", imageAlt: "Koko AI companion character"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="4.9/5 from 12,000+ users"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSixteen
|
|
title="Built for Modern Users"
|
|
description="Koko combines cutting-edge technology with intuitive design. Every feature is engineered for speed, security, and seamless integration into your digital life."
|
|
tag="Core Features"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
animationType="scale-rotate"
|
|
negativeCard={{
|
|
items: [
|
|
"Manual file organization", "Limited offline access", "Slow uploads (>500ms)", "No AI assistance", "Single-device experience", "No customization"
|
|
]
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"AI auto-tagging & search", "Offline-first with local caching", "Ultra-fast uploads <200ms", "Intelligent Koko assistant", "Seamless cross-platform sync", "Deep personalization engine"
|
|
]
|
|
}}
|
|
buttons={[{ text: "Explore Features", href: "#capabilities" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="capabilities" data-section="capabilities">
|
|
<ProductCardThree
|
|
title="Koko Intelligence Suite"
|
|
description="Four powerful capabilities that redefine how you interact with your files and your AI companion."
|
|
tag="AI Capabilities"
|
|
tagIcon={Brain}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "offline-access", name: "Offline-First Architecture", price: "Always Available", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/illustration-showing-offline-access-capa-1773763276586-1a3cb0d7.png", imageAlt: "Offline access capability"
|
|
},
|
|
{
|
|
id: "chunked-uploads", name: "Parallel Chunked Uploads", price: "<200ms Latency", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/visual-representation-of-chunked-upload--1773763277519-7aa090e8.png", imageAlt: "Chunked upload system"
|
|
},
|
|
{
|
|
id: "ai-search", name: "AI-Powered Search", price: "<100ms Response", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/ai-powered-search-interface-showing-sema-1773763277251-14bd24c6.png", imageAlt: "Smart search interface"
|
|
},
|
|
{
|
|
id: "3d-character", name: "Real-Time 3D Companion", price: "60 FPS Smooth", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/3d-rendered-koko-character-showing-real--1773763279259-6af4341d.png", imageAlt: "3D Koko character"
|
|
}
|
|
]}
|
|
buttons={[{ text: "Learn More", href: "#metrics" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Performance & Scale"
|
|
description="Built on enterprise-grade infrastructure with unlimited storage, intelligent deduplication, and lightning-fast access."
|
|
tag="Technical Excellence"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="scale-rotate"
|
|
metrics={[
|
|
{
|
|
id: "storage", value: "Unlimited", title: "Storage Capacity", description: "Via SHA-256 deduplication and soft fair-use policy", icon: HardDrive
|
|
},
|
|
{
|
|
id: "upload-speed", value: "<200ms", title: "Upload Latency", description: "Per 5-10MB chunk with 4-8 parallel threads", icon: Zap
|
|
},
|
|
{
|
|
id: "search-speed", value: "<100ms", title: "Search Response", description: "AI-indexed semantic tagging with object detection", icon: Search
|
|
},
|
|
{
|
|
id: "fps", value: "60 FPS", title: "Animation Performance", description: "Koko character rendering with <50ms input latency", icon: Play
|
|
}
|
|
]}
|
|
buttons={[{ text: "View Architecture", href: "#customize" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="customize" data-section="customize">
|
|
<TeamCardSix
|
|
title="Make Koko Your Own"
|
|
description="Customize every aspect of your experience—from Koko's appearance to your app's identity and theme."
|
|
tag="Personalization"
|
|
tagIcon={Palette}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
members={[
|
|
{
|
|
id: "outfit", name: "Outfit & Accessories", role: "Modular clothing system, attach points, presets", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/koko-character-customization-interface-s-1773763277340-664bdc06.png", imageAlt: "Koko outfit customization"
|
|
},
|
|
{
|
|
id: "theme", name: "Dynamic Theme Engine", role: "HSL colors, animated shaders, font selection", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/dynamic-theme-engine-interface-showing-h-1773763277567-7b9faf17.png", imageAlt: "Theme customization interface"
|
|
},
|
|
{
|
|
id: "identity", name: "App Identity", role: "Custom name, cloud sync, local storage", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/application-identity-customization-showi-1773763276286-750c5901.png", imageAlt: "App identity customization"
|
|
}
|
|
]}
|
|
buttons={[{ text: "Explore Customization", href: "#testimonials" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="Loved by Users Worldwide"
|
|
description="Join thousands who've transformed how they manage their digital life with Koko."
|
|
tag="User Stories"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
kpiItems={[
|
|
{ value: "12K+", label: "Active Users" },
|
|
{ value: "4.9★", label: "Average Rating" },
|
|
{ value: "98%", label: "Retention Rate" }
|
|
]}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", role: "Photographer", company: "Creative Collective", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/professional-headshot-of-a-satisfied-use-1773763276812-a231038d.png"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson", role: "Developer", company: "Tech Startup", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/professional-headshot-of-a-different-use-1773763275946-85457bd0.png"
|
|
},
|
|
{
|
|
id: "3", name: "Elena Rodriguez", role: "Content Creator", company: "Digital Media", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/professional-headshot-of-another-user-di-1773763276662-f1ae5576.png"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", role: "Product Manager", company: "Enterprise Corp", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/professional-headshot-of-a-fourth-user-d-1773763276097-b639cce2.png"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Thompson", role: "Freelancer", company: "Self-Employed", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/professional-headshot-of-a-fifth-user-di-1773763276905-bbbf544d.png"
|
|
},
|
|
{
|
|
id: "6", name: "Amir Patel", role: "Business Analyst", company: "Finance Solutions", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/professional-headshot-of-a-sixth-user-di-1773763276045-b5148050.png"
|
|
}
|
|
]}
|
|
buttons={[{ text: "Read More Stories", href: "#social-proof" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Tech Companies"
|
|
description="Enterprise organizations rely on Koko for secure, intelligent file management."
|
|
tag="Industry Partners"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Cloud Systems", "Data Vault", "Tech Innovations", "Digital Solutions", "Enterprise Hub", "Innovation Labs", "Smart Cloud"
|
|
]}
|
|
logos={[
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/tech-company-logo-representing-a-major-c-1773763276777-9c4b5282.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/professional-tech-company-logo-ai-focuse-1773763277230-be85a754.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/enterprise-software-company-logo-profess-1773763276797-cccec19a.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/digital-services-company-logo-modern-des-1773763276958-546d270f.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/software-innovation-company-logo-contemp-1773763275487-c4fcd936.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/cloud-platform-company-logo-professional-1773763277614-636637ac.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B4zY0e9dLvmpAiG7T95CBgckfq/data-and-storage-technology-company-logo-1773763276162-8be834b9.png"
|
|
]}
|
|
buttons={[{ text: "Enterprise Solutions", href: "#faq" }]}
|
|
buttonAnimation="slide-up"
|
|
showCard={true}
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about Koko, our platform, and how to get started."
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Is my data actually unlimited?", content: "Yes! We offer unlimited storage through SHA-256 deduplication and intelligent compression. We have a soft fair-use policy to ensure quality service for all users, but there's no hard visible cap. Your files are never auto-deleted and persist independently of your device storage."
|
|
},
|
|
{
|
|
id: "2", title: "How does offline access work?", content: "Koko uses SQLite (desktop) and IndexedDB (web/mobile) to maintain a local indexed cache. Thumbnails and metadata for all files are stored locally, plus full files for recently viewed and pinned items. This enables instant access even without internet connection."
|
|
},
|
|
{
|
|
id: "3", title: "Can Koko really move and act on her own?", content: "Absolutely! Koko features an autonomous movement system where she walks, sits, leans on UI elements, and initiates subtle interactions without direct commands. She's context-aware, responds to your activity level, and expresses emotions through a comprehensive blendshape system with 20+ facial expressions."
|
|
},
|
|
{
|
|
id: "4", title: "What platforms does Koko support?", content: "Koko is available on Windows (primary desktop), macOS, iOS, and Android. The iOS/Android apps are companion apps with full sync capabilities. All platforms use end-to-end encryption and maintain cross-device data synchronization."
|
|
},
|
|
{
|
|
id: "5", title: "How fast are uploads really?", content: "We achieve <200ms latency per 5-10MB chunk with 4-8 parallel upload threads. Resume support lets you pick up where you left off on interruption. Large files are chunked automatically for optimal speed and reliability."
|
|
},
|
|
{
|
|
id: "6", title: "Can I customize Koko's appearance?", content: "Yes! Fully customize Koko's outfit (modular clothing), hair, accessories, and colors. You can also integrate Google image search to extract color schemes and styles from any photo to apply to Koko. Presets can be saved/loaded in JSON format."
|
|
},
|
|
{
|
|
id: "7", title: "How does AI search work?", content: "Our AI pipeline performs object detection and scene classification on your photos automatically. Tags are stored locally for instant <100ms search response times. Search is semantic—find 'beach photos with sunset' or 'office meetings' naturally."
|
|
},
|
|
{
|
|
id: "8", title: "Is my data encrypted?", content: "Yes! We support AES-256 encryption with optional client-side encryption for additional security. All authentication uses OAuth2 with optional 2FA support for maximum protection of your personal files."
|
|
}
|
|
]}
|
|
buttons={[{ text: "Contact Support", href: "#contact" }]}
|
|
buttonAnimation="slide-up"
|
|
showCard={true}
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Ready to Start?"
|
|
title="Join Koko Today"
|
|
description="Begin your journey to intelligent, effortless file management. Free forever plan with unlimited storage and your personal AI companion."
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={true}
|
|
inputPlaceholder="Enter your email to get started"
|
|
buttonText="Start Free Trial"
|
|
termsText="By signing up, you agree to our Terms of Service and Privacy Policy. We'll never spam you—Koko promised!"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Koko"
|
|
copyrightText="© 2025 Koko AI Storage. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Capabilities", href: "#capabilities" },
|
|
{ label: "Customization", href: "#customize" },
|
|
{ label: "Pricing", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "API Reference", href: "#" },
|
|
{ label: "Support", href: "#faq" },
|
|
{ label: "Community", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Security", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |