Merge version_3_1781362275603 into main #4
@@ -1,31 +1,243 @@
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly; this shell only fixes render order.
|
||||
|
||||
import LightRaysCenterBackground from "@/components/ui/LightRaysCenterBackground";
|
||||
import { StyleProvider } from "@/components/ui/StyleProvider";
|
||||
import HeroBillboardFloatingCards from "@/components/sections/hero/HeroBillboardFloatingCards";
|
||||
import FeaturesGridSplit from "@/components/sections/features/FeaturesGridSplit";
|
||||
import FeaturesMediaCards from "@/components/sections/features/FeaturesMediaCards";
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import FeaturesSection from './HomePage/sections/Features';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import BlogSection from './HomePage/sections/Blog';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
import MetricsFeatureCards from "@/components/sections/metrics/MetricsFeatureCards";
|
||||
import PricingLayeredCards from "@/components/sections/pricing/PricingLayeredCards";
|
||||
import TestimonialDetailedCards from "@/components/sections/testimonial/TestimonialDetailedCards";
|
||||
import FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
|
||||
import BlogSimpleCards from "@/components/sections/blog/BlogSimpleCards";
|
||||
import ContactCta from "@/components/sections/contact/ContactCta";
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<FeaturesSection />
|
||||
<MetricsSection />
|
||||
<PricingSection />
|
||||
<TestimonialsSection />
|
||||
<FaqSection />
|
||||
<BlogSection />
|
||||
<ContactSection />
|
||||
</>
|
||||
<StyleProvider heroBackground="none" siteBackground="none" buttonVariant="expand">
|
||||
<div className="fixed inset-0 -z-10 opacity-25 pointer-events-none">
|
||||
<LightRaysCenterBackground position="absolute" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardFloatingCards
|
||||
avatarsSrc={[
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-1.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-2.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-3.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-4.webp",
|
||||
]}
|
||||
avatarsLabel="Trusted by 10k+ users"
|
||||
title="AI-Powered Email Campaigns That Actually Convert"
|
||||
description="Create, personalize, and optimize email campaigns at scale. Powered by advanced AI that learns what your audience wants."
|
||||
primaryButton={{ text: "Start Free Trial", href: "#" }}
|
||||
secondaryButton={{ text: "Watch Demo", href: "#" }}
|
||||
note="No credit card required"
|
||||
floatingCardsSrc={[
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-1.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-2.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-3.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-4.webp",
|
||||
]}
|
||||
imageSrc="https://storage.googleapis.com/webild/default/templates/ai-email-platform/dashboard.webp?_wi=1"
|
||||
logosSrc={[
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-1.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-2.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-3.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-4.webp",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesGridSplit
|
||||
tag="Features"
|
||||
title="Everything You Need to Scale"
|
||||
description="From team workflows to real-time analytics, Flashly gives you the tools to grow faster."
|
||||
topItems={[
|
||||
{ title: "Unify and Analyze All Your Data", description: "Connect internal docs, third-party tools, and real-time inputs into a single intelligent interface. Let AI surface insights that drive smarter, more confident business decisions.", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-collaborate.webp?_wi=1" },
|
||||
{ title: "Automate High-Frequency Workflows", description: "AI Supply agents break down complex tasks into clear, traceable steps. Eliminate repetitive work and scale your team's output with unmatched efficiency and precision.", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-track.webp?_wi=1" },
|
||||
]}
|
||||
bottomItem={{
|
||||
title: "Accelerate Execution with Reliable Autonomy",
|
||||
description: "Our agents don't just assist — they complete tasks end-to-end with accountability and speed. Track progress, refine outputs, and get results faster.",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-optimize.webp?_wi=1",
|
||||
primaryButton: { text: "View use cases", href: "#" },
|
||||
avatarsSrc: [
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-1.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-2.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-3.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-4.webp",
|
||||
],
|
||||
avatarsLabel: "Trusted by 300+ clients",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="By the Numbers"
|
||||
title="Results That Speak for Themselves"
|
||||
description="Flashly helps teams send smarter campaigns and see real impact."
|
||||
metrics={[
|
||||
{
|
||||
value: "98%",
|
||||
title: "Deliverability Rate",
|
||||
features: ["Advanced domain authentication", "Real-time bounce monitoring", "Automatic list hygiene"],
|
||||
},
|
||||
{
|
||||
value: "3.2x",
|
||||
title: "Higher Open Rates",
|
||||
features: ["AI-optimized subject lines", "Smart send-time prediction", "Personalized preview text"],
|
||||
},
|
||||
{
|
||||
value: "45%",
|
||||
title: "More Conversions",
|
||||
features: ["Dynamic content blocks", "Behavioral targeting", "Automated A/B testing"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FeaturesMediaCards
|
||||
tag="How It Works"
|
||||
title="Built for Modern Teams"
|
||||
description="Powerful tools that help you work smarter, move faster, and deliver results."
|
||||
items={[
|
||||
{
|
||||
title: "Domains",
|
||||
description: "Get verified domains set up in minutes. Ensure maximum deliverability with proper authentication and DNS configuration.",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/how-it-works-domains.webp",
|
||||
},
|
||||
{
|
||||
title: "Emails",
|
||||
description: "Create and send beautiful, personalized email campaigns at scale with AI-powered content and smart scheduling.",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/how-it-works-emails.webp",
|
||||
},
|
||||
{
|
||||
title: "Notifications",
|
||||
description: "Track customer replies and engagement in real time. Never miss a response with instant notification alerts.",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/how-it-works-notifications.webp",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingLayeredCards
|
||||
tag="Pricing"
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Start free. Scale when you're ready. No hidden fees."
|
||||
plans={[
|
||||
{ tag: "Starter", price: "$0/mo", description: "For individuals just getting started with email marketing.", primaryButton: { text: "Get Started Free", href: "#" }, features: ["1,000 emails per month", "Basic templates", "Email support", "Analytics dashboard"] },
|
||||
{ tag: "Pro", price: "$29/mo", description: "For growing teams that need more power and flexibility.", primaryButton: { text: "Start Free Trial", href: "#" }, features: ["50,000 emails per month", "AI subject line optimizer", "Advanced segmentation", "A/B testing", "Priority support", "Custom templates"] },
|
||||
{ tag: "Enterprise", price: "$99/mo", description: "For large organizations with advanced needs.", primaryButton: { text: "Contact Sales", href: "#" }, features: ["Unlimited emails", "Dedicated IP address", "Custom integrations", "SSO & team management", "Dedicated account manager", "SLA guarantee", "Advanced API access"] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialDetailedCards
|
||||
tag="Testimonials"
|
||||
title="Loved by Marketing Teams"
|
||||
description="See what our customers have to say about Flashly."
|
||||
testimonials={[
|
||||
{
|
||||
title: "Game-changer for our email strategy",
|
||||
quote: "We switched to Flashly six months ago and our open rates have nearly tripled. The AI suggestions are incredibly accurate and save us hours every week.",
|
||||
name: "Sarah Chen",
|
||||
role: "Head of Marketing, Lumino",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp?_wi=1",
|
||||
},
|
||||
{
|
||||
title: "Best ROI on any tool we use",
|
||||
quote: "The automation workflows alone paid for the subscription in the first month. Our team can now focus on strategy instead of manual sends.",
|
||||
name: "Marcus Rivera",
|
||||
role: "Growth Lead, NovaBrand",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-2.webp",
|
||||
},
|
||||
{
|
||||
title: "Finally, email that just works",
|
||||
quote: "Setup took 15 minutes. Within a week we had our first automated campaign running. The deliverability is the best we've ever seen.",
|
||||
name: "Erik Lindqvist",
|
||||
role: "Founder, Canopy",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-3.webp",
|
||||
},
|
||||
{
|
||||
title: "Incredible support and product",
|
||||
quote: "Every time we've had a question, the team responds within minutes. The product keeps getting better with every update. Truly world-class.",
|
||||
name: "James Park",
|
||||
role: "CTO, AdScale",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp?_wi=2",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqTwoColumn
|
||||
tag="FAQ"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about Flashly."
|
||||
items={[
|
||||
{ question: "What is Flashly?", answer: "Flashly is an AI-powered email marketing platform that helps you create, send, and optimize email campaigns at scale. From smart subject lines to automated workflows, we handle the heavy lifting so you can focus on growing your business." },
|
||||
{ question: "Do I need technical skills to use it?", answer: "Not at all. Flashly is designed for marketers, not engineers. Our drag-and-drop editor and pre-built templates make it easy to create beautiful emails in minutes." },
|
||||
{ question: "How does the AI optimization work?", answer: "Our AI analyzes your audience behavior, past campaign performance, and industry benchmarks to suggest the best subject lines, send times, and content variations for maximum engagement." },
|
||||
{ question: "Can I import my existing contacts?", answer: "Yes. You can import contacts from CSV files, or connect directly with your CRM, Shopify store, or other platforms through our native integrations." },
|
||||
{ question: "Is there a free plan?", answer: "Absolutely. Our Starter plan is completely free and includes up to 1,000 emails per month, basic templates, and access to our analytics dashboard. No credit card required." },
|
||||
{ question: "What integrations do you support?", answer: "We integrate with Shopify, Stripe, Zapier, Salesforce, HubSpot, Slack, and dozens more. You can also use our API to build custom integrations." },
|
||||
{ question: "How is deliverability handled?", answer: "We maintain a 98% deliverability rate through advanced domain authentication, automatic list hygiene, real-time bounce monitoring, and dedicated IP options on higher plans." },
|
||||
{ question: "Can I cancel anytime?", answer: "Yes. All plans are month-to-month with no long-term contracts. You can upgrade, downgrade, or cancel at any time from your account settings." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogSimpleCards
|
||||
tag="Blog"
|
||||
title="Latest from the Blog"
|
||||
description="Tips, strategies, and insights to level up your email marketing."
|
||||
items={[
|
||||
{
|
||||
category: "Strategy",
|
||||
title: "How to Write Subject Lines That Get Opened",
|
||||
excerpt: "Learn the psychology behind high-performing subject lines and how AI can help you craft the perfect hook every time.",
|
||||
authorName: "Sarah Chen",
|
||||
authorImageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp",
|
||||
date: "May 8, 2026",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-subject-lines.webp?_wi=1",
|
||||
},
|
||||
{
|
||||
category: "Tutorial",
|
||||
title: "Setting Up Your First Automated Workflow",
|
||||
excerpt: "A step-by-step guide to creating welcome sequences, abandoned cart emails, and re-engagement campaigns.",
|
||||
authorName: "Marcus Rivera",
|
||||
authorImageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-2.webp",
|
||||
date: "May 5, 2026",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-automated-workflow.webp?_wi=1",
|
||||
},
|
||||
{
|
||||
category: "Insights",
|
||||
title: "Email Marketing Benchmarks for 2026",
|
||||
excerpt: "We analyzed over 10 million campaigns to bring you the latest open rate, click rate, and conversion benchmarks by industry.",
|
||||
authorName: "Priya Sharma",
|
||||
authorImageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-3.webp",
|
||||
date: "May 1, 2026",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-benchmarks.webp?_wi=1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCta
|
||||
tag="Get Started"
|
||||
text="Ready to transform your email marketing? Start your free trial today and see results in minutes."
|
||||
primaryButton={{ text: "Start Free Trial", href: "#" }}
|
||||
secondaryButton={{ text: "Talk to Sales", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</StyleProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ export default function BlogSection(): React.JSX.Element {
|
||||
authorName: "Sarah Chen",
|
||||
authorImageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp",
|
||||
date: "May 8, 2026",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-subject-lines.webp",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-subject-lines.webp?_wi=2",
|
||||
},
|
||||
{
|
||||
category: "Tutorial",
|
||||
@@ -28,7 +28,7 @@ export default function BlogSection(): React.JSX.Element {
|
||||
authorName: "Marcus Rivera",
|
||||
authorImageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-2.webp",
|
||||
date: "May 5, 2026",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-automated-workflow.webp",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-automated-workflow.webp?_wi=2",
|
||||
},
|
||||
{
|
||||
category: "Insights",
|
||||
@@ -37,7 +37,7 @@ export default function BlogSection(): React.JSX.Element {
|
||||
authorName: "Priya Sharma",
|
||||
authorImageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-3.webp",
|
||||
date: "May 1, 2026",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-benchmarks.webp",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/blog-benchmarks.webp?_wi=2",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
@@ -12,13 +12,13 @@ export default function FeaturesSection(): React.JSX.Element {
|
||||
title="Everything You Need to Scale"
|
||||
description="From team workflows to real-time analytics, Flashly gives you the tools to grow faster."
|
||||
topItems={[
|
||||
{ title: "Unify and Analyze All Your Data", description: "Connect internal docs, third-party tools, and real-time inputs into a single intelligent interface. Let AI surface insights that drive smarter, more confident business decisions.", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-collaborate.webp" },
|
||||
{ title: "Automate High-Frequency Workflows", description: "AI Supply agents break down complex tasks into clear, traceable steps. Eliminate repetitive work and scale your team's output with unmatched efficiency and precision.", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-track.webp" },
|
||||
{ title: "Unify and Analyze All Your Data", description: "Connect internal docs, third-party tools, and real-time inputs into a single intelligent interface. Let AI surface insights that drive smarter, more confident business decisions.", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-collaborate.webp?_wi=2" },
|
||||
{ title: "Automate High-Frequency Workflows", description: "AI Supply agents break down complex tasks into clear, traceable steps. Eliminate repetitive work and scale your team's output with unmatched efficiency and precision.", imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-track.webp?_wi=2" },
|
||||
]}
|
||||
bottomItem={{
|
||||
title: "Accelerate Execution with Reliable Autonomy",
|
||||
description: "Our agents don't just assist — they complete tasks end-to-end with accountability and speed. Track progress, refine outputs, and get results faster.",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-optimize.webp",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/feature-optimize.webp?_wi=2",
|
||||
primaryButton: { text: "View use cases", href: "#" },
|
||||
avatarsSrc: [
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/avatar-1.webp",
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function HeroSection(): React.JSX.Element {
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-3.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-4.webp",
|
||||
]}
|
||||
imageSrc="https://storage.googleapis.com/webild/default/templates/ai-email-platform/dashboard.webp"
|
||||
imageSrc="https://storage.googleapis.com/webild/default/templates/ai-email-platform/dashboard.webp?_wi=2"
|
||||
logosSrc={[
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-1.webp",
|
||||
"https://storage.googleapis.com/webild/default/templates/ai-email-platform/brand-2.webp",
|
||||
|
||||
@@ -1,204 +1,17 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import { useState } from "react";
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import Transition from "@/components/ui/Transition";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import LoopCarousel from "@/components/ui/LoopCarousel";
|
||||
import Card from "@/components/ui/Card";
|
||||
// Created by add_section_from_catalog (TestimonialMarqueeCards).
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
title: "Game-changer for our email strategy",
|
||||
quote: "We switched to Flashly six months ago and our open rates have nearly tripled. The AI suggestions are incredibly accurate and save us hours every week.",
|
||||
name: "Sarah Chen",
|
||||
role: "Head of Marketing, Lumino",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp?_wi=1"
|
||||
},
|
||||
{
|
||||
title: "Best ROI on any tool we use",
|
||||
quote: "The automation workflows alone paid for the subscription in the first month. Our team can now focus on strategy instead of manual sends.",
|
||||
name: "Marcus Rivera",
|
||||
role: "Growth Lead, NovaBrand",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-2.webp"
|
||||
},
|
||||
{
|
||||
title: "Finally, email that just works",
|
||||
quote: "Setup took 15 minutes. Within a week we had our first automated campaign running. The deliverability is the best we've ever seen.",
|
||||
name: "Erik Lindqvist",
|
||||
role: "Founder, Canopy",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-3.webp"
|
||||
},
|
||||
{
|
||||
title: "Incredible support and product",
|
||||
quote: "Every time we've had a question, the team responds within minutes. The product keeps getting better with every update. Truly world-class.",
|
||||
name: "James Park",
|
||||
role: "CTO, AdScale",
|
||||
imageSrc: "https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp?_wi=2"
|
||||
}
|
||||
];
|
||||
import React from 'react';
|
||||
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
|
||||
|
||||
type Testimonial = {
|
||||
title: string;
|
||||
quote: string;
|
||||
name: string;
|
||||
role: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const TestimonialsInline = () => {
|
||||
return (
|
||||
<section aria-label="Testimonials section" className="py-20 overflow-hidden">
|
||||
<div className="flex flex-col gap-8 md:gap-10 w-content-width mx-auto mb-12">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Testimonials"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Loved by Marketing Teams"}
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"See what our customers have to say about Flashly."}
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<LoopCarousel>
|
||||
<div className="flex gap-6 py-4 px-3">
|
||||
{testimonials.map((testimonial, idx) => (
|
||||
<Card key={idx} className="w-[350px] md:w-[400px] flex-shrink-0 p-8 flex flex-col gap-6">
|
||||
<div className="flex-grow">
|
||||
<p className="text-lg text-foreground font-medium mb-4">"{testimonial.title}"</p>
|
||||
<p className="text-muted-foreground">"{testimonial.quote}"</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 mt-auto">
|
||||
<div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0">
|
||||
<ImageOrVideo imageSrc={testimonial.imageSrc} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">{testimonial.name}</p>
|
||||
<p className="text-sm text-muted-foreground">{testimonial.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</LoopCarousel>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const TestimonialsInlineOld = () => {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
const handlePrev = () => {
|
||||
setActiveIndex((prev) => (prev === 0 ? testimonials.length - 1 : prev - 1));
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
setActiveIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1));
|
||||
};
|
||||
|
||||
const activeTestimonial = testimonials[activeIndex];
|
||||
|
||||
return (
|
||||
<section aria-label="Testimonials section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10 w-content-width mx-auto">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Testimonials"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Loved by Marketing Teams"}
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"See what our customers have to say about Flashly."}
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
|
||||
{(undefined || undefined) && (
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="slide-up" className="grid grid-cols-1 gap-5 md:grid-cols-2">
|
||||
<div className="flex flex-col justify-between gap-6 p-6 md:p-10 rounded card">
|
||||
<Transition key={activeIndex} transitionType="fade" whileInView={false} className="flex flex-col gap-2">
|
||||
<h3 className="text-3xl md:text-4xl font-semibold leading-[1.15] text-balance">
|
||||
{activeTestimonial.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-base md:text-lg leading-snug text-balance">
|
||||
“{activeTestimonial.quote}”
|
||||
</p>
|
||||
</Transition>
|
||||
|
||||
<div className="h-px w-full md:hidden bg-foreground/50" />
|
||||
|
||||
<div className="flex items-center justify-between gap-5">
|
||||
<Transition key={activeIndex} transitionType="fade" whileInView={false} className="flex flex-col min-w-0">
|
||||
<span className="text-base text-foreground font-semibold leading-snug truncate">{activeTestimonial.name}</span>
|
||||
<span className="text-base text-foreground/75 leading-snug truncate">{activeTestimonial.role}</span>
|
||||
</Transition>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
aria-label="Previous testimonial"
|
||||
className="flex items-center justify-center size-9 cursor-pointer rounded primary-button"
|
||||
>
|
||||
<ArrowLeft className="size-4 text-primary-cta-text" strokeWidth={1.5} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleNext}
|
||||
aria-label="Next testimonial"
|
||||
className="flex items-center justify-center size-9 cursor-pointer rounded primary-button"
|
||||
>
|
||||
<ArrowRight className="size-4 text-primary-cta-text" strokeWidth={1.5} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition key={activeIndex} transitionType="fade" whileInView={false} className="relative min-h-80 h-full md:aspect-square rounded overflow-hidden">
|
||||
<ImageOrVideo imageSrc={activeTestimonial.imageSrc} videoSrc={activeTestimonial.videoSrc} />
|
||||
</Transition>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function TestimonialsSection() {
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div data-webild-section="testimonials" id="testimonials">
|
||||
<TestimonialsInline />
|
||||
<TestimonialMarqueeCards
|
||||
tag="Testimonials"
|
||||
title="Loved by Marketing Teams"
|
||||
description="See what our customers have to say about Flashly."
|
||||
testimonials={[{"role":"Head of Marketing, Lumino","imageSrc":"https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp","name":"Sarah Chen","quote":"We switched to Flashly six months ago and our open rates have nearly tripled. The AI suggestions are incredibly accurate and save us hours every week."},{"role":"Growth Lead, NovaBrand","imageSrc":"https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-2.webp","name":"Marcus Rivera","quote":"The automation workflows alone paid for the subscription in the first month. Our team can now focus on strategy instead of manual sends."},{"name":"Erik Lindqvist","quote":"Setup took 15 minutes. Within a week we had our first automated campaign running. The deliverability is the best we've ever seen.","imageSrc":"https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-3.webp","role":"Founder, Canopy"},{"imageSrc":"https://storage.googleapis.com/webild/default/templates/ai-email-platform/testimonial-1.webp","role":"CTO, AdScale","quote":"Every time we've had a question, the team responds within minutes. The product keeps getting better with every update. Truly world-class.","name":"James Park"}]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user