Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 50bb89b51d | |||
| e3b5774c62 | |||
| 26313403a5 | |||
| 76203f0715 |
249
src/app/page.tsx
249
src/app/page.tsx
@@ -3,17 +3,20 @@
|
|||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||||
import { BarChart2, Mic, TrendingUp } from "lucide-react";
|
import { BarChart2, Mic, TrendingUp, Target, Zap, CheckCircle, LayoutTemplate } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
|
const [isResumeUploaded, setIsResumeUploaded] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-stagger"
|
defaultButtonVariant="text-stagger"
|
||||||
@@ -62,143 +65,117 @@ export default function LandingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="social-proof" data-section="social-proof">
|
{!isResumeUploaded && (
|
||||||
<SocialProofOne
|
<div className="flex flex-col items-center justify-center p-10 bg-accent/10 border-2 border-dashed border-accent rounded-3xl m-8">
|
||||||
textboxLayout="default"
|
<h2 className="text-2xl font-bold mb-4">Upload your Resume to continue</h2>
|
||||||
useInvertedBackground={false}
|
<p className="mb-6 text-foreground/70">Unlock personalized interview feedback based on your experience.</p>
|
||||||
names={["Google", "Microsoft", "Amazon", "Meta", "Tesla", "Adobe", "Apple"]}
|
<input
|
||||||
title="Practice for roles at top companies"
|
type="file"
|
||||||
description="Used by top candidates at Google, Microsoft, and more to land their dream roles."
|
onChange={() => setIsResumeUploaded(true)}
|
||||||
/>
|
className="block w-full max-w-sm text-sm text-foreground file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-primary file:text-white hover:file:bg-primary/90"
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
<div className={!isResumeUploaded ? "opacity-30 pointer-events-none" : "opacity-100"}>
|
||||||
<FeatureCardTwentyFive
|
<div id="social-proof" data-section="social-proof">
|
||||||
animationType="slide-up"
|
<SocialProofOne
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={false}
|
||||||
features={[
|
names={["Google", "Microsoft", "Amazon", "Meta", "Tesla", "Adobe", "Apple"]}
|
||||||
{
|
title="Practice for roles at top companies"
|
||||||
title: "AI Interviewer", description: "Talk to an AI interviewer that adapts to your answers in real time.", icon: Mic,
|
description="Used by top candidates at Google, Microsoft, and more to land their dream roles."
|
||||||
mediaItems: [
|
/>
|
||||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-using-transparent-tablet-innovative-technology_53876-97074.jpg" },
|
</div>
|
||||||
{ imageSrc: "http://img.b2bpic.net/free-photo/devices-arrangement-desk_23-2148994217.jpg" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Smart Feedback", description: "Get detailed feedback, strengths, weaknesses, and improvement tips.", icon: BarChart2,
|
|
||||||
mediaItems: [
|
|
||||||
{ imageSrc: "http://img.b2bpic.net/free-vector/flat-design-data-logo-template_23-2149202844.jpg" },
|
|
||||||
{ imageSrc: "http://img.b2bpic.net/free-vector/colorful-infographic-element-collection-with-flat-design_23-2147911062.jpg" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Track Progress", description: "Monitor your performance over time and see how you improve.", icon: TrendingUp,
|
|
||||||
mediaItems: [
|
|
||||||
{ imageSrc: "http://img.b2bpic.net/free-photo/support-staff_1048-5016.jpg" },
|
|
||||||
{ imageSrc: "http://img.b2bpic.net/free-photo/infrastructure-construction-chip-link-concept_53876-124760.jpg" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
title="Everything you need to ace your interview"
|
|
||||||
description="Powerful tools designed to make you interview-ready in record time."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="features" data-section="features">
|
||||||
<SplitAbout
|
<FeatureHoverPattern
|
||||||
textboxLayout="split"
|
animationType="slide-up"
|
||||||
useInvertedBackground={false}
|
textboxLayout="default"
|
||||||
title="Real conversations. Real growth."
|
useInvertedBackground={true}
|
||||||
description="Experience a real interview environment with voice interaction, live transcription, and AI feedback."
|
title="Everything you need to ace your interview"
|
||||||
bulletPoints={[
|
description="Powerful tools designed to make you interview-ready in record time."
|
||||||
{ title: "Voice Interaction", description: "Engage in natural, real-time voice conversations." },
|
features={[
|
||||||
{ title: "Live Transcript", description: "View your live transcript for precise feedback." },
|
{ icon: Mic, title: "AI Interviewer", description: "Talk to an AI interviewer that adapts to your answers in real time." },
|
||||||
{ title: "Actionable Insights", description: "Deep analysis to help you land the job." }
|
{ icon: BarChart2, title: "Smart Feedback", description: "Get detailed feedback, strengths, weaknesses, and improvement tips." },
|
||||||
]}
|
{ icon: TrendingUp, title: "Progress Tracking", description: "Monitor your performance over time and see how you improve." },
|
||||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CUVcXZAYwpoHfPBdAZxnHVggYi/uploaded-1776440235375-e8ksunv3.png"
|
{ icon: Target, title: "Role Customization", description: "Tailor your interview to specific job roles and seniority levels." },
|
||||||
imageAlt="BauxAI interface preview"
|
{ icon: Zap, title: "Rapid Coaching", description: "Get instant tips and tricks to refine your speaking skills." }
|
||||||
mediaAnimation="blur-reveal"
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="metrics" data-section="metrics">
|
<div id="how-it-works" data-section="how-it-works">
|
||||||
<MetricCardFourteen
|
<MetricCardThree
|
||||||
useInvertedBackground={true}
|
title="Four Steps to Success"
|
||||||
title="Trusted by thousands"
|
description="Simple, effective process to guide your interview preparation."
|
||||||
tag="Performance Stats"
|
textboxLayout="default"
|
||||||
metrics={[
|
animationType="slide-up"
|
||||||
{ id: "m1", value: "10K+", description: "Active Users" },
|
useInvertedBackground={false}
|
||||||
{ id: "m2", value: "50K+", description: "Interviews Taken" },
|
metrics={[
|
||||||
{ id: "m3", value: "95%", description: "Positive Feedback" },
|
{ id: "1", icon: LayoutTemplate, title: "Select Role", value: "Step 1" },
|
||||||
{ id: "m4", value: "100+", description: "Roles Covered" }
|
{ id: "2", icon: Mic, title: "Practice Live", value: "Step 2" },
|
||||||
]}
|
{ id: "3", icon: CheckCircle, title: "Get Feedback", value: "Step 3" },
|
||||||
metricsAnimation="slide-up"
|
{ id: "4", icon: TrendingUp, title: "Improve Skills", value: "Step 4" }
|
||||||
/>
|
]}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="about" data-section="about">
|
||||||
<TestimonialCardThirteen
|
<MetricSplitMediaAbout
|
||||||
animationType="slide-up"
|
title="Real conversations. Real growth."
|
||||||
textboxLayout="default"
|
description="Experience a real interview environment with voice interaction, live transcription, and AI feedback."
|
||||||
useInvertedBackground={false}
|
metrics={[
|
||||||
testimonials={[
|
{ title: "Active Users", value: "10K+" },
|
||||||
{ id: "1", name: "Ananya S.", handle: "Software Engineer", testimonial: "BauxAI helped me crack interviews I never thought I could.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-startup-office-coding_482257-119443.jpg" },
|
{ title: "Interviews", value: "50K+" }
|
||||||
{ id: "2", name: "Rohit M.", handle: "Product Manager", testimonial: "The voice interaction feels so real. It's like talking to a human.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-successful-businesswoman-posing-indoors_74855-2005.jpg" },
|
]}
|
||||||
{ id: "3", name: "Priya K.", handle: "Data Scientist", testimonial: "I improved my confidence significantly. Highly recommended!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-professional-woman-having-coffee-break-her-full-working-day-she-holds-paper-cup-outdoors-near-business-building-while-relaxing-enjoying-her-beverage_158595-6863.jpg" },
|
useInvertedBackground={true}
|
||||||
{ id: "4", name: "John D.", handle: "Frontend Developer", testimonial: "The feedback is incredibly detailed and actionable.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-jeweler-working-shop_23-2150914309.jpg" },
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CUVcXZAYwpoHfPBdAZxnHVggYi/uploaded-1776440235375-e8ksunv3.png"
|
||||||
{ id: "5", name: "Sarah W.", handle: "UX Designer", testimonial: "Exactly what I needed to prepare for the big tech interviews.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg" }
|
/>
|
||||||
]}
|
</div>
|
||||||
showRating={true}
|
|
||||||
title="Loved by learners and professionals worldwide"
|
|
||||||
description="See why top talent chooses BauxAI to master their interviews."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<ContactSplitForm
|
<TestimonialCardTwo
|
||||||
useInvertedBackground={true}
|
animationType="slide-up"
|
||||||
title="Ready to ace your next interview?"
|
textboxLayout="default"
|
||||||
description="Join BauxAI today and take the first step towards your dream job."
|
useInvertedBackground={false}
|
||||||
inputs={[
|
title="Loved by learners worldwide"
|
||||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
description="See why top talent chooses BauxAI to master their interviews."
|
||||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
testimonials={[
|
||||||
]}
|
{ id: "1", name: "Ananya S.", role: "Software Engineer", testimonial: "BauxAI helped me crack interviews I never thought I could.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-startup-office-coding_482257-119443.jpg" },
|
||||||
buttonText="Start Free Interview"
|
{ id: "2", name: "Rohit M.", role: "Product Manager", testimonial: "The voice interaction feels so real. It's like talking to a human.", imageSrc: "http://img.b2bpic.net/free-photo/happy-successful-businesswoman-posing-indoors_74855-2005.jpg" },
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/register-enquiry-online-web-page-concept_53876-132294.jpg"
|
{ id: "3", name: "Priya K.", role: "Data Scientist", testimonial: "I improved my confidence significantly. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-professional-woman-having-coffee-break-her-full-working-day-she-holds-paper-cup-outdoors-near-business-building-while-relaxing-enjoying-her-beverage_158595-6863.jpg" }
|
||||||
imageAlt="Register Enquiry Online"
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="contact" data-section="contact">
|
||||||
<FooterBase
|
<ContactSplitForm
|
||||||
columns={[
|
useInvertedBackground={true}
|
||||||
{
|
title="Ready to ace your next interview?"
|
||||||
title: "Product", items: [
|
description="Join BauxAI today and take the first step towards your dream job."
|
||||||
{ label: "Features", href: "#features" },
|
inputs={[
|
||||||
{ label: "How It Works", href: "#how-it-works" },
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||||
{ label: "Pricing", href: "#pricing" }
|
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||||
]
|
]}
|
||||||
},
|
buttonText="Start Free Interview"
|
||||||
{
|
imageSrc="http://img.b2bpic.net/free-photo/register-enquiry-online-web-page-concept_53876-132294.jpg"
|
||||||
title: "Company", items: [
|
/>
|
||||||
{ label: "About Us", href: "#about" },
|
</div>
|
||||||
{ label: "Blog", href: "#" },
|
|
||||||
{ label: "Contact", href: "#contact" }
|
<div id="footer" data-section="footer">
|
||||||
]
|
<FooterMedia
|
||||||
},
|
logoText="BauxAI"
|
||||||
{
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-background-design-with-geometric-shapes_53876-124967.jpg"
|
||||||
title: "Resources", items: [
|
columns={[
|
||||||
{ label: "Interview Tips", href: "#" },
|
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "How It Works", href: "#how-it-works" }, { label: "Pricing", href: "#pricing" }] },
|
||||||
{ label: "FAQ", href: "#" },
|
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||||
{ label: "Help Center", href: "#" }
|
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||||
]
|
]}
|
||||||
}
|
/>
|
||||||
]}
|
</div>
|
||||||
logoText="BauxAI"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user