Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 167ce33142 | |||
| 5497a1923d | |||
| b405fe41a1 | |||
| 0796fe9ad3 | |||
| 34ad1b12cf | |||
| cbd9bf6a5f | |||
| 9f3ca78887 |
172
src/app/page.tsx
172
src/app/page.tsx
@@ -33,14 +33,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "Pricing", id: "#pricing"},
|
||||
{
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "#faq"},
|
||||
{ name: "Menu", id: "#menu" },
|
||||
{ name: "Gallery", id: "#gallery" },
|
||||
{ name: "Reservations", id: "#reservations" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
]}
|
||||
brandName="NovaFlow"
|
||||
/>
|
||||
@@ -51,16 +48,36 @@ export default function LandingPage() {
|
||||
logoText="NovaFlow: The Future of Automation."
|
||||
description="Streamline your digital workflow with AI-driven precision and real-time intelligence designed for modern teams."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Free", href: "#"},
|
||||
{
|
||||
text: "Book Demo", href: "#contact"},
|
||||
{ text: "Start Free", href: "#" },
|
||||
{ text: "Book Demo", href: "#contact" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/face-recognition-personal-identification-collage_23-2150165577.jpg"
|
||||
imageAlt="saas dashboard neon blue"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reservations" data-section="reservations">
|
||||
<ContactSplit
|
||||
tag="Booking"
|
||||
title="Table Reservations"
|
||||
description="Secure your spot with our automated booking system."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
onSubmit={(email) => console.log("Booking for: ", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="location" data-section="location">
|
||||
<ContactSplit
|
||||
tag="Visit Us"
|
||||
title="Find Our Location"
|
||||
description="We are located at the heart of the tech district. Visit us for a personalized demo or consultation."
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-motion-flow-background-with-digital-particles_1048-12441.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
@@ -77,35 +94,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "AI Automation", description: "Automate routine tasks with sophisticated machine learning models.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/transparent-tablet-with-smart-speaker-smart-home-technology_53876-98543.jpg", imageAlt: "ai neural network visualization"},
|
||||
items: [
|
||||
{
|
||||
text: "Workflow orchestration", icon: Zap,
|
||||
},
|
||||
{
|
||||
text: "Predictive insights", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
text: "Self-healing pipelines", icon: Shield,
|
||||
},
|
||||
],
|
||||
title: "AI Automation", description: "Automate routine tasks with sophisticated machine learning models.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/transparent-tablet-with-smart-speaker-smart-home-technology_53876-98543.jpg", imageAlt: "ai neural network visualization"},
|
||||
items: [{ text: "Workflow orchestration", icon: Zap }, { text: "Predictive insights", icon: Sparkles }, { text: "Self-healing pipelines", icon: Shield }],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Real-time Analytics", description: "Monitor your performance with live, data-rich dashboards.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-flowing-network-connections-design-with-connecting-lines-dots_1048-13615.jpg", imageAlt: "analytics dashboard real-time data"},
|
||||
items: [
|
||||
{
|
||||
text: "Instant reporting", icon: BarChart,
|
||||
},
|
||||
{
|
||||
text: "Custom event tracking", icon: Target,
|
||||
},
|
||||
{
|
||||
text: "Data visualization", icon: Layers,
|
||||
},
|
||||
],
|
||||
title: "Real-time Analytics", description: "Monitor your performance with live, data-rich dashboards.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-flowing-network-connections-design-with-connecting-lines-dots_1048-13615.jpg", imageAlt: "analytics dashboard real-time data"},
|
||||
items: [{ text: "Instant reporting", icon: BarChart }, { text: "Custom event tracking", icon: Target }, { text: "Data visualization", icon: Layers }],
|
||||
reverse: true
|
||||
},
|
||||
]}
|
||||
@@ -120,12 +117,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "99.9%", title: "Uptime", description: "Always available", imageSrc: "http://img.b2bpic.net/free-vector/flat-time-logo-templates-collection_23-2148944209.jpg", imageAlt: "tech uptime icon minimalist"},
|
||||
{
|
||||
id: "m2", value: "24/7", title: "Support", description: "Global assistance", imageSrc: "http://img.b2bpic.net/free-vector/discord-social-media-marketing-background_271628-348.jpg", imageAlt: "tech support icon futuristic"},
|
||||
{
|
||||
id: "m3", value: "500+", title: "Integrations", description: "Connect easily", imageSrc: "http://img.b2bpic.net/free-photo/settings-icon-front-side-white-background_187299-40209.jpg", imageAlt: "tech integration icon minimal"},
|
||||
{ id: "m1", value: "99.9%", title: "Uptime", description: "Always available", imageSrc: "http://img.b2bpic.net/free-vector/flat-time-logo-templates-collection_23-2148944209.jpg", imageAlt: "tech uptime icon minimalist" },
|
||||
{ id: "m2", value: "24/7", title: "Support", description: "Global assistance", imageSrc: "http://img.b2bpic.net/free-vector/discord-social-media-marketing-background_271628-348.jpg", imageAlt: "tech support icon futuristic" },
|
||||
{ id: "m3", value: "500+", title: "Integrations", description: "Connect easily", imageSrc: "http://img.b2bpic.net/free-photo/settings-icon-front-side-white-background_187299-40209.jpg", imageAlt: "tech integration icon minimal" },
|
||||
]}
|
||||
title="Impact at Scale"
|
||||
description="Proven results for innovative teams."
|
||||
@@ -137,7 +131,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Stripe", "Linear", "Notion", "Vercel", "Slack", "Figma", "GitHub"]}
|
||||
"Stripe", "Linear", "Notion", "Vercel", "Slack", "Figma", "GitHub"]}
|
||||
title="Trusted by leaders"
|
||||
description="Join the world's most innovative organizations."
|
||||
/>
|
||||
@@ -149,16 +143,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Jane Doe", handle: "@jane", testimonial: "Transformative software.", imageSrc: "http://img.b2bpic.net/free-photo/pensive-middle-aged-man-with-beard-hairstyle-dressed-elegant-blue-suit-textured-dark-background-studio_613910-19917.jpg", imageAlt: "executive portrait professional dark"},
|
||||
{
|
||||
id: "t2", name: "John Smith", handle: "@john", testimonial: "Incredible speed.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg", imageAlt: "software developer portrait professional"},
|
||||
{
|
||||
id: "t3", name: "Alice Wong", handle: "@alice", testimonial: "Essential platform.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-cv_23-2149927574.jpg", imageAlt: "creative designer professional portrait"},
|
||||
{
|
||||
id: "t4", name: "Bob Chen", handle: "@bob", testimonial: "Game changer for us.", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-using-phone-office-staying-late-by-night_1303-27097.jpg", imageAlt: "manager professional corporate headshot"},
|
||||
{
|
||||
id: "t5", name: "Eve Davis", handle: "@eve", testimonial: "Best in class tools.", imageSrc: "http://img.b2bpic.net/free-photo/manufacturing-analyst-reviewing-solar-panel-production-workflow_482257-125954.jpg", imageAlt: "engineer professional portrait tech"},
|
||||
{ id: "t1", name: "Jane Doe", handle: "@jane", testimonial: "Transformative software.", imageSrc: "http://img.b2bpic.net/free-photo/pensive-middle-aged-man-with-beard-hairstyle-dressed-elegant-blue-suit-textured-dark-background-studio_613910-19917.jpg", imageAlt: "executive portrait professional dark" },
|
||||
{ id: "t2", name: "John Smith", handle: "@john", testimonial: "Incredible speed.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg", imageAlt: "software developer portrait professional" },
|
||||
{ id: "t3", name: "Alice Wong", handle: "@alice", testimonial: "Essential platform.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-cv_23-2149927574.jpg", imageAlt: "creative designer professional portrait" },
|
||||
{ id: "t4", name: "Bob Chen", handle: "@bob", testimonial: "Game changer for us.", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-using-phone-office-staying-late-by-night_1303-27097.jpg", imageAlt: "manager professional corporate headshot" },
|
||||
{ id: "t5", name: "Eve Davis", handle: "@eve", testimonial: "Best in class tools.", imageSrc: "http://img.b2bpic.net/free-photo/manufacturing-analyst-reviewing-solar-panel-production-workflow_482257-125954.jpg", imageAlt: "engineer professional portrait tech" },
|
||||
]}
|
||||
title="Loved by builders"
|
||||
description="See why teams choose NovaFlow."
|
||||
@@ -171,18 +160,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1", badge: "Entry", price: "$29/mo", subtitle: "For individuals", features: [
|
||||
"Feature A", "Feature B", "Support"],
|
||||
},
|
||||
{
|
||||
id: "p2", badge: "Pro", price: "$79/mo", subtitle: "Best for teams", features: [
|
||||
"All Entry features", "Advanced API", "Priority"],
|
||||
},
|
||||
{
|
||||
id: "p3", badge: "Enterprise", price: "$199/mo", subtitle: "For scaleups", features: [
|
||||
"Dedicated support", "Custom Integrations", "SLA"],
|
||||
},
|
||||
{ id: "p1", badge: "Entry", price: "$29/mo", subtitle: "For individuals", features: ["Feature A", "Feature B", "Support"] },
|
||||
{ id: "p2", badge: "Pro", price: "$79/mo", subtitle: "Best for teams", features: ["All Entry features", "Advanced API", "Priority"] },
|
||||
{ id: "p3", badge: "Enterprise", price: "$199/mo", subtitle: "For scaleups", features: ["Dedicated support", "Custom Integrations", "SLA"] },
|
||||
]}
|
||||
title="Simple Pricing"
|
||||
description="Transparent plans for your scaling startup."
|
||||
@@ -193,68 +173,28 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "Can I upgrade anytime?", content: "Yes, scale easily."},
|
||||
{
|
||||
id: "f2", title: "Do you offer trials?", content: "Yes, 14 days free."},
|
||||
{
|
||||
id: "f3", title: "Is support included?", content: "Yes, 24/7 included."},
|
||||
{
|
||||
id: "f4", title: "Can I request custom features?", content: "Our Enterprise team loves feedback."},
|
||||
{
|
||||
id: "f5", title: "Is my data secure?", content: "We employ enterprise-grade security."},
|
||||
{ id: "f1", title: "Can I upgrade anytime?", content: "Yes, scale easily." },
|
||||
{ id: "f2", title: "Do you offer trials?", content: "Yes, 14 days free." },
|
||||
{ id: "f3", title: "Is support included?", content: "Yes, 24/7 included." },
|
||||
{ id: "f4", title: "Can I request custom features?", content: "Our Enterprise team loves feedback." },
|
||||
{ id: "f5", title: "Is my data secure?", content: "We employ enterprise-grade security." },
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "animated-grid"}}
|
||||
tag="Get Started"
|
||||
title="Ready to build?"
|
||||
description="Join thousands of builders today."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-motion-flow-background-with-digital-particles_1048-12441.jpg"
|
||||
imageAlt="3D motion flow background with digital particles"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="NovaFlow"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{
|
||||
label: "Features", href: "#features"},
|
||||
{
|
||||
label: "Pricing", href: "#pricing"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social", items: [
|
||||
{
|
||||
label: "Twitter", href: "#"},
|
||||
{
|
||||
label: "GitHub", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#"},
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ title: "Social", items: [{ label: "Twitter", href: "#" }, { label: "GitHub", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--background: #f6f0e9;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #2b180a;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta: #efe7dd;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #535353;
|
||||
--background-accent: #106EFB;
|
||||
--accent: #94877c;
|
||||
--background-accent: #afa094;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user