Merge version_5_1776877231874 into main #5
171
src/App.tsx
171
src/App.tsx
@@ -1,169 +1,12 @@
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
|
||||
import FooterSimpleReveal from '@/components/sections/footer/FooterSimpleReveal';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import MetricsMinimalCards from '@/components/sections/metrics/MetricsMinimalCards';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialDetailedCards from '@/components/sections/testimonial/TestimonialDetailedCards';
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import HomePage from "@/pages/HomePage";
|
||||
import PlansPage from "@/pages/PlansPage";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="FlowSync"
|
||||
navItems={[
|
||||
{ name: "Features", href: "#features" },
|
||||
{ name: "Pricing", href: "#pricing" },
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "FAQ", href: "#faq" }
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Get Started", href: "#contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
tag="Boost Productivity Today"
|
||||
title="Streamline Your Workflow with FlowSync"
|
||||
description="The all-in-one productivity platform designed to help teams work smarter, organize tasks, and hit every deadline with ease."
|
||||
primaryButton={{
|
||||
text: "Get Started", href: "#contact"
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More", href: "#about"
|
||||
}}
|
||||
testimonials={[
|
||||
{ name: "Sarah Chen", handle: "@sarahchen", text: "FlowSync changed how we manage our engineering sprints completely. Absolute game changer.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-confident-software-develop-1776869127352-4c4dae3e.png" },
|
||||
{ name: "Alex Rivet", handle: "@alexrivet", text: "Unmatched visibility into team projects. Our velocity has increased by 40%.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-creative-product-manager-w-1776869137170-01797df6.png" },
|
||||
{ name: "Jordan Lee", handle: "@jlee_prod", text: "Simple, powerful, and fast. Everything we needed for our cross-functional team.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-team-lead-bright-office-li-1776869146645-9d58f195.png" },
|
||||
{ name: "Morgan West", handle: "@morgan_w", text: "Finally, a centralized tool that keeps our remote team on track every single day.", rating: 5, imageSrc: "https://images.unsplash.com/photo-1762077656255-d367c3dc1cc8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyfHxicmFuZCUyMGxvZ28lMjBtb25vY2hyb21lfGVufDF8MHx8fDE3NzY4NjkxNjl8MA&ixlib=rb-4.1.0&q=80&w=1080" },
|
||||
{ name: "Sam Taylor", handle: "@staylor_ops", text: "The most intuitive interface I've used. Onboarding took less than an hour.", rating: 5, imageSrc: "https://images.unsplash.com/photo-1767354987491-20bbb34f05b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxNnx8bW9kZXJuJTIwZGlnaXRhbCUyMGJyYW5kfGVufDF8MHx8fDE3NzY4NjkxNzJ8MA&ixlib=rb-4.1.0&q=80&w=1080" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-futuristic-saas-productivity-dashboard-1776869089774-7db44c51.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted by Innovators"
|
||||
title="Used by high-growth startups globally"
|
||||
description="Join over 5,000+ teams who have transformed their productivity."
|
||||
names={["TechInnovate", "GlobalScale", "GrowthGenius", "FutureBound", "CloudBridge", "NexGenApps", "DataFlow"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Philosophy"
|
||||
title="Work Without Friction"
|
||||
description="FlowSync is built on the belief that complex processes shouldn't slow you down. We eliminate the noise, allowing your team to focus on the work that actually matters."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/business-professionals-collaborating-in--1776869099126-5718ae77.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesStatisticsCards
|
||||
tag="Key Capabilities"
|
||||
title="Built for High Performance"
|
||||
description="Comprehensive tools for tracking, scheduling, and collaboration."
|
||||
items={[
|
||||
{ title: "Real-time sync", description: "Keep everyone updated across devices instantly.", label: "Speed", value: "20ms" },
|
||||
{ title: "Smart Automation", description: "Eliminate repetitive tasks with AI-driven triggers.", label: "Efficiency", value: "85%" },
|
||||
{ title: "Data Insights", description: "Make informed decisions with advanced metrics.", label: "Analytics", value: "100%" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsMinimalCards
|
||||
tag="By the Numbers"
|
||||
metrics={[
|
||||
{ value: "1.2M", description: "Tasks Completed" },
|
||||
{ value: "500k", description: "Hours Saved" },
|
||||
{ value: "99.9%", description: "Uptime Reliability" }
|
||||
]}
|
||||
title="Measurable Impact"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialDetailedCards
|
||||
tag="User Stories"
|
||||
title="Loved by thousands of teams"
|
||||
description="See why industry leaders trust us for their productivity needs."
|
||||
testimonials={[
|
||||
{ title: "Incredible Results", quote: "Finally, a tool that keeps up with our rapid pace.", name: "David Kim", role: "VP Product", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-modern-entrepreneur-clean--1776869154777-03fc56ad.png" },
|
||||
{ title: "Seamless Integration", quote: "The API documentation is world-class, integration was a breeze.", name: "Elena Rodriguez", role: "Lead Architect", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-operations-manager-clean-o-1776869165140-91b64f75.png" },
|
||||
{ title: "Clean UI", quote: "Beautifully designed and extremely intuitive. My team loves it.", name: "Sarah Chen", role: "Design Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-confident-software-develop-1776869183611-fe51c1d6.png" },
|
||||
{ title: "Top Tier Support", quote: "Support response time is unmatched, always helpful.", name: "Alex Rivet", role: "Engineering Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-creative-product-manager-w-1776869192950-eebc0da0.png" },
|
||||
{ title: "Must Have", quote: "Can't imagine going back to our old stack.", name: "Jordan Lee", role: "Product Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-team-lead-bright-office-li-1776869203934-48bd0602.png" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingSimpleCards
|
||||
tag="Transparent Pricing"
|
||||
title="Simple Plans for Growing Teams"
|
||||
description="Choose the right plan for your team size and productivity needs."
|
||||
plans={[
|
||||
{ tag: "Starter", price: "$29/mo", description: "Perfect for freelancers and small projects.", features: ["Task Management", "Basic Integrations", "Email Support"] },
|
||||
{ tag: "Pro", price: "$99/mo", description: "Everything in Starter plus advanced workflows.", features: ["AI Automation", "Advanced Reporting", "Priority Support"] },
|
||||
{ tag: "Enterprise", price: "Custom", description: "Tailored solutions for large-scale organizations.", features: ["Dedicated Account Manager", "SSO & Security", "On-Prem Deployment"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Need Help?"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about getting started with FlowSync."
|
||||
items={[
|
||||
{ question: "Can I integrate with my existing tools?", answer: "Yes, we support integration with Slack, Jira, Github, and over 100 other apps." },
|
||||
{ question: "Is there a free trial available?", answer: "We offer a 14-day free trial on all Pro plans, no credit card required." },
|
||||
{ question: "How secure is my data?", answer: "Security is our top priority. We are SOC2 compliant and use end-to-end encryption." }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-conceptual-abstract-illustration-of-cu-1776869108850-371306a1.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitEmail
|
||||
tag="Get Started"
|
||||
title="Ready to scale your output?"
|
||||
description="Join the next generation of productive teams today."
|
||||
inputPlaceholder="Enter your professional email"
|
||||
buttonText="Start Free Trial"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-minimalist-high-tech-abstract-backgrou-1776869117294-9abef0b7.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimpleReveal
|
||||
brand="FlowSync"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Security", href: "#security" }]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#careers" }, { label: "Blog", href: "#blog" }]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }]
|
||||
}
|
||||
]}
|
||||
copyright="© 2024 FlowSync Productivity Inc. All rights reserved."
|
||||
links={[]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/plans" element={<PlansPage />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,22 +1,172 @@
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import { routes } from "@/routes";
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
|
||||
import FooterSimpleReveal from '@/components/sections/footer/FooterSimpleReveal';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import MetricsMinimalCards from '@/components/sections/metrics/MetricsMinimalCards';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialDetailedCards from '@/components/sections/testimonial/TestimonialDetailedCards';
|
||||
|
||||
const HomePage = () => {
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Logo"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Get Started", href: "#" }}
|
||||
/>
|
||||
<main className="pt-20 flex flex-col items-center justify-center min-h-[80vh] px-4">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-4">Welcome</h1>
|
||||
<p className="text-lg text-muted-foreground max-w-xl text-center">
|
||||
Your website content will appear here.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
logo="FlowSync"
|
||||
navItems={[
|
||||
{ name: "Features", href: "#features" },
|
||||
{ name: "Pricing", href: "#pricing" },
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "FAQ", href: "#faq" },
|
||||
{ name: "Plans", href: "/plans" },
|
||||
|
||||
export default HomePage;
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Get Started", href: "#contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
tag="Boost Productivity Today"
|
||||
title="Streamline Your Workflow with FlowSync"
|
||||
description="The all-in-one productivity platform designed to help teams work smarter, organize tasks, and hit every deadline with ease."
|
||||
primaryButton={{
|
||||
text: "Get Started", href: "#contact"
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More", href: "#about"
|
||||
}}
|
||||
testimonials={[
|
||||
{ name: "Sarah Chen", handle: "@sarahchen", text: "FlowSync changed how we manage our engineering sprints completely. Absolute game changer.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-confident-software-develop-1776869127352-4c4dae3e.png" },
|
||||
{ name: "Alex Rivet", handle: "@alexrivet", text: "Unmatched visibility into team projects. Our velocity has increased by 40%.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-creative-product-manager-w-1776869137170-01797df6.png" },
|
||||
{ name: "Jordan Lee", handle: "@jlee_prod", text: "Simple, powerful, and fast. Everything we needed for our cross-functional team.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-team-lead-bright-office-li-1776869146645-9d58f195.png" },
|
||||
{ name: "Morgan West", handle: "@morgan_w", text: "Finally, a centralized tool that keeps our remote team on track every single day.", rating: 5, imageSrc: "https://images.unsplash.com/photo-1762077656255-d367c3dc1cc8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyfHxicmFuZCUyMGxvZ28lMjBtb25vY2hyb21lfGVufDF8MHx8fDE3NzY4NjkxNjl8MA&ixlib=rb-4.1.0&q=80&w=1080" },
|
||||
{ name: "Sam Taylor", handle: "@staylor_ops", text: "The most intuitive interface I've used. Onboarding took less than an hour.", rating: 5, imageSrc: "https://images.unsplash.com/photo-1767354987491-20bbb34f05b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxNnx8bW9kZXJuJTIwZGlnaXRhbCUyMGJyYW5kfGVufDF8MHx8fDE3NzY4NjkxNzJ8MA&ixlib=rb-4.1.0&q=80&w=1080" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-futuristic-saas-productivity-dashboard-1776869089774-7db44c51.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted by Innovators"
|
||||
title="Used by high-growth startups globally"
|
||||
description="Join over 5,000+ teams who have transformed their productivity."
|
||||
names={["TechInnovate", "GlobalScale", "GrowthGenius", "FutureBound", "CloudBridge", "NexGenApps", "DataFlow"]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Philosophy"
|
||||
title="Work Without Friction"
|
||||
description="FlowSync is built on the belief that complex processes shouldn't slow you down. We eliminate the noise, allowing your team to focus on the work that actually matters."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/business-professionals-collaborating-in--1776869099126-5718ae77.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesStatisticsCards
|
||||
tag="Key Capabilities"
|
||||
title="Built for High Performance"
|
||||
description="Comprehensive tools for tracking, scheduling, and collaboration."
|
||||
items={[
|
||||
{ title: "Real-time sync", description: "Keep everyone updated across devices instantly.", label: "Speed", value: "20ms" },
|
||||
{ title: "Smart Automation", description: "Eliminate repetitive tasks with AI-driven triggers.", label: "Efficiency", value: "85%" },
|
||||
{ title: "Data Insights", description: "Make informed decisions with advanced metrics.", label: "Analytics", value: "100%" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsMinimalCards
|
||||
tag="By the Numbers"
|
||||
metrics={[
|
||||
{ value: "1.2M", description: "Tasks Completed" },
|
||||
{ value: "500k", description: "Hours Saved" },
|
||||
{ value: "99.9%", description: "Uptime Reliability" }
|
||||
]}
|
||||
title="Measurable Impact"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialDetailedCards
|
||||
tag="User Stories"
|
||||
title="Loved by thousands of teams"
|
||||
description="See why industry leaders trust us for their productivity needs."
|
||||
testimonials={[
|
||||
{ title: "Incredible Results", quote: "Finally, a tool that keeps up with our rapid pace.", name: "David Kim", role: "VP Product", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-modern-entrepreneur-clean--1776869154777-03fc56ad.png" },
|
||||
{ title: "Seamless Integration", quote: "The API documentation is world-class, integration was a breeze.", name: "Elena Rodriguez", role: "Lead Architect", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-operations-manager-clean-o-1776869165140-91b64f75.png" },
|
||||
{ title: "Clean UI", quote: "Beautifully designed and extremely intuitive. My team loves it.", name: "Sarah Chen", role: "Design Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-confident-software-develop-1776869183611-fe51c1d6.png" },
|
||||
{ title: "Top Tier Support", quote: "Support response time is unmatched, always helpful.", name: "Alex Rivet", role: "Engineering Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-creative-product-manager-w-1776869192950-eebc0da0.png" },
|
||||
{ title: "Must Have", quote: "Can't imagine going back to our old stack.", name: "Jordan Lee", role: "Product Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/portrait-of-a-team-lead-bright-office-li-1776869203934-48bd0602.png" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingSimpleCards
|
||||
tag="Transparent Pricing"
|
||||
title="Simple Plans for Growing Teams"
|
||||
description="Choose the right plan for your team size and productivity needs."
|
||||
plans={[
|
||||
{ tag: "Starter", price: "$29/mo", description: "Perfect for freelancers and small projects.", features: ["Task Management", "Basic Integrations", "Email Support"] },
|
||||
{ tag: "Pro", price: "$99/mo", description: "Everything in Starter plus advanced workflows.", features: ["AI Automation", "Advanced Reporting", "Priority Support"] },
|
||||
{ tag: "Enterprise", price: "Custom", description: "Tailored solutions for large-scale organizations.", features: ["Dedicated Account Manager", "SSO & Security", "On-Prem Deployment"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Need Help?"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about getting started with FlowSync."
|
||||
items={[
|
||||
{ question: "Can I integrate with my existing tools?", answer: "Yes, we support integration with Slack, Jira, Github, and over 100 other apps." },
|
||||
{ question: "Is there a free trial available?", answer: "We offer a 14-day free trial on all Pro plans, no credit card required." },
|
||||
{ question: "How secure is my data?", answer: "Security is our top priority. We are SOC2 compliant and use end-to-end encryption." }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-conceptual-abstract-illustration-of-cu-1776869108850-371306a1.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitEmail
|
||||
tag="Get Started"
|
||||
title="Ready to scale your output?"
|
||||
description="Join the next generation of productive teams today."
|
||||
inputPlaceholder="Enter your professional email"
|
||||
buttonText="Start Free Trial"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-minimalist-high-tech-abstract-backgrou-1776869117294-9abef0b7.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimpleReveal
|
||||
brand="FlowSync"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Security", href: "#security" }]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#careers" }, { label: "Blog", href: "#blog" }]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }]
|
||||
}
|
||||
]}
|
||||
copyright="© 2024 FlowSync Productivity Inc. All rights reserved."
|
||||
links={[]}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
102
src/pages/PlansPage.tsx
Normal file
102
src/pages/PlansPage.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import { routes } from "@/routes";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
export default function PlansPage() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-background text-foreground">
|
||||
<NavbarCentered
|
||||
logo="Brand"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Get Started", href: "/contact" }}
|
||||
/>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative flex flex-col items-center justify-center py-20 text-center md:py-32">
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">Flexible Plans for Every Need</h1>
|
||||
<p className="mt-4 max-w-2xl text-lg text-muted-foreground sm:text-xl">Choose the perfect plan to power your business forward.</p>
|
||||
<div className="mt-8 flex gap-4">
|
||||
<Button variant="primary" size="lg" href="#pricing">View Pricing</Button>
|
||||
<Button variant="secondary" size="lg" href="/contact">Contact Sales</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section id="pricing" className="w-full py-20 md:py-32 bg-card text-card-foreground">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Simple, Transparent Pricing</h2>
|
||||
<p className="mt-4 max-w-2xl mx-auto text-lg text-muted-foreground">No hidden fees. Just straightforward plans designed to grow with you.</p>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{/* Starter Plan */}
|
||||
<div className="flex flex-col rounded-lg border border-border bg-background p-8 shadow-sm">
|
||||
<h3 className="text-2xl font-bold">Starter</h3>
|
||||
<p className="mt-4 text-4xl font-extrabold">$19<span className="text-lg font-medium text-muted-foreground">/month</span></p>
|
||||
<ul className="mt-6 flex-1 space-y-3 text-left text-muted-foreground">
|
||||
<li><span>✓</span> 5 Projects</li>
|
||||
<li><span>✓</span> Basic Analytics</li>
|
||||
<li><span>✓</span> Community Support</li>
|
||||
</ul>
|
||||
<Button className="mt-8 w-full" variant="primary" href="/signup">Get Started</Button>
|
||||
</div>
|
||||
|
||||
{/* Pro Plan (highlighted) */}
|
||||
<div className="relative flex flex-col rounded-lg border-2 border-primary-cta bg-background p-8 shadow-lg">
|
||||
<div className="absolute -top-3 right-0 -mr-3 rounded-full bg-primary-cta px-3 py-1 text-xs font-semibold uppercase text-primary-cta-foreground">Popular</div>
|
||||
<h3 className="text-2xl font-bold">Pro</h3>
|
||||
<p className="mt-4 text-4xl font-extrabold">$49<span className="text-lg font-medium text-muted-foreground">/month</span></p>
|
||||
<ul className="mt-6 flex-1 space-y-3 text-left text-muted-foreground">
|
||||
<li><span>✓</span> Unlimited Projects</li>
|
||||
<li><span>✓</span> Advanced Analytics</li>
|
||||
<li><span>✓</span> Priority Support</li>
|
||||
<li><span>✓</span> Custom Integrations</li>
|
||||
</ul>
|
||||
<Button className="mt-8 w-full" variant="primary" href="/signup">Choose Pro</Button>
|
||||
</div>
|
||||
|
||||
{/* Enterprise Plan */}
|
||||
<div className="flex flex-col rounded-lg border border-border bg-background p-8 shadow-sm">
|
||||
<h3 className="text-2xl font-bold">Enterprise</h3>
|
||||
<p className="mt-4 text-4xl font-extrabold">Custom</p>
|
||||
<ul className="mt-6 flex-1 space-y-3 text-left text-muted-foreground">
|
||||
<li><span>✓</span> All Pro Features</li>
|
||||
<li><span>✓</span> Dedicated Account Manager</li>
|
||||
<li><span>✓</span> SLA Guarantee</li>
|
||||
<li><span>✓</span> On-premise Deployment</li>
|
||||
</ul>
|
||||
<Button className="mt-8 w-full" variant="secondary" href="/contact">Contact Sales</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer Section */}
|
||||
<footer className="w-full py-12 md:py-16 bg-card text-card-foreground">
|
||||
<div className="container mx-auto px-4 grid grid-cols-1 gap-8 md:grid-cols-4">
|
||||
<div className="md:col-span-1">
|
||||
<h3 className="text-xl font-bold">Brand</h3>
|
||||
<p className="mt-4 text-muted-foreground">Building the future, one pixel at a time.</p>
|
||||
<div className="mt-6 flex space-x-4">
|
||||
<a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a>
|
||||
<a href="#" className="text-muted-foreground hover:text-foreground">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-1">
|
||||
<h4 className="text-lg font-semibold">Company</h4>
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li><a href="/about" className="text-muted-foreground hover:text-foreground">About</a></li>
|
||||
<li><a href="/plans" className="text-muted-foreground hover:text-foreground">Pricing</a></li>
|
||||
<li><a href="/contact" className="text-muted-foreground hover:text-foreground">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
{/* Additional footer content can go here if needed */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 border-t border-border pt-8 text-center text-sm text-muted-foreground">
|
||||
© 2024 Brand. All rights reserved.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,4 +6,5 @@ export interface Route {
|
||||
|
||||
export const routes: Route[] = [
|
||||
{ path: '/', label: 'Home', pageFile: 'HomePage' },
|
||||
{ path: '/plans', label: 'Plans', pageFile: 'PlansPage' },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user