Merge version_2_1776869619014 into main #2
173
src/App.tsx
173
src/App.tsx
@@ -1,169 +1,14 @@
|
||||
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 { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import HomePage from "@/pages/HomePage";
|
||||
import PricingFeaturesPage from "@/pages/PricingFeaturesPage";
|
||||
|
||||
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>
|
||||
</>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/pricing-features" element={<PricingFeaturesPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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: "PricingFeatures", href: "/pricing-features" },
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
107
src/pages/PricingFeaturesPage.tsx
Normal file
107
src/pages/PricingFeaturesPage.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { routes } from "@/routes"
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered"
|
||||
import Button from "@/components/ui/Button"
|
||||
|
||||
const PricingFeaturesPage = () => {
|
||||
const navItems = routes.map((r) => ({ name: r.label, href: r.path }))
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<NavbarCentered navItems={navItems} />
|
||||
<main>
|
||||
{/* Pricing Section */}
|
||||
<section className="py-16 md:py-24 lg:py-32 bg-background">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Simple, transparent pricing</h2>
|
||||
<p className="text-lg md:text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">Choose the plan that's right for your business. No hidden fees, no surprises.</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{/* Starter Plan */}
|
||||
<div className="bg-card text-card-foreground p-8 rounded-lg shadow-lg border border-border flex flex-col">
|
||||
<h3 className="text-2xl font-semibold mb-4">Starter</h3>
|
||||
<p className="text-5xl font-bold mb-2">$29</p>
|
||||
<p className="text-muted-foreground mb-6">/month</p>
|
||||
<ul className="text-left space-y-3 mb-8 flex-grow">
|
||||
<li>✅ 5 Projects</li>
|
||||
<li>✅ Basic Analytics</li>
|
||||
<li>✅ Email Support</li>
|
||||
<li>✅ 1GB Storage</li>
|
||||
</ul>
|
||||
<Button variant="outline" className="w-full">Get Started</Button>
|
||||
</div>
|
||||
|
||||
{/* Pro Plan */}
|
||||
<div className="bg-card text-card-foreground p-8 rounded-lg shadow-lg border border-border flex flex-col relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 bg-primary-cta text-primary-cta-foreground text-xs font-bold px-3 py-1 rounded-bl-lg">Popular</div>
|
||||
<h3 className="text-2xl font-semibold mb-4">Pro</h3>
|
||||
<p className="text-5xl font-bold mb-2">$99</p>
|
||||
<p className="text-muted-foreground mb-6">/month</p>
|
||||
<ul className="text-left space-y-3 mb-8 flex-grow">
|
||||
<li>✅ Unlimited Projects</li>
|
||||
<li>✅ Advanced Analytics</li>
|
||||
<li>✅ Priority Support</li>
|
||||
<li>✅ 10GB Storage</li>
|
||||
<li>✅ Custom Integrations</li>
|
||||
</ul>
|
||||
<Button variant="default" className="w-full">Start Free Trial</Button>
|
||||
</div>
|
||||
|
||||
{/* Enterprise Plan */}
|
||||
<div className="bg-card text-card-foreground p-8 rounded-lg shadow-lg border border-border flex flex-col">
|
||||
<h3 className="text-2xl font-semibold mb-4">Enterprise</h3>
|
||||
<p className="text-5xl font-bold mb-2">Custom</p>
|
||||
<p className="text-muted-foreground mb-6"></p>
|
||||
<ul className="text-left space-y-3 mb-8 flex-grow">
|
||||
<li>✅ All Pro Features</li>
|
||||
<li>✅ Dedicated Account Manager</li>
|
||||
<li>✅ SLA Guarantee</li>
|
||||
<li>✅ On-premise Deployment</li>
|
||||
<li>✅ 24/7 Phone Support</li>
|
||||
</ul>
|
||||
<Button variant="outline" className="w-full">Contact Sales</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-16 md:py-24 lg:py-32 bg-background">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">Powerful features designed for growth</h2>
|
||||
<p className="text-lg md:text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">Everything you need to scale your business, all in one place.</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{/* Feature 1 */}
|
||||
<div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
|
||||
<div className="text-4xl mb-4">🚀</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Blazing Fast Performance</h3>
|
||||
<p className="text-muted-foreground">Experience unparalleled speed and responsiveness across all your applications.</p>
|
||||
</div>
|
||||
{/* Feature 2 */}
|
||||
<div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
|
||||
<div className="text-4xl mb-4">🔒</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Robust Security</h3>
|
||||
<p className="text-muted-foreground">Your data is protected with enterprise-grade security measures and compliance.</p>
|
||||
</div>
|
||||
{/* Feature 3 */}
|
||||
<div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
|
||||
<div className="text-4xl mb-4">💡</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Intuitive User Interface</h3>
|
||||
<p className="text-muted-foreground">Designed for ease of use, our platform helps you get more done with less effort.</p>
|
||||
</div>
|
||||
{/* Feature 4 */}
|
||||
<div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
|
||||
<div className="text-4xl mb-4">📈</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Advanced Analytics</h3>
|
||||
<p className="text-muted-foreground">Gain deep insights into your performance with customizable dashboards and reports.</p>
|
||||
</div>
|
||||
{/* Feature 5 */}
|
||||
<div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
|
||||
<div className="text-4xl mb-4">🤝</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Seamless Collaboration</h3>
|
||||
<p className="text-muted-foreground">Work together effortlessly with built-in tools for team communication and project sharing.</p>
|
||||
</div>
|
||||
{/* Feature 6 */}
|
||||
<div className="bg-card text-card-foreground p-6 rounded-lg shadow-md border border-border text-left">
|
||||
<div className="text-4xl mb-4">🌐</div>
|
||||
<h3 className="text-xl font-semibold mb-2">
|
||||
@@ -6,4 +6,5 @@ export interface Route {
|
||||
|
||||
export const routes: Route[] = [
|
||||
{ path: '/', label: 'Home', pageFile: 'HomePage' },
|
||||
{ path: '/pricing-features', label: 'Pricing Features', pageFile: 'PricingFeaturesPage' },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user