Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9cb8e56ff7 | |||
| 8d447cb42f | |||
| 8e2446fd46 | |||
| 27b76a64c4 | |||
| b838fa04c1 |
238
src/app/page.tsx
238
src/app/page.tsx
@@ -48,155 +48,107 @@ export default function SaasTemplatePage() {
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="SaasApp"
|
||||
brandName="SaaSBuild"
|
||||
button={{ text: "Get Started", href: "#" }}
|
||||
/>
|
||||
<HeroCentered
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
avatars={avatars}
|
||||
avatarText="Trusted by 1000+ users"
|
||||
title="Build Modern Web Experiences"
|
||||
description="Create stunning, responsive websites with our comprehensive component library designed"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started", onClick: () => console.log("Get Started clicked"),
|
||||
},
|
||||
{
|
||||
text: "Learn More", onClick: () => console.log("Learn More clicked"),
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "Lightning Fast", icon: Zap },
|
||||
{ type: "text-icon", text: "Enterprise Security", icon: Shield },
|
||||
{ type: "text-icon", text: "99.9% Uptime", icon: Rocket },
|
||||
{ type: "text-icon", text: "Precision Targeting", icon: Target },
|
||||
{ type: "text-icon", text: "AI Powered", icon: Sparkles },
|
||||
]}
|
||||
/>
|
||||
<FeatureBento
|
||||
features={features}
|
||||
animationType="none"
|
||||
tag="Features"
|
||||
title="Powerful Features"
|
||||
description="Everything you need to build and scale your product"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<FeatureBorderGlow
|
||||
tag="Why Choose Us"
|
||||
tagIcon={Users}
|
||||
title="Built by developers, for developers"
|
||||
description="We understand the challenges of modern software development because we face them every day."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Layers,
|
||||
title: "Modular Architecture", description: "Build with composable components that scale with your needs"},
|
||||
{
|
||||
icon: Code,
|
||||
title: "Developer Experience", description: "Clean APIs and comprehensive documentation for faster development"},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Enterprise Security", description: "Bank-level encryption and compliance with industry standards"},
|
||||
{
|
||||
icon: Rocket,
|
||||
title: "Lightning Fast", description: "Optimized for performance with sub-second response times"},
|
||||
]}
|
||||
/>
|
||||
<TestimonialCardFifteen
|
||||
testimonial="This platform has completely transformed how we build products. The developer experience is unmatched."
|
||||
rating={5}
|
||||
author="Sarah Chen, CTO at TechFlow"
|
||||
avatars={avatars}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<PricingCardEight
|
||||
tag="Pricing"
|
||||
tagIcon={Sparkles}
|
||||
title="Simple, transparent pricing"
|
||||
description="Choose the plan that works best for you. All plans include a 14-day free trial."
|
||||
animationType="opacity"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter", badge: "Starter", badgeIcon: Zap,
|
||||
price: "$19/mo", subtitle: "Perfect for individuals", buttons: [
|
||||
{ text: "Get Started", onClick: () => console.log("Starter clicked") },
|
||||
],
|
||||
features: [
|
||||
"Up to 5 projects", "Basic analytics", "24/7 email support", "API access"],
|
||||
},
|
||||
{
|
||||
id: "pro", badge: "Pro", badgeIcon: Rocket,
|
||||
price: "$49/mo", subtitle: "For growing teams", buttons: [
|
||||
{ text: "Get Started", onClick: () => console.log("Pro clicked") },
|
||||
],
|
||||
features: [
|
||||
"Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations", "Team collaboration"],
|
||||
},
|
||||
{
|
||||
id: "enterprise", badge: "Enterprise", badgeIcon: Crown,
|
||||
price: "$99/mo", subtitle: "For large organizations", buttons: [
|
||||
{ text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
|
||||
],
|
||||
features: [
|
||||
"Everything in Pro", "Dedicated account manager", "Custom SLA", "On-premise deployment", "Advanced security"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ContactCenter
|
||||
tag="Contact"
|
||||
tagIcon={Mail}
|
||||
title="Ready to get started?"
|
||||
description="Join thousands of developers building better products with our platform."
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Get Early Access"
|
||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||
/>
|
||||
<div id="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
avatars={avatars}
|
||||
avatarText="Trusted by 1000+ developers"
|
||||
title="Engineering Modern Web Experiences"
|
||||
description="Accelerate your development lifecycle with our specialized toolkit for high-performance SaaS applications."
|
||||
buttons={[
|
||||
{ text: "Get Started", onClick: () => console.log("Get Started clicked") },
|
||||
{ text: "Learn More", onClick: () => console.log("Learn More clicked") },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "Fast", icon: Zap },
|
||||
{ type: "text-icon", text: "Secure", icon: Shield },
|
||||
{ type: "text-icon", text: "Scalable", icon: Rocket },
|
||||
{ type: "text-icon", text: "Reliable", icon: Target },
|
||||
{ type: "text-icon", text: "Optimized", icon: Sparkles },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="features">
|
||||
<FeatureBento
|
||||
features={features}
|
||||
animationType="none"
|
||||
tag="Core Architecture"
|
||||
title="Purpose-Built Infrastructure"
|
||||
description="Engineering-grade foundations to handle complex application logic."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="about">
|
||||
<FeatureBorderGlow
|
||||
tag="Why Choose Us"
|
||||
tagIcon={Users}
|
||||
title="Built by developers, for developers"
|
||||
description="We provide the modular blocks needed to iterate faster and ship more effectively."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Layers, title: "Modular Architecture", description: "Build with composable components that scale with your needs" },
|
||||
{ icon: Code, title: "Developer Experience", description: "Clean APIs and comprehensive documentation for faster development" },
|
||||
{ icon: Shield, title: "Enterprise Security", description: "Bank-level encryption and compliance with industry standards" },
|
||||
{ icon: Rocket, title: "Lightning Fast", description: "Optimized for performance with sub-second response times" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="This toolkit is the industry standard for shipping high-performance products at scale."
|
||||
rating={5}
|
||||
author="Sarah Chen, Software Architect"
|
||||
avatars={avatars}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing">
|
||||
<PricingCardEight
|
||||
tag="Licensing"
|
||||
tagIcon={Sparkles}
|
||||
title="Simple, transparent pricing"
|
||||
description="Choose the plan that fits your deployment strategy."
|
||||
animationType="opacity"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "starter", badge: "Starter", badgeIcon: Zap, price: "$19/mo", subtitle: "Individual access", features: ["Up to 5 projects", "Basic analytics", "API access"], buttons: [{ text: "Select", onClick: () => {} }] },
|
||||
{ id: "pro", badge: "Pro", badgeIcon: Rocket, price: "$49/mo", subtitle: "Growing teams", features: ["Unlimited projects", "Priority support", "Custom integrations"], buttons: [{ text: "Select", onClick: () => {} }] },
|
||||
{ id: "enterprise", badge: "Enterprise", badgeIcon: Crown, price: "$99/mo", subtitle: "Large-scale operations", features: ["Dedicated manager", "SLA compliance", "On-premise option"], buttons: [{ text: "Select", onClick: () => {} }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<ContactCenter
|
||||
tag="Contact"
|
||||
tagIcon={Mail}
|
||||
title="Build Better Together"
|
||||
description="Ready to discuss your next technical challenge? Let's connect."
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Get Started"
|
||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||
/>
|
||||
</div>
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Integrations", href: "#" },
|
||||
{ label: "Changelog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Status", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
],
|
||||
},
|
||||
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Status", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
copyrightText="2024 SaasApp. All rights reserved."
|
||||
copyrightText="2024 SaaSBuild. All rights reserved."
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user