Update src/app/page.tsx
This commit is contained in:
431
src/app/page.tsx
431
src/app/page.tsx
@@ -14,305 +14,154 @@ import { Box, Globe, Server, ShieldCheck, Star, Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="fluid"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="fluid"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Dashboard",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Metrics",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Terminal",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Access",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Promake OS"
|
||||
button={{
|
||||
text: "Deploy System",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "hero" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Terminal", id: "features" },
|
||||
{ name: "Access", id: "contact" }
|
||||
]}
|
||||
brandName="Promake OS"
|
||||
button={{ text: "Deploy System", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Promake: Talk to AI. Build a real website."
|
||||
description="Build Anything, Manage Forever. Our AI-powered platform turns your conversational ideas into professional, functional digital environments."
|
||||
kpis={[
|
||||
{
|
||||
value: "24/7",
|
||||
label: "Active Monitoring",
|
||||
},
|
||||
{
|
||||
value: "10ms",
|
||||
label: "Latency",
|
||||
},
|
||||
{
|
||||
value: "99.9%",
|
||||
label: "Uptime",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Building",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/business-infographic-template-with-photo_23-2148228380.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smartphone-child-hands-with-incoming-mommy-call-screen_169016-42647.jpg",
|
||||
alt: "User avatar",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-woman-reading-menu-restaurant_23-2150384824.jpg",
|
||||
alt: "User avatar",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671570.jpg",
|
||||
alt: "User avatar",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/african-american-young-adult-laying-sofa-with-mockup-screen_482257-126491.jpg",
|
||||
alt: "User avatar",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-working-from-smart-house-with-automation-lighting-system_482257-8725.jpg",
|
||||
alt: "User avatar",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ developers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Secure",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Scalable",
|
||||
icon: Box,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Fast",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Reliable",
|
||||
icon: Server,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Global",
|
||||
icon: Globe,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "plain" }}
|
||||
title="Promake: Talk to AI. Build a real website."
|
||||
description="Build Anything, Manage Forever. Our AI-powered platform turns your conversational ideas into professional, functional digital environments."
|
||||
kpis={[
|
||||
{ value: "24/7", label: "Active Monitoring" },
|
||||
{ value: "10ms", label: "Latency" },
|
||||
{ value: "99.9%", label: "Uptime" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Start Building", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/business-infographic-template-with-photo_23-2148228380.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/smartphone-child-hands-with-incoming-mommy-call-screen_169016-42647.jpg", alt: "User avatar" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-view-woman-reading-menu-restaurant_23-2150384824.jpg", alt: "User avatar" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671570.jpg", alt: "User avatar" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/african-american-young-adult-laying-sofa-with-mockup-screen_482257-126491.jpg", alt: "User avatar" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-working-from-smart-house-with-automation-lighting-system_482257-8725.jpg", alt: "User avatar" }
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ developers"
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "Secure", icon: ShieldCheck },
|
||||
{ type: "text-icon", text: "Scalable", icon: Box },
|
||||
{ type: "text-icon", text: "Fast", icon: Zap },
|
||||
{ type: "text-icon", text: "Reliable", icon: Server },
|
||||
{ type: "text-icon", text: "Global", icon: Globe }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Zap,
|
||||
title: "Network Throughput",
|
||||
value: "4.2 TB/s",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Star,
|
||||
title: "Process Efficiency",
|
||||
value: "98.4%",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Globe,
|
||||
title: "Active Clusters",
|
||||
value: "1,204",
|
||||
},
|
||||
]}
|
||||
title="Performance Metrics"
|
||||
description="Monitor system health and data throughput in real-time."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Zap, title: "Network Throughput", value: "4.2 TB/s" },
|
||||
{ id: "m2", icon: Star, title: "Process Efficiency", value: "98.4%" },
|
||||
{ id: "m3", icon: Globe, title: "Active Clusters", value: "1,204" }
|
||||
]}
|
||||
title="Performance Metrics"
|
||||
description="Monitor system health and data throughput in real-time."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "System Kernel Logs",
|
||||
description: "Continuous real-time kernel logging with instant error detection.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/entrepreneur-holding-smartphone-with-greenscreen-template_482257-88027.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/travel-accessories-with-map-background_23-2148232447.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-infographic-template-with-photo_23-2148228380.jpg?_wi=2",
|
||||
imageAlt: "smartphone terminal interface screen",
|
||||
},
|
||||
{
|
||||
title: "Global Data Mapping",
|
||||
description: "Visualize your network traffic across the globe with geospatial precision.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-map-background-with-phone_23-2148232446.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/infographic-steps-neon-style_52683-30597.jpg",
|
||||
imageAlt: "smartphone terminal interface screen",
|
||||
},
|
||||
{
|
||||
title: "Active Process Management",
|
||||
description: "Optimize and manage your server resources via AI-driven commands.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036884.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-traveling-with-vaccination-passport_23-2149351529.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/global-communication-background-business-network-design_53876-160250.jpg?_wi=1",
|
||||
imageAlt: "smartphone terminal interface screen",
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Terminal Integrated Environment"
|
||||
description="Advanced tools for building, managing, and monitoring your digital assets."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "System Kernel Logs", description: "Continuous real-time kernel logging with instant error detection.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/entrepreneur-holding-smartphone-with-greenscreen-template_482257-88027.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/travel-accessories-with-map-background_23-2148232447.jpg" }
|
||||
},
|
||||
{
|
||||
title: "Global Data Mapping", description: "Visualize your network traffic across the globe with geospatial precision.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-map-background-with-phone_23-2148232446.jpg" }
|
||||
},
|
||||
{
|
||||
title: "Active Process Management", description: "Optimize and manage your server resources via AI-driven commands.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036884.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/young-adult-traveling-with-vaccination-passport_23-2149351529.jpg" }
|
||||
}
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Terminal Integrated Environment"
|
||||
description="Advanced tools for building, managing, and monitoring your digital assets."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Flexible Deployment Plans"
|
||||
description="Select the plan that fits your infrastructure needs."
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
tag: "Starter",
|
||||
price: "$29",
|
||||
period: "/mo",
|
||||
description: "Basic tools for individual developers.",
|
||||
button: {
|
||||
text: "Start Free Trial",
|
||||
href: "#contact",
|
||||
},
|
||||
featuresTitle: "Core Features",
|
||||
features: [
|
||||
"Standard AI access",
|
||||
"10GB Storage",
|
||||
"Email Support",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
tag: "Enterprise",
|
||||
price: "$199",
|
||||
period: "/mo",
|
||||
description: "Advanced scale for large organizations.",
|
||||
button: {
|
||||
text: "Contact Sales",
|
||||
href: "#contact",
|
||||
},
|
||||
featuresTitle: "Pro Features",
|
||||
features: [
|
||||
"Unlimited AI capacity",
|
||||
"500GB Storage",
|
||||
"24/7 Priority Support",
|
||||
"API Access",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Flexible Deployment Plans"
|
||||
description="Select the plan that fits your infrastructure needs."
|
||||
plans={[
|
||||
{
|
||||
id: "p1", tag: "Starter", price: "$29", period: "/mo", description: "Basic tools for individual developers.", button: { text: "Start Free Trial", href: "#contact" },
|
||||
featuresTitle: "Core Features", features: ["Standard AI access", "10GB Storage", "Email Support"]
|
||||
},
|
||||
{
|
||||
id: "p2", tag: "Enterprise", price: "$199", period: "/mo", description: "Advanced scale for large organizations.", button: { text: "Contact Sales", href: "#contact" },
|
||||
featuresTitle: "Pro Features", features: ["Unlimited AI capacity", "500GB Storage", "24/7 Priority Support", "API Access"]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Deployment"
|
||||
title="Initialize Your Workspace"
|
||||
description="Enter your email to receive your access credentials and start building immediately."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Deployment"
|
||||
title="Initialize Your Workspace"
|
||||
description="Enter your email to receive your access credentials and start building immediately."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/global-communication-background-business-network-design_53876-160250.jpg?_wi=2"
|
||||
logoText="Promake AI"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Dashboard",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Metrics",
|
||||
href: "#metrics",
|
||||
},
|
||||
{
|
||||
label: "Terminal",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/global-communication-background-business-network-design_53876-160250.jpg"
|
||||
logoText="Promake AI"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Dashboard", href: "#hero" },
|
||||
{ label: "Metrics", href: "#metrics" },
|
||||
{ label: "Terminal", href: "#features" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user