Update src/app/page.tsx
This commit is contained in:
362
src/app/page.tsx
362
src/app/page.tsx
@@ -29,264 +29,128 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
]}
|
||||
brandName="EditPro AI"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
]}
|
||||
brandName="EditPro AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
logoText="EditPro AI"
|
||||
description="Professional background removal with AI precision. Get high-quality cutouts in seconds."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-decorated-chocolate-egg-with-hat-chocolate-heart-stand_140725-13997.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "plain" }}
|
||||
logoText="EditPro AI"
|
||||
description="Professional background removal with AI precision. Get high-quality cutouts in seconds."
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-decorated-chocolate-egg-with-hat-chocolate-heart-stand_140725-13997.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Professional Grade Background Removal",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/businesswoman-looking-green-screen-monitor-smartphone-sitting-desk-business-office-late-night-freelancer-watching-desktop-monitor-display-with-green-mockup-chroma-key-working-overtime_482257-13377.jpg",
|
||||
alt: "AI Tool",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Professional Grade Background Removal" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/businesswoman-looking-green-screen-monitor-smartphone-sitting-desk-business-office-late-night-freelancer-watching-desktop-monitor-display-with-green-mockup-chroma-key-working-overtime_482257-13377.jpg", alt: "AI Tool" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Hair Extraction",
|
||||
description: "Perfectly isolate hair and fur without artifacts.",
|
||||
icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fabric-texture-background_1385-1166.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/textured-background_53876-31900.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-decorated-chocolate-egg-with-hat-chocolate-heart-stand_140725-13997.jpg?_wi=2",
|
||||
imageAlt: "ai editing tool software",
|
||||
},
|
||||
{
|
||||
title: "Transparent Objects",
|
||||
description: "Maintain details in glass and plastic textures.",
|
||||
icon: Box,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-adult-woman-digital-art-style_23-2151122947.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-photo-camera-indoors-still-life_23-2150630613.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-looking-green-screen-monitor-smartphone-sitting-desk-business-office-late-night-freelancer-watching-desktop-monitor-display-with-green-mockup-chroma-key-working-overtime_482257-13377.jpg",
|
||||
imageAlt: "ai editing tool software",
|
||||
},
|
||||
{
|
||||
title: "Clean Edges",
|
||||
description: "Sharp, clean cuts ready for any background.",
|
||||
icon: CheckCircle,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/circular-saw-with-sharp-rotating-blade-cuts-new-baseboard-equipment-renovation-construction-working-circular-saw-construction-site_166373-2077.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-data-center-facility-with-artificial-intelligence-simulation_482257-122221.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-manager-sitting-table-looking-camera_74855-4068.jpg?_wi=1",
|
||||
imageAlt: "ai editing tool software",
|
||||
},
|
||||
]}
|
||||
title="Unmatched Precision"
|
||||
description="Our AI is engineered for perfection, handling complex edges and transparent objects with ease."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Hair Extraction", description: "Perfectly isolate hair and fur without artifacts.", icon: Scissors, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/fabric-texture-background_1385-1166.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/textured-background_53876-31900.jpg" }] },
|
||||
{ title: "Transparent Objects", description: "Maintain details in glass and plastic textures.", icon: Box, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-adult-woman-digital-art-style_23-2151122947.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-photo-camera-indoors-still-life_23-2150630613.jpg" }] },
|
||||
{ title: "Clean Edges", description: "Sharp, clean cuts ready for any background.", icon: CheckCircle, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/circular-saw-with-sharp-rotating-blade-cuts-new-baseboard-equipment-renovation-construction-working-circular-saw-construction-site_166373-2077.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/laptop-data-center-facility-with-artificial-intelligence-simulation_482257-122221.jpg" }] },
|
||||
]}
|
||||
title="Unmatched Precision"
|
||||
description="Our AI is engineered for perfection, handling complex edges and transparent objects with ease."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice Johnson",
|
||||
role: "Creative Director",
|
||||
testimonial: "Game changing for our agency workflow.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-manager-sitting-table-looking-camera_74855-4068.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Bob Smith",
|
||||
role: "E-commerce Manager",
|
||||
testimonial: "Best cutout quality I've ever found.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-studio-working-his-passion_23-2148424444.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Charlie Davis",
|
||||
role: "Photographer",
|
||||
testimonial: "Saves hours every single week.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586558.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Diana Ross",
|
||||
role: "Digital Marketer",
|
||||
testimonial: "Simply perfect results every time.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-young-girl-student-studying-cafe-smiling-c_197531-30664.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Ethan Hunt",
|
||||
role: "Product Manager",
|
||||
testimonial: "The precision is absolutely unmatched.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-lady-posing-studio_176474-74993.jpg",
|
||||
},
|
||||
]}
|
||||
title="Loved by Professionals"
|
||||
description="Join thousands of designers and e-commerce leaders."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alice Johnson", role: "Creative Director", testimonial: "Game changing for our agency workflow.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-manager-sitting-table-looking-camera_74855-4068.jpg" },
|
||||
{ id: "2", name: "Bob Smith", role: "E-commerce Manager", testimonial: "Best cutout quality I've ever found.", imageSrc: "http://img.b2bpic.net/free-photo/man-studio-working-his-passion_23-2148424444.jpg" },
|
||||
{ id: "3", name: "Charlie Davis", role: "Photographer", testimonial: "Saves hours every single week.", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586558.jpg" },
|
||||
{ id: "4", name: "Diana Ross", role: "Digital Marketer", testimonial: "Simply perfect results every time.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-young-girl-student-studying-cafe-smiling-c_197531-30664.jpg" },
|
||||
{ id: "5", name: "Ethan Hunt", role: "Product Manager", testimonial: "The precision is absolutely unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-lady-posing-studio_176474-74993.jpg" },
|
||||
]}
|
||||
title="Loved by Professionals"
|
||||
description="Join thousands of designers and e-commerce leaders."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Performance at Scale"
|
||||
tag="Trusted Metrics"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1M+",
|
||||
description: "Images processed monthly",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99.9%",
|
||||
description: "Accuracy guaranteed",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
description: "Support availability",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Performance at Scale"
|
||||
tag="Trusted Metrics"
|
||||
metrics={[
|
||||
{ id: "m1", value: "1M+", description: "Images processed monthly" },
|
||||
{ id: "m2", value: "99.9%", description: "Accuracy guaranteed" },
|
||||
{ id: "m3", value: "24/7", description: "Support availability" },
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"TechCorp",
|
||||
"DesignLab",
|
||||
"PhotoPro",
|
||||
"PixelPerfect",
|
||||
"InnovateCo",
|
||||
"EcomGiant",
|
||||
"CreativeAgency",
|
||||
]}
|
||||
title="Integrated Workflow"
|
||||
description="Compatible with your favorite tools."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["TechCorp", "DesignLab", "PhotoPro", "PixelPerfect", "InnovateCo", "EcomGiant", "CreativeAgency"]}
|
||||
title="Integrated Workflow"
|
||||
description="Compatible with your favorite tools."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How does it work?",
|
||||
content: "Our AI segments subjects with extreme precision.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What formats?",
|
||||
content: "We support all standard web formats.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "API support?",
|
||||
content: "Yes, we provide full API integration.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our AI editing."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How does it work?", content: "Our AI segments subjects with extreme precision." },
|
||||
{ id: "f2", title: "What formats?", content: "We support all standard web formats." },
|
||||
{ id: "f3", title: "API support?", content: "Yes, we provide full API integration." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our AI editing."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Ready to Start?"
|
||||
description="Join EditPro AI today and transform your workflow."
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
title="Ready to Start?"
|
||||
description="Join EditPro AI today and transform your workflow."
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="EditPro AI"
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: Github,
|
||||
href: "#",
|
||||
ariaLabel: "Github",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="EditPro AI"
|
||||
socialLinks={[
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
{ icon: Github, href: "#", ariaLabel: "Github" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user