Merge version_2 into main #1
308
src/app/page.tsx
308
src/app/page.tsx
@@ -2,17 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { MessageSquare } from "lucide-react";
|
||||
import { MessageSquare, Sparkles } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,20 +30,11 @@ export default function LandingPage() {
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MsgReplyAI"
|
||||
/>
|
||||
@@ -51,73 +42,30 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Reply Like a Pro in English, Hindi & Hinglish"
|
||||
description="Never struggle with a reply again. Whether you need to sound normal, funny, sarcastic, or roast a friend, our AI handles your messaging with ease."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="AI Messaging Assistant: Reply Instantly"
|
||||
description="Paste your message or upload a screenshot to get the perfect response in English, Hindi, or Hinglish. Choose your tone and conquer your chats."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201872.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-african-american-girl-with-afro-haircut-holding-mobile-taking-selfie_273609-9246.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-with-short-curly-hair-holding-smartphone-looking-smiling-cheerfully-showing-thumbs-up-standing-white-wall_141793-29170.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-smiles-broadly-makes-sefie-portrait-shows-peace-sign-smiles-broadly-walks-around-town-dressed-stylish-clothes-enjoys-leisure-time-urban-setting_273609-54781.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/morena-fotografia-belleza-sonrisa-parque_1301-1584.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-man-with-afro-hairstyle-stubble-wears-orange-anorak_273609-8595.jpg",
|
||||
alt: "User portrait",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 50,000+ happy users"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "English Support",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hindi Language",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hinglish Slang",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Auto-Roast Mode",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Screenshot OCR",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Try it now"
|
||||
tagIcon={Sparkles}
|
||||
title="Ready to master your chats?"
|
||||
description="Enter the message you want to reply to below and select your vibe."
|
||||
buttons={[{ text: "Generate Reply" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="How it works"
|
||||
title="Smart Responses in Seconds"
|
||||
description="Just paste the text or upload a screenshot, select your preferred tone, and get the perfect reply for any situation. We support multi-lingual context including Hindi and Hinglish."
|
||||
description="Just paste the text or upload a screenshot, select your preferred tone, and get the perfect reply for any situation."
|
||||
subdescription="Powered by advanced NLP models specifically trained for casual banter and social messaging contexts."
|
||||
icon={MessageSquare}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/digital-art-ai-technology-background_23-2151719573.jpg"
|
||||
@@ -128,26 +76,13 @@ export default function LandingPage() {
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Multi-Tone Selection",
|
||||
description: "Choose between normal, funny, sarcastic, or roast mode to perfectly match your desired social vibe.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/large-round-white-bluetooth-speaker-gray-laptop-smartphone-side_181624-3694.jpg",
|
||||
},
|
||||
{
|
||||
title: "Multi-Lingual Support",
|
||||
description: "Seamlessly chat in English, Hindi, and Hinglish with context-aware responses.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/human-brain-detailed-structure_23-2150929948.jpg",
|
||||
},
|
||||
{
|
||||
title: "Screenshot Parsing",
|
||||
description: "Snap a screenshot of the message and let our AI do the hard work instantly.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wireless-businessman-holding-futuristic-internet-equipment-network-generated-by-ai_188544-26813.jpg",
|
||||
},
|
||||
{ title: "Multi-Tone Selection", description: "Normal, funny, sarcastic, or roast mode.", imageSrc: "http://img.b2bpic.net/free-photo/large-round-white-bluetooth-speaker-gray-laptop-smartphone-side_181624-3694.jpg" },
|
||||
{ title: "Multi-Lingual", description: "English, Hindi, and Hinglish support.", imageSrc: "http://img.b2bpic.net/free-photo/human-brain-detailed-structure_23-2150929948.jpg" },
|
||||
{ title: "OCR Power", description: "Snap a screenshot and let AI handle the parsing.", imageSrc: "http://img.b2bpic.net/free-photo/wireless-businessman-holding-futuristic-internet-equipment-network-generated-by-ai_188544-26813.jpg" },
|
||||
]}
|
||||
title="Why Choose Our Assistant?"
|
||||
description="Powerful features designed to keep your conversations engaging and fun."
|
||||
title="Assistant Features"
|
||||
description="Everything you need to stay ahead."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -155,205 +90,60 @@ export default function LandingPage() {
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Free",
|
||||
price: "$0",
|
||||
subtitle: "Perfect for casual users",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"10 requests/day",
|
||||
"Normal & Funny modes",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Pro",
|
||||
price: "$9",
|
||||
subtitle: "For the social power user",
|
||||
buttons: [
|
||||
{
|
||||
text: "Upgrade",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Unlimited requests",
|
||||
"All modes unlocked",
|
||||
"Screenshot parsing",
|
||||
],
|
||||
},
|
||||
{ id: "free", badge: "Free", price: "$0", subtitle: "Casual use", buttons: [{ text: "Start" }], features: ["10 requests/day"] },
|
||||
{ id: "pro", badge: "Pro", price: "$9", subtitle: "Power users", buttons: [{ text: "Upgrade" }], features: ["Unlimited requests", "Screenshot OCR"] },
|
||||
]}
|
||||
title="Choose Your Plan"
|
||||
description="Simple pricing to unlock the perfect response engine."
|
||||
title="Simple Pricing"
|
||||
description="Unlock the full potential of your messaging."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Game changer!",
|
||||
quote: "The roast mode is absolutely ruthless. My friends are so confused!",
|
||||
name: "Rahul Verma",
|
||||
role: "Student",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5283.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Life saver",
|
||||
quote: "I use the Hinglish mode all the time. It feels so natural.",
|
||||
name: "Priya Sharma",
|
||||
role: "Designer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Hilarious",
|
||||
quote: "Seriously the funniest AI for messaging I've tried.",
|
||||
name: "Amit Kumar",
|
||||
role: "Developer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hipster-woman-smile-away-enjoy-with-summer-field-evening-with-vintage-tone-filter_1150-1168.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Must have!",
|
||||
quote: "Screenshot parsing actually works perfect. Saves so much typing.",
|
||||
name: "Sneha Patil",
|
||||
role: "Marketer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-dark-skinned-guy-shouts-emotionally-keeps-mouth-wide-opened-eyes-shut-wears-warm-white-sweater-headphones-around-neck_273609-32883.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Great",
|
||||
quote: "Finally an AI that understands Hinglish banter.",
|
||||
name: "Vikram Singh",
|
||||
role: "Freelancer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-red-hair-woman-casual-orange-blouse-green-wall-look-camera-excited-smile-laugh_343596-6923.jpg",
|
||||
},
|
||||
{ id: "1", title: "Game changer!", quote: "The roast mode is ruthless.", name: "Rahul V.", role: "Student" },
|
||||
{ id: "2", title: "Life saver", quote: "Hinglish mode feels natural.", name: "Priya S.", role: "Designer" },
|
||||
]}
|
||||
title="Loved by Friends"
|
||||
description="See what our users say about the replies they get."
|
||||
title="User Voices"
|
||||
description="Loved by friends everywhere."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "50K+",
|
||||
title: "Happy Users",
|
||||
description: "People relying on our AI for banter.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-technology-logo-template-collection_23-2148218237.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "1M+",
|
||||
title: "Responses",
|
||||
description: "Messages sent using our engine.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hands-cutting-carrot-close-up_23-2148994140.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "3",
|
||||
title: "Languages",
|
||||
description: "Eng, Hindi, and Hinglish fluent.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/touch-screen-technology-connects-modern-mobile-phone-users-generated-by-ai_188544-17120.jpg",
|
||||
},
|
||||
{ id: "m1", value: "50K+", title: "Users", description: "Happy members", imageSrc: "http://img.b2bpic.net/free-vector/gradient-technology-logo-template-collection_23-2148218237.jpg" },
|
||||
{ id: "m2", value: "1M+", title: "Replies", description: "Sent successfully", imageSrc: "http://img.b2bpic.net/free-photo/hands-cutting-carrot-close-up_23-2148994140.jpg" },
|
||||
]}
|
||||
title="Milestones We've Reached"
|
||||
description="Our community is growing rapidly."
|
||||
title="Our Growth"
|
||||
description="Milestones reached together."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is it really free?",
|
||||
content: "Yes, we offer a basic free tier for everyday messaging.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Does it support Hinglish?",
|
||||
content: "Absolutely, our models are trained specifically to handle Hinglish slang.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How do I upload images?",
|
||||
content: "Just use the image input button, and our OCR engine will read it.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about our reply assistant."
|
||||
faqs={[{ id: "q1", title: "Free tier?", content: "Yes, basic tier is free." }]}
|
||||
title="FAQ"
|
||||
description="Common questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
text="Ready to master your chats? Get started with MsgReplyAI today and never run out of comebacks."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Support",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="MsgReplyAI"
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Product", items: [{ label: "Features", href: "#features" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
bottomLeftText="© 2025 MsgReplyAI"
|
||||
bottomRightText="hello@msgreply.ai"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user