Update src/pages/HomePage.tsx
This commit is contained in:
@@ -6,262 +6,142 @@ import FeaturesImageBento from '@/components/sections/features/FeaturesImageBent
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
|
||||
import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
|
||||
import { MessageSquare, User } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlay
|
||||
tag="Next-Gen Survey Tech"
|
||||
title="Build Smarter Surveys in Minutes."
|
||||
description="Create engaging, data-driven surveys with our drag-and-drop builder and access real-time analytics to make informed decisions."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Demo",
|
||||
href: "#features",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/light-blue-3d-abstract-wave-pattern_53876-95188.jpg?_wi=1"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Next-Gen Survey Tech"
|
||||
title="Build Smarter Surveys in Minutes."
|
||||
description="Create engaging, data-driven surveys with our drag-and-drop builder and access real-time analytics to make informed decisions."
|
||||
primaryButton={{
|
||||
text: "Get Started", href: "#contact"}}
|
||||
secondaryButton={{
|
||||
text: "View Demo", href: "#features"}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/light-blue-3d-abstract-wave-pattern_53876-95188.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTextSplit
|
||||
title="Data-Driven Decisions Made Easy."
|
||||
descriptions={[
|
||||
"We empower businesses to gather deep insights effortlessly. Our platform streamlines the entire survey lifecycle, from design to deep data analysis.",
|
||||
"Our intuitive interface ensures that you don't need technical skills to build professional, high-converting forms that get the feedback you truly need.",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
title="Data-Driven Decisions Made Easy."
|
||||
descriptions={[
|
||||
"We empower businesses to gather deep insights effortlessly. Our platform streamlines the entire survey lifecycle, from design to deep data analysis.", "Our intuitive interface ensures that you don't need technical skills to build professional, high-converting forms that get the feedback you truly need."]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBento
|
||||
tag="Platform Features"
|
||||
title="Everything You Need to Succeed."
|
||||
description="Powerful tools designed to make feedback gathering simple and efficient."
|
||||
features={[
|
||||
{
|
||||
title: "Advanced Analytics",
|
||||
description: "Visualize your survey data instantly.",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126876.jpg",
|
||||
imageAlt: "analytics bar chart UI",
|
||||
},
|
||||
{
|
||||
title: "Builder Interface",
|
||||
description: "Drag and drop question creation.",
|
||||
bentoComponent: "media-stack",
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/light-blue-3d-abstract-wave-pattern_53876-95188.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-hands-holding-touchpad-with-presentation_1262-3210.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-man-with-beard-working-hard-his-desk-office-motivated-man_482257-18758.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-screening-people-software-development-silicon-valley-company-position_482257-118931.jpg?_wi=1",
|
||||
imageAlt: "analytics bar chart UI",
|
||||
},
|
||||
{
|
||||
title: "Team Collaboration",
|
||||
description: "Collaborate on survey drafts.",
|
||||
bentoComponent: "chat-marquee",
|
||||
aiIcon: MessageSquare,
|
||||
userIcon: User,
|
||||
exchanges: [
|
||||
{
|
||||
userMessage: "Update question 4",
|
||||
aiResponse: "Question updated successfully",
|
||||
},
|
||||
],
|
||||
placeholder: "Collaborate...",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feedback-results-information-satisfeaction_53876-121339.jpg?_wi=1",
|
||||
imageAlt: "analytics bar chart UI",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Platform Features"
|
||||
title="Everything You Need to Succeed."
|
||||
description="Powerful tools designed to make feedback gathering simple and efficient."
|
||||
features={[
|
||||
{
|
||||
title: "Advanced Analytics", description: "Visualize your survey data instantly.", bentoComponent: "animated-bar-chart"
|
||||
},
|
||||
{
|
||||
title: "Builder Interface", description: "Drag and drop question creation.", bentoComponent: "media-stack", mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/light-blue-3d-abstract-wave-pattern_53876-95188.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/female-hands-holding-touchpad-with-presentation_1262-3210.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/business-man-with-beard-working-hard-his-desk-office-motivated-man_482257-18758.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Team Collaboration", description: "Collaborate on survey drafts.", bentoComponent: "chat-marquee", aiIcon: "MessageSquare", userIcon: "User", exchanges: [
|
||||
{ userMessage: "Update question 4", aiResponse: "Question updated successfully" }
|
||||
],
|
||||
placeholder: "Collaborate..."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsMediaCards
|
||||
tag="Analytics"
|
||||
title="Real-time Data at Your Fingertips."
|
||||
description="Track performance metrics and user behavior across all your surveys."
|
||||
metrics={[
|
||||
{
|
||||
value: "99.9%",
|
||||
title: "Data Accuracy",
|
||||
description: "Ensure your data is pristine.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-16699.jpg",
|
||||
},
|
||||
{
|
||||
value: "15k+",
|
||||
title: "Responses Collected",
|
||||
description: "Daily survey responses.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-hands-laptop-keyboard-man-typing-laptop-top-view_169016-66487.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Analytics"
|
||||
title="Real-time Data at Your Fingertips."
|
||||
description="Track performance metrics and user behavior across all your surveys."
|
||||
metrics={[
|
||||
{ value: "99.9%", title: "Data Accuracy", description: "Ensure your data is pristine.", imageSrc: "http://img.b2bpic.net/free-vector/collection-futuristic-infographic-elements_52683-16699.jpg" },
|
||||
{ value: "15k+", title: "Responses Collected", description: "Daily survey responses.", imageSrc: "http://img.b2bpic.net/free-photo/male-hands-laptop-keyboard-man-typing-laptop-top-view_169016-66487.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="product-grid" data-section="product-grid">
|
||||
<SectionErrorBoundary name="product-grid">
|
||||
<div id="product-grid" data-section="product-grid">
|
||||
<SectionErrorBoundary name="product-grid">
|
||||
<FeaturesImageBento
|
||||
tag="Studio Features"
|
||||
title="Advanced Editing Tools."
|
||||
description="Detailed view of the SurveyX studio interface."
|
||||
items={[
|
||||
{
|
||||
title: "Studio Interface",
|
||||
description: "Create with ease",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-screening-people-software-development-silicon-valley-company-position_482257-118931.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Feedback Logs",
|
||||
description: "Track everything",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feedback-results-information-satisfeaction_53876-121339.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Custom Filters",
|
||||
description: "Granular control",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-code-running-computer-screens-modern-server-room_482257-114724.jpg",
|
||||
},
|
||||
{
|
||||
title: "Export Tools",
|
||||
description: "Share reports instantly",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/green-checkmark-button-dark-background-approval-confirmation-symbol_84443-91224.jpg",
|
||||
},
|
||||
{
|
||||
title: "Mobile Previews",
|
||||
description: "Responsive testing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg",
|
||||
},
|
||||
{
|
||||
title: "Account Metrics",
|
||||
description: "Usage summaries",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-paper-sheet-with-graph_23-2148210412.jpg",
|
||||
},
|
||||
{
|
||||
title: "Theming Engine",
|
||||
description: "Perfect branding",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Studio Features"
|
||||
title="Advanced Editing Tools."
|
||||
description="Detailed view of the SurveyX studio interface."
|
||||
items={[
|
||||
{ title: "Studio Interface", description: "Create with ease", imageSrc: "http://img.b2bpic.net/free-photo/woman-screening-people-software-development-silicon-valley-company-position_482257-118931.jpg" },
|
||||
{ title: "Feedback Logs", description: "Track everything", imageSrc: "http://img.b2bpic.net/free-photo/feedback-results-information-satisfeaction_53876-121339.jpg" },
|
||||
{ title: "Custom Filters", description: "Granular control", imageSrc: "http://img.b2bpic.net/free-photo/close-up-code-running-computer-screens-modern-server-room_482257-114724.jpg" },
|
||||
{ title: "Export Tools", description: "Share reports instantly", imageSrc: "http://img.b2bpic.net/free-photo/green-checkmark-button-dark-background-approval-confirmation-symbol_84443-91224.jpg" },
|
||||
{ title: "Mobile Previews", description: "Responsive testing", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729043.jpg" },
|
||||
{ title: "Account Metrics", description: "Usage summaries", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-paper-sheet-with-graph_23-2148210412.jpg" },
|
||||
{ title: "Theming Engine", description: "Perfect branding", imageSrc: "http://img.b2bpic.net/free-photo/person-having-conversation-with-ai-virtual-assistant-producing-clips_482257-127292.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeOverlayCards
|
||||
tag="Social Proof"
|
||||
title="Trusted by Experts."
|
||||
description="See what our customers have to say about us."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Chen",
|
||||
role: "Head of Data",
|
||||
company: "Innovate",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-man-white-tshirt-jacket-smiling-brown-background_197531-26657.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark Ross",
|
||||
role: "CEO",
|
||||
company: "TechStream",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena Kim",
|
||||
role: "UX Researcher",
|
||||
company: "GrowthLabs",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-senior-businessman-with-arms-crossed_1262-1751.jpg",
|
||||
},
|
||||
{
|
||||
name: "James Watt",
|
||||
role: "Founder",
|
||||
company: "StatCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-spectacles_1303-14468.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jessica Lee",
|
||||
role: "Product Manager",
|
||||
company: "AppFlow",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-smiling_23-2149375011.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Social Proof"
|
||||
title="Trusted by Experts."
|
||||
description="What our clients are saying about our platform."
|
||||
testimonials={[
|
||||
{ name: "Sarah Chen", role: "Head of Data", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/joyful-man-white-tshirt-jacket-smiling-brown-background_197531-26657.jpg" },
|
||||
{ name: "Mark Ross", role: "CEO", company: "TechStream", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg" },
|
||||
{ name: "Elena Kim", role: "UX Researcher", company: "GrowthLabs", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-senior-businessman-with-arms-crossed_1262-1751.jpg" },
|
||||
{ name: "James Watt", role: "Founder", company: "StatCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-spectacles_1303-14468.jpg" },
|
||||
{ name: "Jessica Lee", role: "Product Manager", company: "AppFlow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-smiling_23-2149375011.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Help Center"
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We have answers."
|
||||
items={[
|
||||
{
|
||||
question: "Is it free to start?",
|
||||
answer: "Yes, our starter plan is free forever.",
|
||||
},
|
||||
{
|
||||
question: "Can I export reports?",
|
||||
answer: "Yes, we support PDF, CSV, and Excel exports.",
|
||||
},
|
||||
{
|
||||
question: "Are my surveys GDPR compliant?",
|
||||
answer: "Absolutely, compliance is our priority.",
|
||||
},
|
||||
{
|
||||
question: "Does it integrate with Zapier?",
|
||||
answer: "Yes, we have a native integration for all premium users.",
|
||||
},
|
||||
{
|
||||
question: "Can I white-label the surveys?",
|
||||
answer: "Absolutely, Enterprise plans support full domain white-labeling.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-sitting-house-with-automation-light-system-holding-smartphone-turning-light-using-voice-activated-application_482257-2271.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Help Center"
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We have answers."
|
||||
items={[
|
||||
{ question: "Is it free to start?", answer: "Yes, our starter plan is free forever." },
|
||||
{ question: "Can I export reports?", answer: "Yes, we support PDF, CSV, and Excel exports." },
|
||||
{ question: "Are my surveys GDPR compliant?", answer: "Absolutely, compliance is our priority." },
|
||||
{ question: "Does it integrate with Zapier?", answer: "Yes, we have a native integration for all premium users." },
|
||||
{ question: "Can I white-label the surveys?", answer: "Absolutely, Enterprise plans support full domain white-labeling." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-sitting-house-with-automation-light-system-holding-smartphone-turning-light-using-voice-activated-application_482257-2271.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Get Started"
|
||||
text="Ready to build better surveys?"
|
||||
primaryButton={{
|
||||
text: "Contact Sales",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Documentation",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Get Started"
|
||||
text="Ready to build better surveys?"
|
||||
primaryButton={{ text: "Contact Sales", href: "#contact" }}
|
||||
secondaryButton={{ text: "Documentation", href: "#" }}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user