Merge version_1 into main #1
416
src/app/page.tsx
416
src/app/page.tsx
@@ -19,300 +19,148 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Saloni AI"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Saloni AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Meet Saloni, Your Sassy AI Persona"
|
||||
description="Voice-only. Real-time. Totally unfiltered charm. Get ready to experience the assistant that actually has a personality."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Chatting",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "h1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bubbles-black-background_23-2149345718.jpg",
|
||||
imageAlt: "AI Orb 1",
|
||||
},
|
||||
{
|
||||
id: "h2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103268.jpg",
|
||||
imageAlt: "Waveform 1",
|
||||
},
|
||||
{
|
||||
id: "h3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-low-poly-dark-background-with-connecting-dots-lines_1048-12151.jpg",
|
||||
imageAlt: "Neural Network",
|
||||
},
|
||||
{
|
||||
id: "h4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301539.jpg",
|
||||
imageAlt: "Cyber Interface",
|
||||
},
|
||||
{
|
||||
id: "h5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/galaxy-planets-digital-art_23-2151727645.jpg",
|
||||
imageAlt: "Geometric Glow",
|
||||
},
|
||||
{
|
||||
id: "h6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-background-with-purple-lines-generative-ai_169016-30670.jpg",
|
||||
imageAlt: "Audio Stream",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Meet Saloni, Your Sassy AI Persona"
|
||||
description="Voice-only. Real-time. Totally unfiltered charm. Get ready to experience the assistant that actually has a personality."
|
||||
buttons={[{ text: "Start Chatting", href: "#contact" }]}
|
||||
carouselItems={[
|
||||
{ id: "h1", imageSrc: "http://img.b2bpic.net/free-photo/bubbles-black-background_23-2149345718.jpg", imageAlt: "AI Orb 1" },
|
||||
{ id: "h2", imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103268.jpg", imageAlt: "Waveform 1" },
|
||||
{ id: "h3", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-low-poly-dark-background-with-connecting-dots-lines_1048-12151.jpg", imageAlt: "Neural Network" },
|
||||
{ id: "h4", imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301539.jpg", imageAlt: "Cyber Interface" },
|
||||
{ id: "h5", imageSrc: "http://img.b2bpic.net/free-photo/galaxy-planets-digital-art_23-2151727645.jpg", imageAlt: "Geometric Glow" },
|
||||
{ id: "h6", imageSrc: "http://img.b2bpic.net/free-photo/abstract-dark-background-with-purple-lines-generative-ai_169016-30670.jpg", imageAlt: "Audio Stream" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
label: "Speed",
|
||||
title: "Real-time Audio Streams",
|
||||
items: [
|
||||
"No typing lag",
|
||||
"PCM16 16kHz precision",
|
||||
"Human-like latency",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
label: "Smart",
|
||||
title: "Function Calling",
|
||||
items: [
|
||||
"Open sites effortlessly",
|
||||
"Browser automation",
|
||||
"Instant feedback loop",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
label: "Vibe",
|
||||
title: "Sassy & Confident",
|
||||
items: [
|
||||
"More than robotic scripts",
|
||||
"Emotionally responsive",
|
||||
"Playful engagement",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Built for the Future"
|
||||
description="Experience lightning-fast voice interaction with a personality that keeps you on your toes."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", label: "Speed", title: "Real-time Audio Streams", items: ["No typing lag", "PCM16 16kHz precision", "Human-like latency"] },
|
||||
{ id: "f2", label: "Smart", title: "Function Calling", items: ["Open sites effortlessly", "Browser automation", "Instant feedback loop"] },
|
||||
{ id: "f3", label: "Vibe", title: "Sassy & Confident", items: ["More than robotic scripts", "Emotionally responsive", "Playful engagement"] },
|
||||
]}
|
||||
title="Built for the Future"
|
||||
description="Experience lightning-fast voice interaction with a personality that keeps you on your toes."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Designed to Impress"
|
||||
description="Saloni isn't just code; she's a carefully crafted voice persona designed to make your daily tasks feel like a conversation with a witty best friend."
|
||||
metrics={[
|
||||
{
|
||||
value: "100ms",
|
||||
title: "Response Latency",
|
||||
},
|
||||
{
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
},
|
||||
{
|
||||
value: "∞",
|
||||
title: "Personality",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-bright-colorful-light-coming-out-laptop-screen-darkness_181624-31148.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="opacity"
|
||||
imageAlt="Voice processing tech icon"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Designed to Impress"
|
||||
description="Saloni isn't just code; she's a carefully crafted voice persona designed to make your daily tasks feel like a conversation with a witty best friend."
|
||||
metrics={[
|
||||
{ value: "100ms", title: "Response Latency" },
|
||||
{ value: "99.9%", title: "Uptime" },
|
||||
{ value: "∞", title: "Personality" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-bright-colorful-light-coming-out-laptop-screen-darkness_181624-31148.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="opacity"
|
||||
imageAlt="Voice processing tech icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
handle: "@sarahcoder",
|
||||
testimonial: "I never knew I needed a sassy AI friend until now. She keeps me productive and entertained.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mike D.",
|
||||
handle: "@devmike",
|
||||
testimonial: "The latency is incredible. It feels so natural and responsive.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-inside-office-center_1303-22415.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena R.",
|
||||
handle: "@elena_tech",
|
||||
testimonial: "Saloni is the perfect balance of helpful and teasing. Love her energy.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/military-girl-camouflage-uniform-against-army-background-shooting-range_627829-8532.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David W.",
|
||||
handle: "@davey",
|
||||
testimonial: "Function calling works flawlessly for my daily routine.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-black-hat-smiling_176420-8505.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Chloe B.",
|
||||
handle: "@chloetech",
|
||||
testimonial: "Finally, an AI that isn't robotic. This feels like the future.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/adult-woman-sitting-shadow_23-2147781293.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="What They Say"
|
||||
description="Users are loving the sass and the speed."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="depth-3d"
|
||||
showRating={true}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", handle: "@sarahcoder", testimonial: "I never knew I needed a sassy AI friend until now. She keeps me productive and entertained.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg" },
|
||||
{ id: "t2", name: "Mike D.", handle: "@devmike", testimonial: "The latency is incredible. It feels so natural and responsive.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-inside-office-center_1303-22415.jpg" },
|
||||
{ id: "t3", name: "Elena R.", handle: "@elena_tech", testimonial: "Saloni is the perfect balance of helpful and teasing. Love her energy.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/military-girl-camouflage-uniform-against-army-background-shooting-range_627829-8532.jpg" },
|
||||
{ id: "t4", name: "David W.", handle: "@davey", testimonial: "Function calling works flawlessly for my daily routine.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-black-hat-smiling_176420-8505.jpg" },
|
||||
{ id: "t5", name: "Chloe B.", handle: "@chloetech", testimonial: "Finally, an AI that isn't robotic. This feels like the future.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/adult-woman-sitting-shadow_23-2147781293.jpg" },
|
||||
]}
|
||||
title="What They Say"
|
||||
description="Users are loving the sass and the speed."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="tech" data-section="tech">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Zap,
|
||||
title: "Engine",
|
||||
value: "Gemini Live",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Mic,
|
||||
title: "Stream",
|
||||
value: "PCM16",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Star,
|
||||
title: "UI",
|
||||
value: "React/Vite",
|
||||
},
|
||||
]}
|
||||
title="Tech Specs"
|
||||
description="Built with the latest in Gemini Live tech."
|
||||
/>
|
||||
</div>
|
||||
<div id="tech" data-section="tech">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Zap, title: "Engine", value: "Gemini Live" },
|
||||
{ id: "m2", icon: Mic, title: "Stream", value: "PCM16" },
|
||||
{ id: "m3", icon: Star, title: "UI", value: "React/Vite" },
|
||||
]}
|
||||
title="Tech Specs"
|
||||
description="Built with the latest in Gemini Live tech."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is Saloni text-based?",
|
||||
content: "Nope, voice-to-voice only. We don't do typing here.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can she handle tasks?",
|
||||
content: "Yes, through function calling and browser actions.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What's the personality?",
|
||||
content: "Witty, confident, sassy, and always helpful.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kfq4jp"
|
||||
title="Frequently Asked"
|
||||
description="Got questions about the sass factor?"
|
||||
faqsAnimation="blur-reveal"
|
||||
imageAlt="Help center interface dark"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is Saloni text-based?", content: "Nope, voice-to-voice only. We don't do typing here." },
|
||||
{ id: "q2", title: "Can she handle tasks?", content: "Yes, through function calling and browser actions." },
|
||||
{ id: "q3", title: "What's the personality?", content: "Witty, confident, sassy, and always helpful." },
|
||||
]}
|
||||
faqsAnimation="blur-reveal"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kfq4jp"
|
||||
title="Frequently Asked"
|
||||
description="Got questions about the sass factor?"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get Connected"
|
||||
description="Ready to chat? Drop us a line and let's get you hooked up."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "What's on your mind?",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301593.jpg"
|
||||
imageAlt="Glowing lines digital contact"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get Connected"
|
||||
description="Ready to chat? Drop us a line and let's get you hooked up."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "email", type: "email", placeholder: "Your Email" },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "What's on your mind?", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301593.jpg"
|
||||
imageAlt="Glowing lines digital contact"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Saloni AI"
|
||||
leftLink={{
|
||||
text: "Privacy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Saloni AI"
|
||||
leftLink={{ text: "Privacy", href: "#" }}
|
||||
rightLink={{ text: "Terms", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user