Merge version_2_1776939432950 into main #1
346
src/App.tsx
346
src/App.tsx
@@ -1,344 +1,12 @@
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
|
||||
import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
|
||||
import { Award, Users, Zap } from "lucide-react";
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import HomePage from "@/pages/HomePage";
|
||||
import ProductsPage from "@/pages/ProductsPage";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarCentered
|
||||
logo="Flow"
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
tag="Productivity Reimagined"
|
||||
title="Streamline Your Workflow, Elevate Your Results"
|
||||
description="Flow helps teams organize tasks, automate workflows, and hit deadlines without the chaos."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-clean-modern-saas-software-dashboard-i-1776939335175-602df7e8.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted by Teams"
|
||||
title="Empowering Companies Worldwide"
|
||||
description="Join thousands of businesses that streamline productivity with Flow."
|
||||
names={[
|
||||
"InnovateTech",
|
||||
"GrowthHub",
|
||||
"GlobalSolutions",
|
||||
"FutureOps",
|
||||
"NextGen Systems",
|
||||
"ScaleUp",
|
||||
"Velocity Group",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesStatisticsCards
|
||||
tag="Advanced Features"
|
||||
title="Built for Peak Performance"
|
||||
description="Everything your team needs to stay productive, synced, and efficient every single day."
|
||||
items={[
|
||||
{
|
||||
title: "Smart Task Routing",
|
||||
description: "Automatically assign tasks based on team capacity and skill sets.",
|
||||
label: "Time Saved",
|
||||
value: "40%",
|
||||
},
|
||||
{
|
||||
title: "Automated Workflows",
|
||||
description: "Reduce manual entry by automating recurring project tasks.",
|
||||
label: "Processes",
|
||||
value: "120+",
|
||||
},
|
||||
{
|
||||
title: "Real-time Collaboration",
|
||||
description: "Keep everyone aligned with live project updates and discussions.",
|
||||
label: "Active Users",
|
||||
value: "50k+",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Mission"
|
||||
title="Efficiency Without Compromise"
|
||||
description="We believe in creating tools that empower creators to focus on the work that actually matters. Flow was built to remove friction, not add it."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-modern-professional-workspace-with-a-p-1776939335201-f4bc224f.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Real Results"
|
||||
title="Measurable Impact"
|
||||
description="Don't just take our word for it. See the numbers."
|
||||
metrics={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Tasks Completed",
|
||||
value: "1.2M+",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Teams Onboarded",
|
||||
value: "5,000+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Avg. Growth Rate",
|
||||
value: "3x",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Testimonials"
|
||||
title="What Our Users Say"
|
||||
description="See why top teams trust Flow to manage their complex projects."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Chen",
|
||||
role: "Head of Operations",
|
||||
quote: "Flow transformed our team workflow. We saved 15+ hours per week.",
|
||||
imageSrc: "https://images.unsplash.com/photo-1758600587839-56ba05596c69?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHw1fHxjYXN1YWwlMjBwcm9mZXNzaW9uYWwlMjBoZWFkc2hvdCUyMGZyaWVuZGx5fGVufDF8MHx8fDE3NzY5MzkzMjd8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
},
|
||||
{
|
||||
name: "Mark Johnson",
|
||||
role: "Product Lead",
|
||||
quote: "The automation tools are intuitive and incredibly powerful. A total game changer.",
|
||||
imageSrc: "https://images.unsplash.com/photo-1589616710474-78fef3b06aa3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyMXx8Y3JlYXRpdmUlMjBwcm9mZXNzaW9uYWwlMjBwb3J0cmFpdCUyMHNtYXJ0JTIwY2FzdWFsfGVufDF8MHx8fDE3NzY5MzkzMjd8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
},
|
||||
{
|
||||
name: "Emily Rodriguez",
|
||||
role: "Creative Director",
|
||||
quote: "Finally, a platform that feels like it was designed for how we actually work.",
|
||||
imageSrc: "https://images.unsplash.com/photo-1758599543111-5db56cfa9a59?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyNnx8aGFwcHklMjBwcm9mZXNzaW9uYWwlMjB3b21hbiUyMGJ1c2luZXNzJTIwcG9ydHJhaXR8ZW58MXwwfHx8MTc3NjkzOTMyOHww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
},
|
||||
{
|
||||
name: "David Kim",
|
||||
role: "Engineering Manager",
|
||||
quote: "The integration capabilities have unified our entire tech stack seamlessly.",
|
||||
imageSrc: "https://images.unsplash.com/photo-1650728287460-37c20c1c6a30?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHw1fHxzbWlsaW5nJTIwYnVzaW5lc3MlMjBjb25zdWx0YW50JTIwYnJpZ2h0JTIwcG9ydHJhaXR8ZW58MXwwfHx8MTc3NjkzOTMyOHww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
},
|
||||
{
|
||||
name: "Linda Wu",
|
||||
role: "Marketing Manager",
|
||||
quote: "Managing our global team has never been simpler. Highly recommended.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yltro0",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCenteredCards
|
||||
tag="Pricing Plans"
|
||||
title="Scalable for Every Stage"
|
||||
description="Choose the perfect plan for your team size and productivity needs."
|
||||
plans={[
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$29/mo",
|
||||
description: "Perfect for individuals and small startups.",
|
||||
features: [
|
||||
"Task Automation",
|
||||
"Basic Reporting",
|
||||
"Email Support",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Professional",
|
||||
price: "$99/mo",
|
||||
description: "The ideal choice for growing teams.",
|
||||
features: [
|
||||
"Advanced Automation",
|
||||
"Detailed Analytics",
|
||||
"Priority Support",
|
||||
"Team Integrations",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Enterprise",
|
||||
price: "Custom",
|
||||
description: "Everything for scaling organizations.",
|
||||
features: [
|
||||
"Dedicated Manager",
|
||||
"Security Audit",
|
||||
"API Access",
|
||||
"SSO Support",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about getting started and optimizing Flow."
|
||||
items={[
|
||||
{
|
||||
question: "Is there a free trial?",
|
||||
answer: "Yes, we offer a 14-day free trial on all Pro plans.",
|
||||
},
|
||||
{
|
||||
question: "Can I cancel anytime?",
|
||||
answer: "Yes, cancel at any time directly through your account settings.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer enterprise support?",
|
||||
answer: "Absolutely. Our Enterprise plan includes a dedicated account manager.",
|
||||
},
|
||||
{
|
||||
question: "Is my data secure?",
|
||||
answer: "Data security is our top priority. We are SOC2 compliant.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCta
|
||||
tag="Start Today"
|
||||
text="Ready to skyrocket your team's productivity? Start your journey with Flow today."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Sales",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimpleMedia
|
||||
brand="Flow"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "API Docs",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyright="© 2024 Flow Productivity Tools. All rights reserved."
|
||||
links={[
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1573867901325-b55d3928d6c9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyN3x8c29mdHdhcmUlMjBzdGFydHVwJTIwaWNvbiUyMGRlc2lnbnxlbnwxfDB8fHwxNzc2OTM5MzMwfDA&ixlib=rb-4.1.0&q=80&w=1080"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/products" element={<ProductsPage />} />
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,22 +1,347 @@
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import { routes } from "@/routes";
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesStatisticsCards from '@/components/sections/features/FeaturesStatisticsCards';
|
||||
import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
|
||||
import { Award, Users, Zap } from "lucide-react";
|
||||
|
||||
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="Flow"
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
{ name: "Products", href: "/products" },
|
||||
|
||||
export default HomePage;
|
||||
]}
|
||||
ctaButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
tag="Productivity Reimagined"
|
||||
title="Streamline Your Workflow, Elevate Your Results"
|
||||
description="Flow helps teams organize tasks, automate workflows, and hit deadlines without the chaos."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-clean-modern-saas-software-dashboard-i-1776939335175-602df7e8.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Trusted by Teams"
|
||||
title="Empowering Companies Worldwide"
|
||||
description="Join thousands of businesses that streamline productivity with Flow."
|
||||
names={[
|
||||
"InnovateTech",
|
||||
"GrowthHub",
|
||||
"GlobalSolutions",
|
||||
"FutureOps",
|
||||
"NextGen Systems",
|
||||
"ScaleUp",
|
||||
"Velocity Group",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesStatisticsCards
|
||||
tag="Advanced Features"
|
||||
title="Built for Peak Performance"
|
||||
description="Everything your team needs to stay productive, synced, and efficient every single day."
|
||||
items={[
|
||||
{
|
||||
title: "Smart Task Routing",
|
||||
description: "Automatically assign tasks based on team capacity and skill sets.",
|
||||
label: "Time Saved",
|
||||
value: "40%",
|
||||
},
|
||||
{
|
||||
title: "Automated Workflows",
|
||||
description: "Reduce manual entry by automating recurring project tasks.",
|
||||
label: "Processes",
|
||||
value: "120+",
|
||||
},
|
||||
{
|
||||
title: "Real-time Collaboration",
|
||||
description: "Keep everyone aligned with live project updates and discussions.",
|
||||
label: "Active Users",
|
||||
value: "50k+",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Mission"
|
||||
title="Efficiency Without Compromise"
|
||||
description="We believe in creating tools that empower creators to focus on the work that actually matters. Flow was built to remove friction, not add it."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-modern-professional-workspace-with-a-p-1776939335201-f4bc224f.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Real Results"
|
||||
title="Measurable Impact"
|
||||
description="Don't just take our word for it. See the numbers."
|
||||
metrics={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Tasks Completed",
|
||||
value: "1.2M+",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Teams Onboarded",
|
||||
value: "5,000+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Avg. Growth Rate",
|
||||
value: "3x",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Testimonials"
|
||||
title="What Our Users Say"
|
||||
description="See why top teams trust Flow to manage their complex projects."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Chen",
|
||||
role: "Head of Operations",
|
||||
quote: "Flow transformed our team workflow. We saved 15+ hours per week.",
|
||||
imageSrc: "https://images.unsplash.com/photo-1758600587839-56ba05596c69?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHw1fHxjYXN1YWwlMjBwcm9mZXNzaW9uYWwlMjBoZWFkc2hvdCUyMGZyaWVuZGx5fGVufDF8MHx8fDE3NzY5MzkzMjd8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
},
|
||||
{
|
||||
name: "Mark Johnson",
|
||||
role: "Product Lead",
|
||||
quote: "The automation tools are intuitive and incredibly powerful. A total game changer.",
|
||||
imageSrc: "https://images.unsplash.com/photo-1589616710474-78fef3b06aa3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyMXx8Y3JlYXRpdmUlMjBwcm9mZXNzaW9uYWwlMjBwb3J0cmFpdCUyMHNtYXJ0JTIwY2FzdWFsfGVufDF8MHx8fDE3NzY5MzkzMjd8MA&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
},
|
||||
{
|
||||
name: "Emily Rodriguez",
|
||||
role: "Creative Director",
|
||||
quote: "Finally, a platform that feels like it was designed for how we actually work.",
|
||||
imageSrc: "https://images.unsplash.com/photo-1758599543111-5db56cfa9a59?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyNnx8aGFwcHklMjBwcm9mZXNzaW9uYWwlMjB3b21hbiUyMGJ1c2luZXNzJTIwcG9ydHJhaXR8ZW58MXwwfHx8MTc3NjkzOTMyOHww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
},
|
||||
{
|
||||
name: "David Kim",
|
||||
role: "Engineering Manager",
|
||||
quote: "The integration capabilities have unified our entire tech stack seamlessly.",
|
||||
imageSrc: "https://images.unsplash.com/photo-1650728287460-37c20c1c6a30?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHw1fHxzbWlsaW5nJTIwYnVzaW5lc3MlMjBjb25zdWx0YW50JTIwYnJpZ2h0JTIwcG9ydHJhaXR8ZW58MXwwfHx8MTc3NjkzOTMyOHww&ixlib=rb-4.1.0&q=80&w=1080",
|
||||
},
|
||||
{
|
||||
name: "Linda Wu",
|
||||
role: "Marketing Manager",
|
||||
quote: "Managing our global team has never been simpler. Highly recommended.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yltro0",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCenteredCards
|
||||
tag="Pricing Plans"
|
||||
title="Scalable for Every Stage"
|
||||
description="Choose the perfect plan for your team size and productivity needs."
|
||||
plans={[
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$29/mo",
|
||||
description: "Perfect for individuals and small startups.",
|
||||
features: [
|
||||
"Task Automation",
|
||||
"Basic Reporting",
|
||||
"Email Support",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Professional",
|
||||
price: "$99/mo",
|
||||
description: "The ideal choice for growing teams.",
|
||||
features: [
|
||||
"Advanced Automation",
|
||||
"Detailed Analytics",
|
||||
"Priority Support",
|
||||
"Team Integrations",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: "Enterprise",
|
||||
price: "Custom",
|
||||
description: "Everything for scaling organizations.",
|
||||
features: [
|
||||
"Dedicated Manager",
|
||||
"Security Audit",
|
||||
"API Access",
|
||||
"SSO Support",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about getting started and optimizing Flow."
|
||||
items={[
|
||||
{
|
||||
question: "Is there a free trial?",
|
||||
answer: "Yes, we offer a 14-day free trial on all Pro plans.",
|
||||
},
|
||||
{
|
||||
question: "Can I cancel anytime?",
|
||||
answer: "Yes, cancel at any time directly through your account settings.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer enterprise support?",
|
||||
answer: "Absolutely. Our Enterprise plan includes a dedicated account manager.",
|
||||
},
|
||||
{
|
||||
question: "Is my data secure?",
|
||||
answer: "Data security is our top priority. We are SOC2 compliant.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCta
|
||||
tag="Start Today"
|
||||
text="Ready to skyrocket your team's productivity? Start your journey with Flow today."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Sales",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimpleMedia
|
||||
brand="Flow"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "API Docs",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyright="© 2024 Flow Productivity Tools. All rights reserved."
|
||||
links={[
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1573867901325-b55d3928d6c9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyN3x8c29mdHdhcmUlMjBzdGFydHVwJTIwaWNvbiUyMGRlc2lnbnxlbnwxfDB8fHwxNzc2OTM5MzMwfDA&ixlib=rb-4.1.0&q=80&w=1080"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
30
src/pages/ProductsPage.tsx
Normal file
30
src/pages/ProductsPage.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { routes } from "@/routes";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import ProductMediaCards from "@/components/sections/product/ProductMediaCards";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-background text-foreground">
|
||||
<NavbarCentered
|
||||
logo="Brand"
|
||||
navItems={[{"name":"Home","href":"/"},{"name":"Products","href":"/products"},{"name":"Solutions","href":"/solutions"},{"name":"About Us","href":"/about"},{"name":"Contact","href":"/contact"}]}
|
||||
ctaButton={{"text":"View Pricing","href":"/pricing"}}
|
||||
/>
|
||||
<ProductMediaCards
|
||||
tag="Shop Our Collection"
|
||||
title="Explore Brand's Premium Products"
|
||||
description="Discover a curated selection of high-quality products designed to enhance your life. From innovative gadgets to essential everyday items, find exactly what you need with Brand."
|
||||
primaryButton={{"text":"Shop Now","href":"/products#products-list"}}
|
||||
secondaryButton={{"text":"Learn More About Brand","href":"/about"}}
|
||||
products={[{"name":"Brand Smartwatch Pro","price":"$299.99","imageSrc":"https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"},{"name":"Brand Wireless Earbuds","price":"$149.99","imageSrc":"https://images.unsplash.com/photo-1606220588913-b3fdb71830a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"},{"name":"Brand Portable Speaker","price":"$99.99","imageSrc":"https://images.unsplash.com/photo-1545127398-1d071765c911?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"},{"name":"Brand Ergonomic Keyboard","price":"$129.99","imageSrc":"https://images.unsplash.com/photo-1587820101416-091f32a74c26?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"},{"name":"Brand HD Webcam","price":"$79.99","imageSrc":"https://images.unsplash.com/photo-1629429462823-3801f9b3297a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"}]}
|
||||
/>
|
||||
<FooterSimple
|
||||
brand="Brand"
|
||||
columns={[{"title":"Products","items":[{"label":"All Products","href":"/products"},{"label":"New Releases","href":"/products/new"},{"label":"Best Sellers","href":"/products/best-sellers"}]},{"title":"Company","items":[{"label":"About Us","href":"/about"},{"label":"Careers","href":"/careers"},{"label":"Blog","href":"/blog"}]},{"title":"Support","items":[{"label":"FAQ","href":"/faq"},{"label":"Contact Us","href":"/contact"},{"label":"Documentation","href":"/docs"}]}]}
|
||||
copyright="© 2024 Brand. All rights reserved."
|
||||
links={[{"label":"Privacy Policy","href":"/privacy"},{"label":"Terms of Service","href":"/terms"},{"label":"Cookie Settings","href":"/cookie-settings"}]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,4 +6,5 @@ export interface Route {
|
||||
|
||||
export const routes: Route[] = [
|
||||
{ path: '/', label: 'Home', pageFile: 'HomePage' },
|
||||
{ path: '/products', label: 'Products', pageFile: 'ProductsPage' },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user