Merge version_2 into main #1
80
src/app/about/page.tsx
Normal file
80
src/app/about/page.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import AboutMetric from "@/components/sections/about/AboutMetric";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code, Award, UsersRound, Globe, Handshake } from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
const navItems = [
|
||||
{ name: "Features", href: "/#features" },
|
||||
{ name: "Pricing", href: "/pricing" },
|
||||
{ name: "About", href: "/about" },
|
||||
{ name: "Contact", href: "/#contact" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
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: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="SaasApp"
|
||||
button={{ text: "Get Started", href: "/#" }}
|
||||
/>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="About Our Company"
|
||||
metrics={[
|
||||
{ icon: UsersRound, label: "Team Members", value: "50+" },
|
||||
{ icon: Award, label: "Years in Business", value: "10+" },
|
||||
{ icon: Globe, label: "Countries Served", value: "30+" },
|
||||
{ icon: Handshake, label: "Happy Clients", value: "500+" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="2024 SaasApp. All rights reserved."
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
93
src/app/contact/page.tsx
Normal file
93
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Mail, HelpCircle, Zap, Shield, Rocket, Target, Sparkles, Crown, Users, Layers, Code } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
const navItems = [
|
||||
{ name: "Features", id: "/#features" },
|
||||
{ name: "Pricing", id: "/#pricing" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="SaasApp"
|
||||
button={{ text: "Get Started", href: "/#" }}
|
||||
/>
|
||||
<ContactSplit
|
||||
tag="Get in Touch"
|
||||
title="We'd Love to Hear From You"
|
||||
description="Have questions, feedback, or just want to say hello? Reach out to us using the form below."
|
||||
tagIcon={Mail}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Your Email"
|
||||
buttonText="Send Message"
|
||||
termsText="By sending this message you're confirming that you agree with our Privacy Policy."
|
||||
onSubmit={(email) => console.log('Contact form submitted with email:', email)}
|
||||
/>
|
||||
<FaqDouble
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to the most common questions about our service."
|
||||
tagIcon={HelpCircle}
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: '1', title: 'How can I contact support?', content: 'You can reach our support team via email at support@saasapp.com or by filling out the contact form on this page.' },
|
||||
{ id: '2', title: 'What are your operating hours?', content: 'Our support team is available Monday to Friday, 9 AM to 5 PM EST.' },
|
||||
{ id: '3', title: 'Do you offer a knowledge base?', content: 'Yes, we have a comprehensive knowledge base with articles and tutorials to help you get started.' },
|
||||
{ id: '4', title: 'Where can I find pricing information?', content: 'Our pricing details are available on the pricing page. You can find a link in the navigation bar.' },
|
||||
]}
|
||||
/>
|
||||
<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: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="2024 SaasApp. All rights reserved."
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
127
src/app/page.tsx
127
src/app/page.tsx
@@ -9,15 +9,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
|
||||
import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code } from "lucide-react";
|
||||
|
||||
export default function SaasTemplatePage() {
|
||||
const navItems = [
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Features", id: "/#features" },
|
||||
{ name: "Pricing", id: "/#pricing" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const avatars = [
|
||||
@@ -29,28 +29,18 @@ export default function SaasTemplatePage() {
|
||||
|
||||
const features: FeatureCard[] = [
|
||||
{
|
||||
bentoComponent: "globe",
|
||||
title: "Global Reach",
|
||||
description: "Connect with users worldwide through our distributed infrastructure",
|
||||
},
|
||||
bentoComponent: "globe", title: "Global Reach", description: "Connect with users worldwide through our distributed infrastructure"},
|
||||
{
|
||||
bentoComponent: "marquee",
|
||||
variant: "text",
|
||||
centerIcon: Zap,
|
||||
bentoComponent: "marquee", variant: "text", centerIcon: Zap,
|
||||
texts: ["Fast", "Reliable", "Secure", "Scalable", "Modern"],
|
||||
title: "Built for Speed",
|
||||
description: "Lightning fast performance with optimized delivery",
|
||||
},
|
||||
title: "Built for Speed", description: "Lightning fast performance with optimized delivery"},
|
||||
{
|
||||
bentoComponent: "3d-stack-cards",
|
||||
items: [
|
||||
bentoComponent: "3d-stack-cards", items: [
|
||||
{ icon: Shield, title: "Security", subtitle: "Enterprise-grade", detail: "Bank-level encryption" },
|
||||
{ icon: Rocket, title: "Performance", subtitle: "99.9% uptime", detail: "Always available" },
|
||||
{ icon: Target, title: "Accuracy", subtitle: "100% reliable", detail: "Data you can trust" },
|
||||
],
|
||||
title: "Built for Scale",
|
||||
description: "Deploy to any region with automatic failover support",
|
||||
}
|
||||
title: "Built for Scale", description: "Deploy to any region with automatic failover support"}
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -69,12 +59,10 @@ export default function SaasTemplatePage() {
|
||||
description="Create stunning, responsive websites with our comprehensive component library designed"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
onClick: () => console.log("Get Started clicked"),
|
||||
text: "Get Started", onClick: () => console.log("Get Started clicked"),
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
onClick: () => console.log("Learn More clicked"),
|
||||
text: "Learn More", onClick: () => console.log("Learn More clicked"),
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
@@ -105,24 +93,16 @@ export default function SaasTemplatePage() {
|
||||
features={[
|
||||
{
|
||||
icon: Layers,
|
||||
title: "Modular Architecture",
|
||||
description: "Build with composable components that scale with your needs",
|
||||
},
|
||||
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",
|
||||
},
|
||||
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",
|
||||
},
|
||||
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",
|
||||
},
|
||||
title: "Lightning Fast", description: "Optimized for performance with sub-second response times"},
|
||||
]}
|
||||
/>
|
||||
<TestimonialCardFifteen
|
||||
@@ -144,91 +124,51 @@ export default function SaasTemplatePage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter",
|
||||
badge: "Starter",
|
||||
badgeIcon: Zap,
|
||||
price: "$19/mo",
|
||||
subtitle: "Perfect for individuals",
|
||||
buttons: [
|
||||
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",
|
||||
],
|
||||
"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: [
|
||||
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",
|
||||
],
|
||||
"Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations", "Team collaboration"],
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
badge: "Enterprise",
|
||||
badgeIcon: Crown,
|
||||
price: "$99/mo",
|
||||
subtitle: "For large organizations",
|
||||
buttons: [
|
||||
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",
|
||||
],
|
||||
"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)}
|
||||
/>
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/#features" },
|
||||
{ label: "Pricing", href: "/#pricing" },
|
||||
{ label: "Integrations", href: "#" },
|
||||
{ label: "Changelog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About", href: "#about" },
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "/#about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
@@ -236,8 +176,7 @@ export default function SaasTemplatePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
|
||||
95
src/app/pricing/page.tsx
Normal file
95
src/app/pricing/page.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code, DollarSign, Gem, Star } from "lucide-react";
|
||||
|
||||
export default function PricingPage() {
|
||||
const navItems = [
|
||||
{ name: "Features", href: "/#features" },
|
||||
{ name: "Pricing", href: "/pricing" },
|
||||
{ name: "About", href: "/about" },
|
||||
{ name: "Contact", href: "/#contact" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
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: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="SaasApp"
|
||||
button={{ text: "Get Started", href: "/#" }}
|
||||
/>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
tag="Pricing"
|
||||
tagIcon={DollarSign}
|
||||
title="Simple, transparent pricing"
|
||||
description="Choose the plan that works best for you. All plans include a 14-day free trial."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "starter", title: "Starter", price: "$19", period: "/month", features: [
|
||||
"Up to 5 projects", "Basic analytics", "24/7 email support", "API access"],
|
||||
button: { text: "Get Started", href: "#" },
|
||||
},
|
||||
{
|
||||
id: "pro", title: "Pro", price: "$49", period: "/month", features: [
|
||||
"Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations", "Team collaboration"],
|
||||
button: { text: "Get Started", href: "#" },
|
||||
},
|
||||
{
|
||||
id: "enterprise", title: "Enterprise", price: "$99", period: "/month", features: [
|
||||
"Everything in Pro", "Dedicated account manager", "Custom SLA", "On-premise deployment", "Advanced security"],
|
||||
button: { text: "Contact Sales", href: "#" },
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
copyrightText="2024 SaasApp. All rights reserved."
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user