Files
4da86a1a-091f-4406-8c1c-e3b…/src/app/how-it-works/page.tsx
2026-01-23 15:24:35 +02:00

159 lines
6.4 KiB
TypeScript

"use client";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
export default function HowItWorksPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="sharp"
contentWidth="compact"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="soft-shadow"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Link AI"
navItems={[
{ name: "Home", id: "/" },
{ name: "How It Works", id: "/how-it-works" },
{ name: "Features", id: "/features" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Start Free Trial",
href: "https://app.linkaitech.com/signup"
}}
/>
</div>
<div id="about" data-section="about">
<MediaSplitTabsAbout
title="How Link AI Works"
description="Seamlessly integrate intelligent AI agents into your existing messaging channels"
tabs={[
{
id: "setup",
label: "Quick Setup",
description: "Connect your WhatsApp Business Account or Instagram in minutes. Link AI automatically syncs with your existing contact lists and conversation history. No complex API configurations required."
},
{
id: "ai-agents",
label: "AI Agents",
description: "Our proprietary AI understands context, sentiment, and customer intent. Agents can answer FAQs, qualify leads, schedule appointments, and escalate complex issues to your team when needed."
},
{
id: "analytics",
label: "Real-Time Analytics",
description: "Monitor conversation metrics, response times, customer satisfaction, and AI performance. Get actionable insights to continuously improve your customer engagement strategy."
}
]}
imageSrc="https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"
imageAlt="Link AI platform interface and team collaboration"
imagePosition="right"
useInvertedBackground="noInvert"
/>
</div>
<div id="process-metrics" data-section="process-metrics">
<MetricCardFourteen
title="Transform Your Customer Support Process with Intelligent Automation"
tag="Process Benefits"
metrics={[
{
id: "1",
value: "< 5 min",
description: "Setup time to get your first AI agent running. Connect WhatsApp or Instagram and start automating conversations instantly."
},
{
id: "2",
value: "24/7",
description: "Round-the-clock availability. Your AI agents never sleep, ensuring customers always receive immediate responses."
}
]}
useInvertedBackground="invertDefault"
/>
</div>
<div id="implementation-guide" data-section="implementation-guide">
<MediaSplitTabsAbout
title="Implementation Made Simple"
description="Get up and running with Link AI in three straightforward steps"
tabs={[
{
id: "connect",
label: "Connect Channels",
description: "Link your WhatsApp Business Account and Instagram profiles through our secure integration. Our platform automatically imports your conversation history and contact lists for seamless continuity."
},
{
id: "customize",
label: "Customize AI",
description: "Train your AI agents with your brand voice, FAQ responses, and escalation rules. Set up automated workflows for lead qualification, appointment booking, and customer support scenarios."
},
{
id: "monitor",
label: "Monitor & Optimize",
description: "Track performance through real-time analytics. Monitor response accuracy, customer satisfaction, and conversation volume. Continuously refine AI responses based on data insights."
}
]}
imageSrc="https://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169863.jpg"
imageAlt="Link AI implementation dashboard"
imagePosition="left"
useInvertedBackground="noInvert"
/>
</div>
<FooterSimple
columns={[
{
title: "Product",
items: [
{ label: "Features", href: "/features" },
{ label: "How It Works", href: "/how-it-works" },
{ label: "Security", href: "#" },
{ label: "Updates", href: "#" }
]
},
{
title: "Company",
items: [
{ label: "How It Works", href: "/how-it-works" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "/contact" }
]
},
{
title: "Resources",
items: [
{ label: "Documentation", href: "#" },
{ label: "API Reference", href: "#" },
{ label: "Community", href: "#" },
{ label: "Support", href: "#" }
]
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Compliance", href: "#" }
]
}
]}
bottomLeftText="© 2025 Link AI. All rights reserved."
bottomRightText="Automating conversations, scaling support."
/>
</ThemeProvider>
);
}