Merge version_1 into main #2
331
src/app/page.tsx
331
src/app/page.tsx
@@ -17,231 +17,128 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "AI Chat",
|
||||
id: "#chat",
|
||||
},
|
||||
{
|
||||
name: "Writing",
|
||||
id: "#writing",
|
||||
},
|
||||
{
|
||||
name: "Design",
|
||||
id: "#design",
|
||||
},
|
||||
{
|
||||
name: "Video",
|
||||
id: "#video",
|
||||
},
|
||||
{
|
||||
name: "Business",
|
||||
id: "#business",
|
||||
},
|
||||
]}
|
||||
brandName="AisToMyAdvantage"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "AI Chat", id: "#chat" },
|
||||
{ name: "Writing", id: "#writing" },
|
||||
{ name: "Design", id: "#design" },
|
||||
{ name: "Video", id: "#video" },
|
||||
{ name: "Business", id: "#business" },
|
||||
]}
|
||||
brandName="AisToMyAdvantage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="How to Use AIs to Your Advantage"
|
||||
description="The ultimate directory of AI tools — organized by category with video tutorials to get you started fast and boost your productivity."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Tools",
|
||||
href: "#chat",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-futuristic-ai-interface-featuring-holo-1774918699183-282fe7bd.png?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="How to Use AIs to Your Advantage"
|
||||
description="The ultimate directory of AI tools — organized by category with video tutorials to get you started fast and boost your productivity."
|
||||
buttons={[{ text: "Explore Tools", href: "#chat" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-futuristic-ai-interface-featuring-holo-1774918699183-282fe7bd.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="chat" data-section="chat">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "ChatGPT",
|
||||
description: "Writing, coding, business ideas, and task automation.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: MessageSquare,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-futuristic-ai-interface-featuring-holo-1774918699183-282fe7bd.png?_wi=2",
|
||||
imageAlt: "A futuristic AI interface featuring holographic nodes and glowing connections in blue and white. Hig",
|
||||
},
|
||||
{
|
||||
title: "Claude",
|
||||
description: "Powerful long-form writing, analysis, and document processing.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: FileText,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-clean-dashboard-showing-writing-tools--1774918699281-0085c692.png?_wi=1",
|
||||
imageAlt: "A clean dashboard showing writing tools and grammar analysis icons in a modern blue glassmorphism st",
|
||||
},
|
||||
{
|
||||
title: "Perplexity AI",
|
||||
description: "Search engine power with cited sources for research.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Search,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-digital-canvas-with-design-tools-and-i-1774918700053-e28f1c8c.png?_wi=1",
|
||||
imageAlt: "A digital canvas with design tools and image generation icons, clean blue accents.",
|
||||
},
|
||||
]}
|
||||
title="General AI Chat & Assistants"
|
||||
description="Most popular AI tools used daily for writing, coding, and automation."
|
||||
/>
|
||||
</div>
|
||||
<div id="chat" data-section="chat">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="General AI Chat & Assistants"
|
||||
description="Most popular AI tools used daily for writing, coding, and automation."
|
||||
features={[
|
||||
{
|
||||
title: "ChatGPT", description: "Writing, coding, business ideas, and task automation.", bentoComponent: "reveal-icon", icon: MessageSquare
|
||||
},
|
||||
{
|
||||
title: "Claude", description: "Powerful long-form writing, analysis, and document processing.", bentoComponent: "reveal-icon", icon: FileText
|
||||
},
|
||||
{
|
||||
title: "Perplexity AI", description: "Search engine power with cited sources for research.", bentoComponent: "reveal-icon", icon: Search
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="writing" data-section="writing">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Writing",
|
||||
name: "Jasper AI",
|
||||
price: "High Performance",
|
||||
rating: 5,
|
||||
reviewCount: "5k+",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-clean-dashboard-showing-writing-tools--1774918699281-0085c692.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Design",
|
||||
name: "Midjourney",
|
||||
price: "AI Art",
|
||||
rating: 5,
|
||||
reviewCount: "10k+",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/professional-ai-image-editing-tool-inter-1774918699688-3f01b6b9.png",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Design",
|
||||
name: "Canva AI",
|
||||
price: "Graphics & Layout",
|
||||
rating: 4,
|
||||
reviewCount: "8k+",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-digital-canvas-with-design-tools-and-i-1774918700053-e28f1c8c.png?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="AI Writing & Design Tools"
|
||||
description="Tools for content, emails, marketing, graphics, and branding."
|
||||
/>
|
||||
</div>
|
||||
<div id="writing" data-section="writing">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
title="AI Writing & Design Tools"
|
||||
description="Tools for content, emails, marketing, graphics, and branding."
|
||||
products={[
|
||||
{ id: "p1", brand: "Writing", name: "Jasper AI", price: "High Performance", rating: 5, reviewCount: "5k+", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-clean-dashboard-showing-writing-tools--1774918699281-0085c692.png" },
|
||||
{ id: "p2", brand: "Design", name: "Midjourney", price: "AI Art", rating: 5, reviewCount: "10k+", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/professional-ai-image-editing-tool-inter-1774918699688-3f01b6b9.png" },
|
||||
{ id: "p3", brand: "Design", name: "Canva AI", price: "Graphics & Layout", rating: 4, reviewCount: "8k+", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/a-digital-canvas-with-design-tools-and-i-1774918700053-e28f1c8c.png" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How does AI help productivity?",
|
||||
content: "AI automates repetitive tasks and provides smart suggestions to speed up content creation and analysis.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Which tools should I start with?",
|
||||
content: "Start with general AI assistants like ChatGPT or Claude for immediate daily improvements.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Are these tools free?",
|
||||
content: "Most tools listed offer a free tier, while professional features often require a subscription.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/professional-research-and-data-analysis--1774918700103-a11ad7ab.png"
|
||||
title="Why Use AI Tools?"
|
||||
description="See how AI can transform your daily workflow — from writing emails to creating Excel formulas in seconds."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Why Use AI Tools?"
|
||||
description="See how AI can transform your daily workflow — from writing emails to creating Excel formulas in seconds."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "1", title: "How does AI help productivity?", content: "AI automates repetitive tasks and provides smart suggestions to speed up content creation and analysis." },
|
||||
{ id: "2", title: "Which tools should I start with?", content: "Start with general AI assistants like ChatGPT or Claude for immediate daily improvements." },
|
||||
{ id: "3", title: "Are these tools free?", content: "Most tools listed offer a free tier, while professional features often require a subscription." },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BglYrtixDAJXEmeXw8LmSG6O7r/professional-research-and-data-analysis--1774918700103-a11ad7ab.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Impact of AI Adoption"
|
||||
tag="Productivity Growth"
|
||||
tagAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "40%",
|
||||
description: "Reduction in time spent on routine administrative tasks",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "3x",
|
||||
description: "Increase in content production capacity per team member",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "95%",
|
||||
description: "Accuracy in data analysis and automated reporting",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "12+",
|
||||
description: "Hours saved per week on manual project management",
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
value: "500+",
|
||||
description: "Automated workflow executions per month",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Impact of AI Adoption"
|
||||
tag="Productivity Growth"
|
||||
tagAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
metrics={[
|
||||
{ id: "m1", value: "40%", description: "Reduction in time spent on routine administrative tasks" },
|
||||
{ id: "m2", value: "3x", description: "Increase in content production capacity per team member" },
|
||||
{ id: "m3", value: "95%", description: "Accuracy in data analysis and automated reporting" },
|
||||
{ id: "m4", value: "12+", description: "Hours saved per week on manual project management" },
|
||||
{ id: "m5", value: "500+", description: "Automated workflow executions per month" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Categories",
|
||||
items: [
|
||||
{
|
||||
label: "Writing",
|
||||
href: "#writing",
|
||||
},
|
||||
{
|
||||
label: "Design",
|
||||
href: "#design",
|
||||
},
|
||||
{
|
||||
label: "Business",
|
||||
href: "#business",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Mastery",
|
||||
items: [
|
||||
{
|
||||
label: "Why AI Matters",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Quick Reference",
|
||||
href: "#tools",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="Created by Jyte Tapere. Built to help you master AI tools — one category at a time."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Categories", items: [
|
||||
{ label: "Writing", href: "#writing" },
|
||||
{ label: "Design", href: "#design" },
|
||||
{ label: "Business", href: "#business" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Mastery", items: [
|
||||
{ label: "Why AI Matters", href: "#about" },
|
||||
{ label: "Quick Reference", href: "#tools" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="Created by Jyte Tapere. Built to help you master AI tools — one category at a time."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user