Files
ba80abc8-6f36-4963-a1f5-e74…/src/pages/HomePage.tsx

311 lines
12 KiB
TypeScript

import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
import InfoCardMarquee from '@/components/ui/InfoCardMarquee';
import TeamSection from '@/components/sections/team/TeamSection';
import StatsSection from '@/components/sections/other/StatsSection';
import BlogSection from '@/components/sections/blog/BlogSection';
import ContactFormSection from '@/components/sections/contact/ContactFormSection';
export default function HomePage() {
return (
<>
<div id="hero" data-section="hero">
<HeroBillboard
tag="Revolutionize Your Being"
title="Curated Emotions for a Better You"
description="Unlock, license, and experience hand-crafted emotional states. The world's first platform designed to help you feel exactly what you need, when you need it."
primaryButton={{
text: "Start Feeling",
href: "#pricing",
}}
secondaryButton={{
text: "Learn How",
href: "#about",
}}
imageSrc="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?q=80&w=2000&auto=format&fit=crop"
/>
</div>
<div id="about" data-section="about">
<AboutMediaOverlay
tag="Our Philosophy"
title="Emotions as a Service"
description="We bridge the gap between neuroscience and digital experience. By using advanced resonance technology, we help you access states of Joy, Flow, Focus, or Tranquility instantly through our secure cloud-based emotional neural link."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/close-up-of-a-human-eye-with-digital-dat-1777233974834-2280d7e0.png"
/>
</div>
<div id="features" data-section="features">
<FeaturesDetailedSteps
tag="The Process"
title="How Emotify Works"
description="Get started in minutes with our intuitive emotion licensing platform."
steps={[
{
tag: "Step 1",
title: "Browse Catalog",
subtitle: "Discover feelings",
description: "Choose from thousands of curated emotional states tagged by duration and intensity.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-icon-of-a-library-or-catalog--1777233972004-7ea61a4c.png",
},
{
tag: "Step 2",
title: "Neural License",
subtitle: "Unlock instantly",
description: "Secure your license for specific emotional access, fully encrypted for your mind.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/abstract-visualization-of-a-neural-netwo-1777233973570-6b260f0f.png",
},
{
tag: "Step 3",
title: "Instant Integration",
subtitle: "Experience flow",
description: "Activate the feeling through our app or wearable devices and feel the shift.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/soft-fluid-gradient-in-blue-and-white-re-1777233972455-9c602b5e.png",
},
]}
/>
</div>
<div id="product" data-section="product">
<ProductVariantCards
tag="Featured States"
title="Popular Emotional States"
description="Top-rated emotional packages from our global contributors."
products={[
{
name: "Deep Flow",
variant: "Focus Package",
price: "$19.99",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/abstract-visualization-of-focus-crisp-li-1777233973211-7287e278.png",
},
{
name: "Sunset Calm",
variant: "Relaxation",
price: "$14.99",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/soft-sunset-orange-and-calm-blue-gradien-1777233972512-43e38106.png",
},
{
name: "Zen Morning",
variant: "Energy",
price: "$24.99",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/energetic-morning-sunrise-yellow-gradien-1777233972246-fae01e20.png",
},
{
name: "Peak Motivation",
variant: "Drive",
price: "$29.99",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/strong-bold-drive-gradient-deep-blue-to--1777233970833-e838454f.png",
},
{
name: "Pure Serenity",
variant: "Peace",
price: "$12.99",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/gentle-peace-visualization-soft-clouds-w-1777233971996-91e3883b.png",
},
{
name: "Creative Spark",
variant: "Inspiration",
price: "$39.99",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/creative-vibrant-splash-of-colors-artist-1777233972965-d98376b3.png",
},
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingMediaCards
tag="Subscription Tiers"
title="Flexible Emotional Access"
description="Choose the tier that fits your life's emotional demands."
plans={[
{
tag: "Lite",
price: "$49",
period: "/mo",
features: [
"5 emotional states",
"Standard resolution",
"Community access",
],
primaryButton: {
text: "Select",
href: "#contact",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/simple-glass-card-showing-lite-pricing-v-1777233972897-ee598b10.png",
},
{
tag: "Pro",
price: "$99",
period: "/mo",
features: [
"20 emotional states",
"HD fidelity states",
"Private cloud storage",
],
primaryButton: {
text: "Select",
href: "#contact",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/modern-glass-card-showing-pro-pricing-wi-1777233974846-36c52444.png",
},
{
tag: "Elite",
price: "$199",
period: "/mo",
features: [
"Unlimited access",
"4K resolution states",
"Priority mental support",
],
primaryButton: {
text: "Select",
href: "#contact",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/elegant-elite-tier-pricing-glass-card-me-1777233974840-f37ab1c5.png",
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<InfoCardMarquee
items={[
{
image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-headshot-of-a-happy-custome-1777233973635-8ab8b67f.png",
name: "Alex R.",
title: "CEO, Company A",
quote: "This product is amazing! It completely changed how I manage my emotional states."
},
{
image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-headshot-of-a-happy-custome-1777233973383-4f4896d8.png",
name: "Sarah K.",
title: "Founder, Startup B",
quote: "Transformed our workflow. The creative spark package is a game changer."
},
{
image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-headshot-of-a-happy-custome-1777233974133-d4570acb.png",
name: "Marcus L.",
title: "Software Engineer",
quote: "Deep flow helps me code for hours without distraction. Highly recommended."
},
{
image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-headshot-of-a-happy-custome-1777233974854-3a6df7d9.png",
name: "Elena P.",
title: "Creative Director",
quote: "The best investment I've made for my mental well-being this year."
},
{
image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-headshot-of-a-happy-custome-1777233973806-d447861d.png",
name: "David W.",
title: "Product Manager",
quote: "Incredible technology. The instant integration is seamless and effective."
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
tag="Questions Answered"
title="Frequently Asked Questions"
description="Everything you need to know about Emotional Licensing."
items={[
{
question: "Is it safe?",
answer: "Yes, our neural links are tested against rigorous medical standards.",
},
{
question: "Can I cancel?",
answer: "Cancel at anytime with one click in the user dashboard.",
},
{
question: "Are these real?",
answer: "All feelings are synthetic replicas modeled on human biology.",
},
{
question: "What if I feel too much?",
answer: "We include a safety kill-switch in every session.",
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/minimalist-question-mark-icon-made-of-gl-1777233973249-fd34a1bf.png"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
tag="Reach Out"
title="Ready to Start?"
description="Sign up for early access to our private emotional beta."
inputs={[
{
name: "firstName",
type: "text",
placeholder: "First name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email address",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "What would you like to feel?",
rows: 4,
}}
buttonText="Submit Request"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/a-futuristic-secure-contact-input-field--1777233972960-0d92d59b.png"
/>
</div>
<div id="team" data-section="team">
<TeamSection
tag="Our Experts"
title="Meet the Minds Behind Emotify"
description="Our team of neuroscientists, engineers, and designers are dedicated to revolutionizing emotional well-being."
members={[
{
name: "Dr. Sarah Chen",
role: "Chief Neuroscientist",
image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-headshot-of-a-happy-custome-1777233973635-8ab8b67f.png"
},
{
name: "James Wilson",
role: "Lead Engineer",
image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-headshot-of-a-happy-custome-1777233973383-4f4896d8.png"
},
{
name: "Elena Rodriguez",
role: "Head of Design",
image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-headshot-of-a-happy-custome-1777233974133-d4570acb.png"
},
{
name: "David Kim",
role: "Product Manager",
image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A2kdHi1NSExmmN97qC0PBBxl6G/professional-headshot-of-a-happy-custome-1777233974854-3a6df7d9.png"
}
]}
/>
</div>
<div id="stats" data-section="stats">
<StatsSection />
</div>
<div id="blog" data-section="blog">
<BlogSection />
</div>
<div id="contact-form" data-section="contact-form">
<ContactFormSection />
</div>
</>
);
}