Switch to version 1: modified src/pages/HomePage.tsx
This commit is contained in:
@@ -1,172 +1,22 @@
|
||||
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 NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import { routes } from "@/routes";
|
||||
|
||||
|
||||
export default function HomePage() {
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<div className="min-h-screen bg-background">
|
||||
<NavbarCentered
|
||||
logo="FlowSync"
|
||||
navItems={[
|
||||
{ name: "Features", href: "#features" },
|
||||
{ name: "Pricing", href: "#pricing" },
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "FAQ", href: "#faq" },
|
||||
{ name: "PricingFeatures", href: "/pricing-features" },
|
||||
|
||||
]}
|
||||
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>
|
||||
</>
|
||||
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>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
|
||||
Reference in New Issue
Block a user