PageSourceSearch

https://afflow.co/

html afflow.co collected 2026-10-02 01:20:09 UTC 171,373 bytes, 2,278 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3<head>
4    <meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7<!-- Fonts (preload instead of @import for performance) -->
8<link rel="preconnect" href="https://fonts.googleapis.com">
9<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&family=Heebo:wght@700;800&family=Caveat:wght@600;700&display=swap">
11
12<!-- Tailwind CSS -->
13<script src="https://cdn.tailwindcss.com"></script>
vendor: 1 bytes, line 13
13
14<script>
15    tailwind.config = {
16        darkMode: ['class'],
17        theme: {
18            container: {
19                center: true,
20                padding: '2rem',
21                screens: { '2xl': '1400px' }
22            },
23            extend: {
24                borderRadius: {
25                    lg: 'var(--radius)',
26                    md: 'calc(var(--radius) - 2px)',
27                    sm: 'calc(var(--radius) - 4px)',
28                },
29                colors: {
30                    background: 'hsl(var(--background))',
31                    foreground: 'hsl(var(--foreground))',
32                    card: { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))' },
33                    popover: { DEFAULT: 'hsl(var(--popover))', foreground: 'hsl(var(--popover-foreground))' },
34                    primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' },
35                    secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))' },
36                    muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' },
37                    accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))' },
38                    destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))' },
39                    border: 'hsl(var(--border))',
40                    input: 'hsl(var(--input))',
41                    ring: 'hsl(var(--ring))',
42                    'afflow-blue': '#2563EB',
43                    'afflow-indigo': '#6366F1',
44                    'mint-green': '#0DAC81',
45                    'sky-accent': '#3B82F6',
46                    'dark-slate': '#1E293B',
47                    'deep-navy': '#0B132B',
48                    'soft-gray': '#F8FAFC',
49                },
50                backgroundImage: {
51                    'afflow-gradient': 'linear-gradient(90deg, #2563EB 0%, #6366F1 100%)',
52                    'afflow-gradient-hover': 'linear-gradient(90deg, #1d4ed8 0%, #4f46e5 100%)',
53                },
54            }
55        }
56    }
57</script>
57
58
59<!-- Lucide Icons -->
60<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
60
61
62<!-- Custom CSS -->
63<link rel="stylesheet" href="/css/main.css">
64
65<!-- Favicon -->
66<link rel="icon" href="/images/favicon.png" type="image/png">
67
68<!-- Google Analytics 4 -->
vendor: 65 bytes, lines 68-70
68
69
70<script async src="https://www.googletagmanager.com/gtag/js?id=
70G-BHG97RB1GY
vendor: 12 bytes, line 70
70"></script>
71<script>
72    window.dataLayer = window.dataLayer || [];
73    function gtag(){dataLayer.push(arguments);}
74    gtag('js', new Date());
75    gtag('config', 'G-BHG97RB1GY', {
76          linker: {
77            domains: ['afflow.co', 'app.afflow.co']
78        }
79    });
80</script>
80
81
82
83<!-- Facebook Pixel -->
84
85<script>
vendor: 419 bytes, lines 85-91
85
86    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
87    n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
88    n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
89    t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
90    document,'script','https://connect.facebook.net/en_US/fbevents.js');
91    fbq('init', '
913424192504404696
vendor: 34 bytes, lines 91-92
91');
92    fbq('track', 'PageView');
93</script>
93
94<noscript><img height="1" width="1" style="display:none"
95    src="https://www.facebook.com/tr?id=3424192504404696&ev=PageView&noscript=1"
96/></noscript>
97
98
99<!-- hreflang tags for multilingual SEO -->
100<link rel="alternate" hreflang="en" href="https://afflow.co/">
101<link rel="alternate" hreflang="he" href="https://afflow.co/he/">
102<link rel="alternate" hreflang="x-default" href="https://afflow.co/">
103
104    <title>AI Affiliate Marketing Automation Tool | Afflow</title>
105    <meta name="description" content="Automate affiliate marketing with AI. Import from AliExpress &amp; Amazon, generate posts, auto-publish to Telegram, WhatsApp &amp; Facebook, track commissions.">
106    <link rel="canonical" href="https://afflow.co/">
107    <meta property="og:title" content="AI Affiliate Marketing Automation Tool | Afflow">
108    <meta property="og:description" content="Automate your affiliate marketing with AI. Import products from AliExpress &amp; Amazon, generate AI-written posts, auto-publish to Telegram, WhatsApp &amp; Facebook groups, and track commissions per post.">
109    <meta property="og:type" content="website">
110    <meta property="og:url" content="https://afflow.co/">
111    <meta property="og:image" content="https://afflow.co/images/og.png">
112    <meta name="twitter:card" content="summary_large_image">
113    <meta name="twitter:title" content="AI Affiliate Marketing Automation Tool | Afflow">
114    <meta name="twitter:description" content="AI affiliate marketing automation. Import products, generate posts, auto-publish to Telegram &amp; WhatsApp, track every commission. Free trial.">
115    <meta name="twitter:image" content="https://afflow.co/images/og.png">
116    
116<script type="application/ld+json">
117    {
118        "@context": "https://schema.org",
119        "@type": "Organization",
120        "name": "Afflow",
121        "url": "https://afflow.co",
122        "logo": "https://afflow.co/images/logo.png",
123        "description": "AI-Powered Affiliate Marketing Automation Platform",
124        "sameAs": []
125    }
126    </script>
126
127    
127<script type="application/ld+json">
128    {
129        "@context": "https://schema.org",
130        "@type": "WebSite",
131        "name": "Afflow",
132        "url": "https://afflow.co"
133    }
134    </script>
134
135    
135<script type="application/ld+json">
136    {
137        "@context": "https://schema.org",
138        "@type": "FAQPage",
139        "mainEntity": [
140            {
141                "@type": "Question",
142                "name": "What do I need to start using Afflow?",
143                "acceptedAnswer": { "@type": "Answer", "text": "To get started, you&#39;ll need: (1) an affiliate account with AliExpress or Amazon, (2) a publishing channel,Telegram group, WhatsApp group, Facebook page, or Instagram account, and (3) optionally a Telegram bot for automated publishing. Signing up for Afflow is free." }
144            },
145            {
146                "@type": "Question",
147                "name": "Do I need technical knowledge to use Afflow?",
148                "acceptedAnswer": { "@type": "Answer", "text": "No. Afflow is built for marketers without technical backgrounds. If you can copy and paste text, you have everything you need. The setup process only involves copying API keys,no coding required." }
149            },
150            {
151                "@type": "Question",
152                "name": "How do I connect to the AliExpress API?",
153                "acceptedAnswer": { "@type": "Answer", "text": "To connect to the AliExpress API, you&#39;ll need to create an application on the AliExpress affiliate platform and obtain an App Key, App Secret, and Tracking ID. The process is simple and takes about 5 minutes. For a detailed guide, refer to Afflow&#39;s support article." }
154            },
155            {
156                "@type": "Question",
157                "name": "How do I create a Telegram bot and get the token?",
158                "acceptedAnswer": { "@type": "Answer", "text": "Send a message to @BotFather on Telegram, send `/newbot`, choose a name for your bot, and receive a token that looks like this: `1234567890:ABCdefGHIjklMNOpqrs`. Copy the token to Afflow settings - that&#39;s it." }
159            },
160            {
161                "@type": "Question",
162                "name": "How much can I earn with affiliate marketing using Afflow?",
163                "acceptedAnswer": { "@type": "Answer", "text": "Earnings depend on your audience size and posting consistency. Affiliate marketers with a few thousand Telegram or WhatsApp subscribers typically earn $200-$500/month. As you grow your channels and optimize your strategy with Afflow&#39;s tracking data, income scales significantly. The automation means you can manage more channels without spending more time." }
164            },
165            {
166                "@type": "Question",
167                "name": "What results can I expect in the first month?",
168                "acceptedAnswer": { "@type": "Answer", "text": "In your first month, most users see a 90% reduction in time spent on content creation and publishing. Instead of manually writing posts and copy-pasting to each group, Afflow handles it in seconds. The real impact comes from consistency , with automation, you can post more frequently across more channels, which directly increases your commissions." }
169            }
170        ]
171    }
172    </script>
172
173</head>
174<body class="min-h-screen bg-background text-foreground">
175    <!-- Sticky Header -->
176<header id="site-header" class="sticky top-0 z-50 w-full border-b transition-all duration-300 bg-white">
177    <div class="container relative flex h-16 items-stretch justify-between">
178
179        <!-- Logo -->
180        <a href="/" class="flex items-center space-x-2 self-center" aria-label="Afflow Home">
181            <img src="/images/logo.png" alt="Afflow Logo" class="h-11 w-auto">
182        </a>
183
184        <!-- Desktop Navigation - Absolutely Centered -->
185        <nav class="hidden md:flex items-stretch gap-6 absolute left-1/2 -translate-x-1/2 h-16">
186
187            <!-- Why Afflow? Dropdown -->
188            <button data-dropdown-trigger="why" aria-expanded="false" aria-controls="panel-why" class="relative flex items-center gap-1 text-sm font-medium transition-colors hover:text-primary">
189                Why Afflow?
190                <i data-lucide="chevron-down" class="h-3.5 w-3.5 transition-transform duration-200"></i>
191                <span class="absolute bottom-0 left-0 h-0.5 w-full bg-primary origin-left transition-transform duration-300 scale-x-0" data-dropdown-underline="why"></span>
192            </button>
193
194            <!-- Marketplaces Dropdown -->
195            <button data-dropdown-trigger="marketplaces" aria-expanded="false" aria-controls="panel-marketplaces" class="relative flex items-center gap-1 text-sm font-medium transition-colors hover:text-primary">
196                Marketplaces
197                <i data-lucide="chevron-down" class="h-3.5 w-3.5 transition-transform duration-200"></i>
198                <span class="absolute bottom-0 left-0 h-0.5 w-full bg-primary origin-left transition-transform duration-300 scale-x-0" data-dropdown-underline="marketplaces"></span>
199            </button>
200
201            <!-- Integrations Dropdown -->
202            <button data-dropdown-trigger="integrations" aria-expanded="false" aria-controls="panel-integrations" class="relative flex items-center gap-1 text-sm font-medium transition-colors hover:text-primary">
203                Integrations
204                <i data-lucide="chevron-down" class="h-3.5 w-3.5 transition-transform duration-200"></i>
205                <span class="absolute bottom-0 left-0 h-0.5 w-full bg-primary origin-left transition-transform duration-300 scale-x-0" data-dropdown-underline="integrations"></span>
206            </button>
207
208            <!-- Pricing -->
209            <a href="/pricing" class="relative flex items-center text-sm font-medium hover:text-primary transition-colors">
210                Pricing
211            </a>
212
213            <!-- Blog -->
214            <a href="/blog" class="relative flex items-center text-sm font-medium hover:text-primary transition-colors">
215                Blog
216            </a>
217        </nav>
218
219        <!-- Right side: CTA + Language + Hamburger -->
220        <div class="flex items-center gap-2 self-center">
221            <!-- Language Switcher -->
222            <div class="relative" data-dropdown="lang">
223                <button data-dropdown-trigger="lang" aria-expanded="false" aria-label="Language" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-9 px-3">
224                    <i data-lucide="globe" class="h-4 w-4"></i>
225                    <span class="font-medium">EN</span>
226                </button>
227                <div data-dropdown-panel="lang" class="absolute right-0 mt-2 w-36 bg-white rounded-md shadow-md border py-1 hidden z-50">
228                    <a href="/" class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-accent cursor-pointer">
229                        <i data-lucide="check" class="mr-2 h-4 w-4"></i>
230                        English
231                    </a>
232                    <a href="/he/" class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-accent cursor-pointer">
233                        <span class="ml-6"></span>
234                        עברית
235                    </a>
236                </div>
237            </div>
238
239            <a href="https://app.afflow.co/signin" rel="noopener">
240                <button class="hidden sm:inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-3">
241                    Sign In
242                </button>
243            </a>
244            <a href="https://app.afflow.co/signup" rel="noopener">
245                <button class="hidden sm:inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors h-9 px-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white shadow-md hover:shadow-lg transition-all duration-300">
246                    Start for Free
247                </button>
248            </a>
249
250            <button id="mobile-menu-btn" aria-expanded="false" aria-controls="mobile-menu" class="md:hidden inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-9 w-9" aria-label="Menu">
251                <i data-lucide="menu" class="h-5 w-5" id="menu-icon-open"></i>
252                <i data-lucide="x" class="h-5 w-5 hidden" id="menu-icon-close"></i>
253            </button>
254        </div>
255    </div>
256
257    <!-- Why Afflow Panel -->
258    <div data-dropdown-panel="why" id="panel-why" role="region" class="hidden absolute top-full left-0 w-full border-b bg-white shadow-2xl z-40">
259        <div class="container py-7">
260            <div class="grid grid-cols-3 gap-3">
261                <a href="#flow-showcase" class="dropdown-item group/card flex items-start gap-3 rounded-xl border border-transparent p-4 hover:border-border hover:bg-muted/60 transition-colors" style="--i:0">
262                    <div class="rounded-lg bg-primary/10 p-2.5 shrink-0 group-hover/card:bg-primary/20 transition-colors">
263                        <i data-lucide="sparkles" class="h-5 w-5 text-primary"></i>
264                    </div>
265                    <div>
266                        <p class="text-sm font-semibold leading-none">AI Content Writer</p>
267                        <p class="mt-1.5 text-xs text-muted-foreground leading-relaxed">Generate compelling copy in seconds</p>
268                    </div>
269                </a>
270                <a href="#flow-showcase" class="dropdown-item group/card flex items-start gap-3 rounded-xl border border-transparent p-4 hover:border-border hover:bg-muted/60 transition-colors" style="--i:1">
271                    <div class="rounded-lg bg-primary/10 p-2.5 shrink-0 group-hover/card:bg-primary/20 transition-colors">
272                        <i data-lucide="search" class="h-5 w-5 text-primary"></i>
273                    </div>
274                    <div>
275                        <p class="text-sm font-semibold leading-none">AI Product Discovery</p>
276                        <p class="mt-1.5 text-xs text-muted-foreground leading-relaxed">Find trending products automatically</p>
277                    </div>
278                </a>
279                <a href="#features" class="dropdown-item group/card flex items-start gap-3 rounded-xl border border-transparent p-4 hover:border-border hover:bg-muted/60 transition-colors" style="--i:2">
280                    <div class="rounded-lg bg-primary/10 p-2.5 shrink-0 group-hover/card:bg-primary/20 transition-colors">
281                        <i data-lucide="refresh-cw" class="h-5 w-5 text-primary"></i>
282                    </div>
283                    <div>
284                        <p class="text-sm font-semibold leading-none">Auto Repost</p>
285                        <p class="mt-1.5 text-xs text-muted-foreground leading-relaxed">Schedule &amp; repeat top performers</p>
286                    </div>
287                </a>
288                <a href="#features" class="dropdown-item group/card flex items-start gap-3 rounded-xl border border-transparent p-4 hover:border-border hover:bg-muted/60 transition-colors" style="--i:3">
289                    <div class="rounded-lg bg-primary/10 p-2.5 shrink-0 group-hover/card:bg-primary/20 transition-colors">
290                        <i data-lucide="bar-chart-2" class="h-5 w-5 text-primary"></i>
291                    </div>
292                    <div>
293                        <p class="text-sm font-semibold leading-none">Post Tracking</p>
294                        <p class="mt-1.5 text-xs text-muted-foreground leading-relaxed">Track conversions &amp; revenue per post</p>
295                    </div>
296                </a>
297                <a href="#features" class="dropdown-item group/card flex items-start gap-3 rounded-xl border border-transparent p-4 hover:border-border hover:bg-muted/60 transition-colors" style="--i:4">
298                    <div class="rounded-lg bg-pink-500/10 p-2.5 shrink-0 group-hover/card:bg-pink-500/20 transition-colors">
299                        <i data-lucide="image" class="h-5 w-5 text-pink-500"></i>
300                    </div>
301                    <div>
302                        <p class="text-sm font-semibold leading-none">AI Image Optimizer</p>
303                        <p class="mt-1.5 text-xs text-muted-foreground leading-relaxed">Transform product photos into marketing images</p>
304                    </div>
305                </a>
306                <a href="/chrome-extension" class="dropdown-item group/card flex items-start gap-3 rounded-xl border border-transparent p-4 hover:border-border hover:bg-muted/60 transition-colors" style="--i:5">
307                    <div class="rounded-lg bg-primary/10 p-2.5 shrink-0 group-hover/card:bg-primary/20 transition-colors">
308                        <i data-lucide="puzzle" class="h-5 w-5 text-primary"></i>
309                    </div>
310                    <div>
311                        <p class="text-sm font-semibold leading-none">Chrome Extension</p>
312                        <p class="mt-1.5 text-xs text-muted-foreground leading-relaxed">Import products with one click</p>
313                    </div>
314                </a>
315            </div>
316        </div>
317    </div>
318
319    <!-- Marketplaces Panel -->
320    <div data-dropdown-panel="marketplaces" id="panel-marketplaces" role="region" class="hidden absolute top-full left-0 w-full border-b bg-white shadow-2xl z-40">
321        <div class="container py-7">
322            <div class="grid grid-cols-6 gap-3">
323                <a href="/aliexpress" class="dropdown-item group/card relative flex flex-col items-center gap-3 rounded-xl border border-transparent p-5 hover:border-border hover:bg-muted/60 transition-colors text-center" style="--i:0">
324                    <img src="/images/aliexpress-colored.svg" alt="AliExpress" class="h-7 w-auto object-contain">
325                    <div>
326                        <p class="text-sm font-semibold leading-none">AliExpress</p>
327                        <p class="mt-1.5 text-xs text-muted-foreground leading-snug">Millions of products &amp; commissions</p>
328                    </div>
329                </a>
330                <a href="/amazon" class="dropdown-item group/card relative flex flex-col items-center gap-3 rounded-xl border border-transparent p-5 hover:border-border hover:bg-muted/60 transition-colors text-center" style="--i:1">
331                    <img src="/images/amazon-colored.svg" alt="Amazon" class="h-7 w-auto object-contain">
332                    <div>
333                        <p class="text-sm font-semibold leading-none">Amazon</p>
334                        <p class="mt-1.5 text-xs text-muted-foreground leading-snug">World&#39;s largest affiliate program</p>
335                    </div>
336                </a>
337                <div class="dropdown-item group/card relative flex flex-col items-center gap-3 rounded-xl border border-transparent p-5 transition-colors text-center opacity-60 pointer-events-none" style="--i:2">
338                    <span class="absolute top-2 right-2 text-[10px] font-semibold uppercase tracking-wide bg-foreground text-background px-1.5 py-0.5 rounded-full">Soon</span>
339                    <img src="/images/dhgate-colored.svg" alt="DHgate" class="h-7 w-auto object-contain">
340                    <div>
341                        <p class="text-sm font-semibold leading-none">DHgate</p>
342                        <p class="mt-1.5 text-xs text-muted-foreground leading-snug">Wholesale prices, affiliate rewards</p>
343                    </div>
344                </div>
345            </div>
346        </div>
347    </div>
348
349    <!-- Integrations Panel -->
350    <div data-dropdown-panel="integrations" id="panel-integrations" role="region" class="hidden absolute top-full left-0 w-full border-b bg-white shadow-2xl z-40">
351        <div class="container py-7">
352            <div class="grid grid-cols-6 gap-3">
353                <a href="/facebook" class="dropdown-item group/card relative flex flex-col items-center gap-3 rounded-xl border border-transparent p-5 hover:border-border hover:bg-muted/60 transition-colors text-center" style="--i:0">
354                    <div class="rounded-xl p-3 flex items-center justify-center" style="background-color: #1877F2">
355                        <img src="/images/facebook.svg" alt="Facebook" class="h-6 w-6 object-contain" style="filter: invert(1) brightness(10)">
356                    </div>
357                    <div>
358                        <p class="text-sm font-semibold leading-none">Facebook</p>
359                        <p class="mt-1.5 text-xs text-muted-foreground leading-snug">Post to Pages</p>
360                    </div>
361                </a>
362                <a href="/whatsapp" class="dropdown-item group/card relative flex flex-col items-center gap-3 rounded-xl border border-transparent p-5 hover:border-border hover:bg-muted/60 transition-colors text-center" style="--i:1">
363                    <div class="rounded-xl p-3 flex items-center justify-center" style="background-color: #25D366">
364                        <img src="/images/whatsapp.svg" alt="WhatsApp" class="h-6 w-6 object-contain" style="filter: invert(1) brightness(10)">
365                    </div>
366                    <div>
367                        <p class="text-sm font-semibold leading-none">WhatsApp</p>
368                        <p class="mt-1.5 text-xs text-muted-foreground leading-snug">Share to WhatsApp groups</p>
369                    </div>
370                </a>
371                <a href="/telegram" class="dropdown-item group/card relative flex flex-col items-center gap-3 rounded-xl border border-transparent p-5 hover:border-border hover:bg-muted/60 transition-colors text-center" style="--i:2">
372                    <div class="rounded-xl p-3 flex items-center justify-center" style="background-color: #26A5E4">
373                        <img src="/images/telegram.svg" alt="Telegram" class="h-6 w-6 object-contain" style="filter: invert(1) brightness(10)">
374                    </div>
375                    <div>
376                        <p class="text-sm font-semibold leading-none">Telegram</p>
377                        <p class="mt-1.5 text-xs text-muted-foreground leading-snug">Publish to channels</p>
378                    </div>
379                </a>
380                <a href="/instagram" class="dropdown-item group/card relative flex flex-col items-center gap-3 rounded-xl border border-transparent p-5 hover:border-border hover:bg-muted/60 transition-colors text-center" style="--i:3">
381                    <div class="rounded-xl p-3 flex items-center justify-center" style="background-color: #E4405F">
382                        <img src="/images/instagram.svg" alt="Instagram" class="h-6 w-6 object-contain" style="filter: invert(1) brightness(10)">
383                    </div>
384                    <div>
385                        <p class="text-sm font-semibold leading-none">Instagram</p>
386                        <p class="mt-1.5 text-xs text-muted-foreground leading-snug">Publish posts &amp; reels</p>
387                    </div>
388                </a>
389                <a href="/pinterest" class="dropdown-item group/card relative flex flex-col items-center gap-3 rounded-xl border border-transparent p-5 hover:border-border hover:bg-muted/60 transition-colors text-center" style="--i:4">
390                    <div class="rounded-xl p-3 flex items-center justify-center" style="background-color: #BD081C">
391                        <img src="/images/pinterest.svg" alt="Pinterest" class="h-6 w-6 object-contain" style="filter: invert(1) brightness(10)">
392                    </div>
393                    <div>
394                        <p class="text-sm font-semibold leading-none">Pinterest</p>
395                        <p class="mt-1.5 text-xs text-muted-foreground leading-snug">Create pins automatically</p>
396                    </div>
397                </a>
398            </div>
399        </div>
400    </div>
401
402    <!-- Mobile Menu -->
403    <div id="mobile-menu" class="md:hidden hidden border-t bg-background/98 backdrop-blur">
404        <nav class="container flex flex-col py-4 gap-1">
405            <!-- Why Afflow? -->
406            <button data-mobile-accordion-trigger="why" aria-expanded="false" class="flex items-center justify-between px-3 py-2 rounded-lg text-sm font-semibold hover:bg-muted transition-colors w-full text-start">
407                Why Afflow?
408                <i data-lucide="chevron-down" class="h-4 w-4 text-muted-foreground transition-transform duration-200"></i>
409            </button>
410            <div data-mobile-accordion-content="why" class="hidden">
411                <a href="#flow-showcase" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
412                    <i data-lucide="sparkles" class="h-4 w-4 text-muted-foreground shrink-0"></i>
413                    AI Content Writer
414                </a>
415                <a href="#flow-showcase" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
416                    <i data-lucide="search" class="h-4 w-4 text-muted-foreground shrink-0"></i>
417                    AI Product Discovery
418                </a>
419                <a href="#features" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
420                    <i data-lucide="refresh-cw" class="h-4 w-4 text-muted-foreground shrink-0"></i>
421                    Auto Repost
422                </a>
423                <a href="#features" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
424                    <i data-lucide="bar-chart-2" class="h-4 w-4 text-muted-foreground shrink-0"></i>
425                    Post Tracking
426                </a>
427                <a href="#features" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
428                    <i data-lucide="image" class="h-4 w-4 text-pink-500 shrink-0"></i>
429                    AI Image Optimizer
430                </a>
431                <a href="/chrome-extension" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
432                    <i data-lucide="puzzle" class="h-4 w-4 text-muted-foreground shrink-0"></i>
433                    Chrome Extension
434                </a>
435            </div>
436
437            <!-- Marketplaces -->
438            <button data-mobile-accordion-trigger="marketplaces" aria-expanded="false" class="flex items-center justify-between px-3 py-2 rounded-lg text-sm font-semibold hover:bg-muted transition-colors w-full text-start">
439                Marketplaces
440                <i data-lucide="chevron-down" class="h-4 w-4 text-muted-foreground transition-transform duration-200"></i>
441            </button>
442            <div data-mobile-accordion-content="marketplaces" class="hidden">
443                <a href="/aliexpress" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
444                    <img src="/images/aliexpress-colored.svg" alt="AliExpress" class="h-4 w-4 object-contain shrink-0">
445                    AliExpress
446                </a>
447                <a href="/amazon" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
448                    <img src="/images/amazon-colored.svg" alt="Amazon" class="h-4 w-4 object-contain shrink-0">
449                    Amazon
450                </a>
451            </div>
452
453            <!-- Integrations -->
454            <button data-mobile-accordion-trigger="integrations" aria-expanded="false" class="flex items-center justify-between px-3 py-2 rounded-lg text-sm font-semibold hover:bg-muted transition-colors w-full text-start">
455                Integrations
456                <i data-lucide="chevron-down" class="h-4 w-4 text-muted-foreground transition-transform duration-200"></i>
457            </button>
458            <div data-mobile-accordion-content="integrations" class="hidden">
459                <a href="/facebook" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
460                    <img src="/images/facebook.svg" alt="Facebook" class="h-4 w-4 object-contain shrink-0">
461                    Facebook
462                </a>
463                <a href="/whatsapp" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
464                    <img src="/images/whatsapp.svg" alt="WhatsApp" class="h-4 w-4 object-contain shrink-0">
465                    WhatsApp
466                </a>
467                <a href="/telegram" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
468                    <img src="/images/telegram.svg" alt="Telegram" class="h-4 w-4 object-contain shrink-0">
469                    Telegram
470                </a>
471                <a href="/instagram" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
472                    <img src="/images/instagram.svg" alt="Instagram" class="h-4 w-4 object-contain shrink-0">
473                    Instagram
474                </a>
475                <a href="/pinterest" class="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
476                    <img src="/images/pinterest.svg" alt="Pinterest" class="h-4 w-4 object-contain shrink-0">
477                    Pinterest
478                </a>
479            </div>
480
481            <div class="border-t my-1"></div>
482
483            <a href="/pricing" class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
484                Pricing
485            </a>
486            <a href="/blog" class="flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium hover:bg-muted transition-colors">
487                Blog
488            </a>
489
490            <div class="border-t mt-2 pt-3 flex flex-col gap-2">
491                <a href="https://app.afflow.co/signin" rel="noopener">
492                    <button class="w-full inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4">
493                        Sign In
494                    </button>
495                </a>
496                <a href="https://app.afflow.co/signup" rel="noopener">
497                    <button class="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white">
498                        Start for Free
499                    </button>
500                </a>
501            </div>
502        </nav>
503    </div>
504</header>
505
506
507    <main>
508        <!-- Hero Section -->
509<section class="pt-20 md:pt-28 pb-12 md:pb-16 relative overflow-hidden" style="background: linear-gradient(170deg, #020617 0%, #0c1a3d 30%, #132e6b 52%, #1a4494 72%, #2563EB 100%)">
510    <!-- Floating orbs -->
511    <div class="absolute top-[15%] left-[10%] w-[350px] h-[350px] rounded-full pointer-events-none amz-orb-float" style="background: rgba(255,255,255,0.06); filter: blur(80px);"></div>
512    <div class="absolute top-[40%] right-[5%] w-[280px] h-[280px] rounded-full pointer-events-none amz-orb-float-delay" style="background: rgba(59,130,246,0.14); filter: blur(90px);"></div>
513    <div class="absolute bottom-[20%] left-[30%] w-[200px] h-[200px] rounded-full pointer-events-none amz-orb-float" style="background: rgba(96,165,250,0.06); filter: blur(70px); animation-delay: -3s;"></div>
514    <!-- Wave shapes at bottom -->
515    <div class="absolute bottom-0 left-0 right-0 pointer-events-none">
516        <svg viewBox="0 0 800 280" fill="none" preserveAspectRatio="none" style="width: 100%; height: 180px; display: block;">
517            <defs>
518                <linearGradient id="hero-wave-1" x1="0" y1="0" x2="800" y2="0" gradientUnits="userSpaceOnUse">
519                    <stop offset="0%" stop-color="#1d4ed8" />
520                    <stop offset="50%" stop-color="#2563EB" />
521                    <stop offset="100%" stop-color="#3b82f6" />
522                </linearGradient>
523                <linearGradient id="hero-wave-2" x1="0" y1="0" x2="800" y2="0" gradientUnits="userSpaceOnUse">
524                    <stop offset="0%" stop-color="#2563EB" />
525                    <stop offset="100%" stop-color="#60a5fa" />
526                </linearGradient>
527            </defs>
528            <path d="M0 280V180C40 150 120 100 200 90C300 78 380 120 480 140C560 155 660 130 740 150C780 160 800 175 800 175V280H0Z" fill="url(#hero-wave-1)" opacity="0.3" />
529            <path d="M0 280V220C60 195 150 170 260 175C370 180 440 210 540 200C620 192 720 210 800 230V280H0Z" fill="url(#hero-wave-2)" opacity="0.45" />
530        </svg>
531    </div>
532
533    <div class="container relative z-10">
534        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
535
536            <!-- Left: Text content -->
537            <div>
538                <!-- Trust badge -->
539                <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 border border-white/20 rounded-full backdrop-blur-sm mb-6 animate-fade-in-up" style="animation-delay: 0.05s">
540                    <i data-lucide="user-check" class="h-4 w-4 text-blue-300"></i>
541                    <span class="text-sm font-medium text-blue-200">Built by an affiliate marketer, for affiliate marketers</span>
542                </div>
543
544                <!-- Headline -->
545                <h1 class="amz-hero-headline text-4xl md:text-5xl lg:text-[3.2rem] font-extrabold leading-[1.08] tracking-tight mb-6 text-white animate-fade-in-up" style="animation-delay: 0.1s">
546                    Affiliate marketing automation<br>
547                    <span class="amz-accent-text">#withAfflow</span>
548                </h1>
549
550                <!-- Main Message -->
551                <p class="text-[0.95rem] md:text-base text-white/50 mb-8 leading-relaxed max-w-[28rem] animate-fade-in-up" style="animation-delay: 0.2s">
552                    The all-in-one affiliate marketing platform that finds trending products, writes AI-optimized posts, auto-publishes to your channels, and tracks every commission back to the post that earned it.
553                </p>
554
555                <!-- CTA Buttons -->
556                <div class="flex flex-col sm:flex-row gap-4 items-start mb-4 animate-fade-in-up" style="animation-delay: 0.3s">
557                    <a href="https://app.afflow.co/signup" rel="noopener" class="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/30 hover:shadow-blue-400/40 transition-all hover:scale-105 text-lg">
558                        <i data-lucide="sparkles" class="h-5 w-5"></i>
559                        Start Free Trial
560                    </a>
561                    <a href="#flow-showcase" class="inline-flex items-center gap-2 px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-xl border border-white/20 transition-all hover:scale-105 text-lg backdrop-blur-sm">
562                        <i data-lucide="arrow-down-circle" class="h-5 w-5"></i>
563                        See How It Works
564                    </a>
565                </div>
566
567                <!-- Micro-benefits -->
568                <div class="flex flex-col sm:flex-row sm:items-center gap-3 text-white/40 animate-fade-in-up" style="animation-delay: 0.4s">
569                    <div class="flex items-center gap-2">
570                        <i data-lucide="check" class="h-4 w-4 text-emerald-400 flex-shrink-0"></i>
571                        <span class="text-sm">Works while you sleep</span>
572                    </div>
573                    <span class="hidden sm:inline text-slate-600">&bull;</span>
574                    <div class="flex items-center gap-2">
575                        <i data-lucide="check" class="h-4 w-4 text-emerald-400 flex-shrink-0"></i>
576                        <span class="text-sm">Know exactly what sold</span>
577                    </div>
578                    <span class="hidden sm:inline text-slate-600">&bull;</span>
579                    <div class="flex items-center gap-2">
580                        <i data-lucide="check" class="h-4 w-4 text-emerald-400 flex-shrink-0"></i>
581                        <span class="text-sm">AI finds winning products</span>
582                    </div>
583                </div>
584            </div>
585
586            <!-- Right: Product screenshot with animation -->
587            <div class="relative order-first lg:order-last animate-fade-in-up" style="animation-delay: 0.2s">
588                <!-- Glow behind the card -->
589                <div class="absolute inset-0 bg-blue-500/10 blur-3xl rounded-full scale-75"></div>
590                <div class="absolute inset-0 bg-indigo-500/5 blur-3xl rounded-full scale-75 translate-x-8"></div>
591
592                <!-- Screenshot card with browser chrome -->
593                <div class="relative rounded-2xl border border-white/10 bg-slate-900/80 shadow-[0_40px_80px_rgba(0,0,0,0.6)] overflow-hidden hero-screenshot-float">
594                    <!-- Fake browser bar -->
595                    <div class="flex items-center gap-2 px-4 py-3 bg-slate-800/90 border-b border-slate-700/50">
596                        <div class="flex gap-1.5">
597                            <div class="w-3 h-3 rounded-full bg-red-500/70"></div>
598                            <div class="w-3 h-3 rounded-full bg-yellow-500/70"></div>
599                            <div class="w-3 h-3 rounded-full bg-green-500/70"></div>
600                        </div>
601                        <div class="flex-1 mx-3">
602                            <div class="bg-slate-700/60 rounded-md px-3 py-1 text-xs text-slate-400 font-mono truncate">
603                                app.afflow.co
604                            </div>
605                        </div>
606                    </div>
607                    <!-- Screenshot image -->
608                    <div class="aspect-[16/9] overflow-hidden">
609                        <img src="/images/hero.webp" alt="Afflow dashboard" class="w-full h-full object-contain object-top">
610                    </div>
611                </div>
612
613                <!-- Floating stat badge -->
614                <div class="absolute -bottom-2 -left-2 md:-left-4 amz-float-card animate-fade-in-up" style="animation-delay: 1.2s">
615                    <div class="bg-slate-800/90 border border-emerald-500/20 rounded-xl px-4 py-3 shadow-2xl backdrop-blur-md">
616                        <div class="flex items-center gap-2">
617                            <div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
618                            <span class="text-[11px] font-medium text-slate-300">10K+ posts published</span>
619                        </div>
620                    </div>
621                </div>
622
623                <!-- Floating AI badge -->
624                <div class="absolute -top-2 -right-2 md:-right-4 amz-float-card animate-fade-in-up" style="animation-delay: 1s">
625                    <div class="bg-slate-800/90 border border-blue-500/20 rounded-xl px-4 py-3 shadow-2xl backdrop-blur-md">
626                        <div class="flex items-center gap-1.5">
627                            <i data-lucide="zap" class="h-3.5 w-3.5 text-blue-400"></i>
628                            <span class="text-[11px] font-semibold text-blue-300">AI-powered</span>
629                        </div>
630                    </div>
631                </div>
632            </div>
633        </div>
634
635        <!-- Logo strip — muted, inside hero -->
636        <div class="mt-24 animate-fade-in-up" style="animation-delay: 0.6s">
637            <div class="flex items-center justify-center gap-10 md:gap-14 flex-wrap opacity-40">
638                <img loading="lazy" src="/images/aliexpress-colored.svg" alt="AliExpress" class="h-[28px] w-auto object-contain brightness-0 invert">
639                <img loading="lazy" src="/images/amazon-colored.svg" alt="Amazon" class="h-[28px] w-auto object-contain brightness-0 invert">
640                <img loading="lazy" src="/images/telegram.svg" alt="Telegram" class="h-[32px] w-[32px] object-contain brightness-0 invert">
641                <img loading="lazy" src="/images/whatsapp.svg" alt="WhatsApp" class="h-[32px] w-[32px] object-contain brightness-0 invert">
642                <img loading="lazy" src="/images/facebook.svg" alt="Facebook" class="h-[32px] w-[32px] object-contain brightness-0 invert">
643                <img loading="lazy" src="/images/instagram.svg" alt="Instagram" class="h-[32px] w-[32px] object-contain brightness-0 invert">
644            </div>
645        </div>
646    </div>
647</section>
648
649        <!-- Flow Showcase Section -->
650<section id="flow-showcase" class="py-24 md:py-32 bg-gradient-to-b from-background to-muted/30 relative overflow-hidden">
651    <!-- Background -->
652    <div class="absolute inset-0 pointer-events-none">
653        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[600px] bg-blue-500/[0.03] rounded-full blur-[120px]"></div>
654    </div>
655
656    <div class="container relative z-10">
657        <!-- Section header -->
658        <div class="text-center mb-16 md:mb-20">
659            <p class="text-xs font-mono tracking-[0.25em] uppercase text-blue-600 mb-3">
660                How It Works
661            </p>
662            <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-4 tracking-tight">
663                From product to profit, fully automated
664            </h2>
665            <p class="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
666                See exactly how Afflow takes a product and turns it into published posts across all your channels,tracking every sale back to the post that made it.
667            </p>
668        </div>
669
670        <!-- Flow timeline -->
671        <div class="max-w-5xl mx-auto">
672            <!-- Step indicators -->
673            <div class="flex items-center justify-between mb-12 px-4 md:px-0" id="flow-steps">
674                <button data-flow-step="0" class="flex flex-col items-center gap-2 group relative z-10">
675                    <div class="w-12 h-12 md:w-14 md:h-14 rounded-2xl flex items-center justify-center transition-all duration-500 bg-blue-600 shadow-lg shadow-blue-500/30 scale-110">
676                        <i data-lucide="search" class="w-5 h-5 md:w-6 md:h-6 text-white"></i>
677                    </div>
678                    <span class="text-[11px] md:text-xs font-semibold transition-colors duration-300 text-center max-w-[80px] md:max-w-none text-blue-600">Discover</span>
679                </button>
680
681                <button data-flow-step="1" class="flex flex-col items-center gap-2 group relative z-10">
682                    <div class="w-12 h-12 md:w-14 md:h-14 rounded-2xl flex items-center justify-center transition-all duration-500 bg-muted border border-border group-hover:border-muted-foreground/30">
683                        <i data-lucide="sparkles" class="w-5 h-5 md:w-6 md:h-6 text-muted-foreground group-hover:text-foreground"></i>
684                    </div>
685                    <span class="text-[11px] md:text-xs font-semibold transition-colors duration-300 text-center max-w-[80px] md:max-w-none text-muted-foreground">Generate</span>
686                </button>
687
688                <button data-flow-step="2" class="flex flex-col items-center gap-2 group relative z-10">
689                    <div class="w-12 h-12 md:w-14 md:h-14 rounded-2xl flex items-center justify-center transition-all duration-500 bg-muted border border-border group-hover:border-muted-foreground/30">
690                        <i data-lucide="send" class="w-5 h-5 md:w-6 md:h-6 text-muted-foreground group-hover:text-foreground"></i>
691                    </div>
692                    <span class="text-[11px] md:text-xs font-semibold transition-colors duration-300 text-center max-w-[80px] md:max-w-none text-muted-foreground">Publish</span>
693                </button>
694
695                <button data-flow-step="3" class="flex flex-col items-center gap-2 group relative z-10">
696                    <div class="w-12 h-12 md:w-14 md:h-14 rounded-2xl flex items-center justify-center transition-all duration-500 bg-muted border border-border group-hover:border-muted-foreground/30">
697                        <i data-lucide="bar-chart-3" class="w-5 h-5 md:w-6 md:h-6 text-muted-foreground group-hover:text-foreground"></i>
698                    </div>
699                    <span class="text-[11px] md:text-xs font-semibold transition-colors duration-300 text-center max-w-[80px] md:max-w-none text-muted-foreground">Track</span>
700                </button>
701            </div>
702
703            <!-- Animated content area -->
704            <div class="relative">
705                <!-- Progress bar -->
706                <div class="absolute -top-6 left-0 right-0 h-[2px] bg-border/50 rounded-full overflow-hidden">
707                    <div class="h-full bg-gradient-to-r from-blue-500 to-cyan-400 rounded-full step-progress" id="flow-progress-bar"></div>
708                </div>
709
710                <!-- Step content card -->
711                <div class="rounded-2xl border border-border bg-card overflow-hidden shadow-xl shadow-black/5">
712                    <!-- Step 0: Discover -->
713                    <div data-flow-content="0" class="grid grid-cols-1 lg:grid-cols-2 gap-0">
714                        <!-- Left: Description -->
715                        <div class="p-8 md:p-10 lg:p-12 flex flex-col justify-center">
716                            <div class="inline-flex items-center gap-2 mb-4">
717                                <span class="text-xs font-bold text-blue-600 bg-blue-500/10 px-2.5 py-1 rounded-md">
718                                    Step 1
719                                </span>
720                            </div>
721                            <h3 class="text-2xl md:text-3xl font-bold text-foreground mb-4 leading-tight">
722                                AI finds winning products for you
723                            </h3>
724                            <p class="text-muted-foreground leading-relaxed mb-6 text-[15px]">
725                                Afflow&#39;s AI agent discovers trending products with high commission rates,or import manually from AliExpress and Amazon in one click.
726                            </p>
727                            <ul class="space-y-3">
728                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 0ms">
729                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
730                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
731                                    </div>
732                                    <span class="text-sm text-foreground/80">AI-powered product discovery agent</span>
733                                </li>
734                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 150ms">
735                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
736                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
737                                    </div>
738                                    <span class="text-sm text-foreground/80">One-click import from AliExpress &amp; Amazon</span>
739                                </li>
740                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 300ms">
741                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
742                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
743                                    </div>
744                                    <span class="text-sm text-foreground/80">Auto-extract images, prices &amp; commissions</span>
745                                </li>
746                            </ul>
747                        </div>
748                        <!-- Right: Visual -->
749                        <div class="relative bg-slate-900 p-6 md:p-8 flex items-center justify-center min-h-[320px] lg:min-h-[400px] border-t lg:border-t-0 lg:border-l border-border">
750                            <div class="w-full max-w-sm space-y-3 step-visual">
751                                <!-- AI scanning header -->
752                                <div class="flex items-center gap-2 mb-1 px-1">
753                                    <div class="w-5 h-5 rounded-full bg-gradient-to-br from-violet-500 to-blue-500 flex items-center justify-center">
754                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 1v1.5m0 5V9m4-4H7.5M2.5 5H1m6.5-2.5L6.5 3.5m-3 3L2.5 7.5m5 0L6.5 6.5m-3-3L2.5 2.5" stroke="white" stroke-width="0.8" stroke-linecap="round"/></svg>
755                                    </div>
756                                    <span class="text-[11px] text-violet-400 font-medium">AI Discovery Agent scanning...</span>
757                                    <div class="flex gap-0.5 ml-auto">
758                                        <div class="w-1.5 h-1.5 rounded-full bg-violet-400 typing-dot" style="animation-delay: 0s"></div>
759                                        <div class="w-1.5 h-1.5 rounded-full bg-violet-400 typing-dot" style="animation-delay: 0.15s"></div>
760                                        <div class="w-1.5 h-1.5 rounded-full bg-violet-400 typing-dot" style="animation-delay: 0.3s"></div>
761                                    </div>
762                                </div>
763                                <div class="product-card flex items-center gap-3 bg-slate-800/60 rounded-xl p-3 border border-slate-700/40" style="animation-delay: 250ms">
764                                    <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-slate-700 to-slate-600 shimmer shrink-0"></div>
765                                    <div class="flex-1 space-y-2">
766                                        <div class="h-3 bg-slate-700/80 rounded-full shimmer" style="width: 75%"></div>
767                                        <div class="flex items-center gap-2">
768                                            <span class="text-emerald-400 text-xs font-bold">$32.99</span>
769                                            <span class="text-orange-400/60 text-[10px]">12% commission</span>
770                                        </div>
771                                    </div>
772                                    <div class="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center import-pulse">
773                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
774                                    </div>
775                                </div>
776                                <div class="product-card flex items-center gap-3 bg-slate-800/60 rounded-xl p-3 border border-slate-700/40" style="animation-delay: 500ms">
777                                    <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-slate-700 to-slate-600 shimmer shrink-0"></div>
778                                    <div class="flex-1 space-y-2">
779                                        <div class="h-3 bg-slate-700/80 rounded-full shimmer" style="width: 60%"></div>
780                                        <div class="flex items-center gap-2">
781                                            <span class="text-emerald-400 text-xs font-bold">$18.50</span>
782                                            <span class="text-orange-400/60 text-[10px]">8% commission</span>
783                                        </div>
784                                    </div>
785                                    <div class="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center import-pulse">
786                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
787                                    </div>
788                                </div>
789                                <div class="product-card flex items-center gap-3 bg-slate-800/60 rounded-xl p-3 border border-slate-700/40" style="animation-delay: 750ms">
790                                    <div class="w-14 h-14 rounded-lg bg-gradient-to-br from-slate-700 to-slate-600 shimmer shrink-0"></div>
791                                    <div class="flex-1 space-y-2">
792                                        <div class="h-3 bg-slate-700/80 rounded-full shimmer" style="width: 85%"></div>
793                                        <div class="flex items-center gap-2">
794                                            <span class="text-emerald-400 text-xs font-bold">$45.00</span>
795                                            <span class="text-orange-400/60 text-[10px]">10% commission</span>
796                                        </div>
797                                    </div>
798                                    <div class="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center import-pulse">
799                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
800                                    </div>
801                                </div>
802                            </div>
803                        </div>
804                    </div>
805
806                    <!-- Step 1: Generate -->
807                    <div data-flow-content="1" class="grid grid-cols-1 lg:grid-cols-2 gap-0 hidden">
808                        <div class="p-8 md:p-10 lg:p-12 flex flex-col justify-center">
809                            <div class="inline-flex items-center gap-2 mb-4">
810                                <span class="text-xs font-bold text-blue-600 bg-blue-500/10 px-2.5 py-1 rounded-md">
811                                    Step 2
812                                </span>
813                            </div>
814                            <h3 class="text-2xl md:text-3xl font-bold text-foreground mb-4 leading-tight">AI writes your posts</h3>
815                            <p class="text-muted-foreground leading-relaxed mb-6 text-[15px]">Afflow&#39;s AI agent creates unique, platform-optimized posts for each channel. Different tone, formatting, and emojis,tailored for Telegram, WhatsApp, and Facebook.</p>
816                            <ul class="space-y-3">
817                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 0ms">
818                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
819                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
820                                    </div>
821                                    <span class="text-sm text-foreground/80">Platform-specific formatting &amp; emojis</span>
822                                </li>
823                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 150ms">
824                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
825                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
826                                    </div>
827                                    <span class="text-sm text-foreground/80">Multiple post variants for A/B testing</span>
828                                </li>
829                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 300ms">
830                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
831                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
832                                    </div>
833                                    <span class="text-sm text-foreground/80">Highlights product title automatically</span>
834                                </li>
835                            </ul>
836                        </div>
837                        <div class="relative bg-slate-900 p-6 md:p-8 flex items-center justify-center min-h-[320px] lg:min-h-[400px] border-t lg:border-t-0 lg:border-l border-border">
838                            <div class="w-full max-w-sm step-visual">
839                                <div class="bg-slate-800/60 rounded-xl p-5 border border-slate-700/40 space-y-4">
840                                    <div class="flex items-center gap-2 mb-3">
841                                        <div class="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-500 flex items-center justify-center">
842                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1v2m0 6v2m5-5h-2M3 6H1m8.5-3.5L8 4M4 8l-1.5 1.5m7 0L8 8M4 4L2.5 2.5" stroke="white" stroke-width="1" stroke-linecap="round"/></svg>
843                                        </div>
844                                        <span class="text-xs text-blue-400 font-medium">AI Content Writer</span>
845                                        <div class="flex gap-0.5 ml-auto">
846                                            <div class="w-1.5 h-1.5 rounded-full bg-blue-400 typing-dot" style="animation-delay: 0s"></div>
847                                            <div class="w-1.5 h-1.5 rounded-full bg-blue-400 typing-dot" style="animation-delay: 0.15s"></div>
848                                            <div class="w-1.5 h-1.5 rounded-full bg-blue-400 typing-dot" style="animation-delay: 0.3s"></div>
849                                        </div>
850                                    </div>
851                                    <div class="space-y-2">
852                                        <div class="h-3 bg-slate-700/80 rounded-full typewriter-line w-full" style="animation-delay: 0.3s"></div>
853                                        <div class="h-3 bg-slate-700/80 rounded-full typewriter-line w-[90%]" style="animation-delay: 0.6s"></div>
854                                        <div class="h-3 bg-slate-700/60 rounded-full typewriter-line w-[75%]" style="animation-delay: 0.9s"></div>
855                                        <div class="h-3 bg-slate-700/60 rounded-full typewriter-line w-[85%]" style="animation-delay: 1.2s"></div>
856                                    </div>
857                                    <div class="flex flex-wrap gap-2 pt-2">
858                                        <span class="text-[10px] font-medium px-2.5 py-1 rounded-full border platform-badge bg-sky-500/10 border-sky-500/20 text-sky-400" style="animation-delay: 1.5s">Telegram</span>
859                                        <span class="text-[10px] font-medium px-2.5 py-1 rounded-full border platform-badge bg-emerald-500/10 border-emerald-500/20 text-emerald-400" style="animation-delay: 1.7s">WhatsApp</span>
860                                        <span class="text-[10px] font-medium px-2.5 py-1 rounded-full border platform-badge bg-blue-500/10 border-blue-500/20 text-blue-400" style="animation-delay: 1.9s">Facebook</span>
861                                    </div>
862                                </div>
863                            </div>
864                        </div>
865                    </div>
866
867                    <!-- Step 2: Publish -->
868                    <div data-flow-content="2" class="grid grid-cols-1 lg:grid-cols-2 gap-0 hidden">
869                        <div class="p-8 md:p-10 lg:p-12 flex flex-col justify-center">
870                            <div class="inline-flex items-center gap-2 mb-4">
871                                <span class="text-xs font-bold text-blue-600 bg-blue-500/10 px-2.5 py-1 rounded-md">
872                                    Step 3
873                                </span>
874                            </div>
875                            <h3 class="text-2xl md:text-3xl font-bold text-foreground mb-4 leading-tight">Publish to all channels at once</h3>
876                            <p class="text-muted-foreground leading-relaxed mb-6 text-[15px]">Send your posts to Telegram channels, WhatsApp groups, Facebook pages, and more,all with a single click. Schedule posts or let Afflow send them automatically.</p>
877                            <ul class="space-y-3">
878                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 0ms">
879                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
880                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
881                                    </div>
882                                    <span class="text-sm text-foreground/80">Telegram, WhatsApp, Facebook, Instagram, Pinterest</span>
883                                </li>
884                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 150ms">
885                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
886                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
887                                    </div>
888                                    <span class="text-sm text-foreground/80">Schedule or publish instantly</span>
889                                </li>
890                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 300ms">
891                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
892                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
893                                    </div>
894                                    <span class="text-sm text-foreground/80">Automatic affiliate link tracking</span>
895                                </li>
896                            </ul>
897                        </div>
898                        <div class="relative bg-slate-900 p-6 md:p-8 flex items-center justify-center min-h-[320px] lg:min-h-[400px] border-t lg:border-t-0 lg:border-l border-border">
899                            <div class="w-full max-w-sm step-visual">
900                                <div class="space-y-3">
901                                    <div class="publish-card flex items-center gap-3 bg-slate-800/60 rounded-xl p-3.5 border border-slate-700/40" style="animation-delay: 0ms">
902                                        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 bg-sky-500/10">
903                                            <img loading="lazy" src="/images/telegram.svg" alt="Telegram" class="w-[18px] h-[18px] object-contain icon-telegram">
904                                        </div>
905                                        <div class="flex-1">
906                                            <p class="text-sm font-medium text-white">Telegram</p>
907                                            <p class="text-[11px] text-slate-500">3 channels</p>
908                                        </div>
909                                        <div class="publish-status flex items-center gap-1.5" style="animation-delay: 600ms">
910                                            <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
911                                            <span class="text-[10px] text-emerald-400 font-medium">Sent</span>
912                                        </div>
913                                    </div>
914                                    <div class="publish-card flex items-center gap-3 bg-slate-800/60 rounded-xl p-3.5 border border-slate-700/40" style="animation-delay: 300ms">
915                                        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 bg-emerald-500/10">
916                                            <img loading="lazy" src="/images/whatsapp.svg" alt="WhatsApp" class="w-[18px] h-[18px] object-contain icon-whatsapp">
917                                        </div>
918                                        <div class="flex-1">
919                                            <p class="text-sm font-medium text-white">WhatsApp</p>
920                                            <p class="text-[11px] text-slate-500">5 groups</p>
921                                        </div>
922                                        <div class="publish-status flex items-center gap-1.5" style="animation-delay: 900ms">
923                                            <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
924                                            <span class="text-[10px] text-emerald-400 font-medium">Sent</span>
925                                        </div>
926                                    </div>
927                                    <div class="publish-card flex items-center gap-3 bg-slate-800/60 rounded-xl p-3.5 border border-slate-700/40" style="animation-delay: 600ms">
928                                        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 bg-blue-500/10">
929                                            <img loading="lazy" src="/images/facebook.svg" alt="Facebook" class="w-[18px] h-[18px] object-contain icon-facebook">
930                                        </div>
931                                        <div class="flex-1">
932                                            <p class="text-sm font-medium text-white">Facebook</p>
933                                            <p class="text-[11px] text-slate-500">2 pages</p>
934                                        </div>
935                                        <div class="publish-status flex items-center gap-1.5" style="animation-delay: 1200ms">
936                                            <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
937                                            <span class="text-[10px] text-emerald-400 font-medium">Sent</span>
938                                        </div>
939                                    </div>
940                                    <div class="publish-card flex items-center gap-3 bg-slate-800/60 rounded-xl p-3.5 border border-slate-700/40" style="animation-delay: 900ms">
941                                        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 bg-pink-500/10">
942                                            <img loading="lazy" src="/images/instagram.svg" alt="Instagram" class="w-[18px] h-[18px] object-contain icon-instagram">
943                                        </div>
944                                        <div class="flex-1">
945                                            <p class="text-sm font-medium text-white">Instagram</p>
946                                            <p class="text-[11px] text-slate-500">1 account</p>
947                                        </div>
948                                        <div class="publish-status flex items-center gap-1.5" style="animation-delay: 1500ms">
949                                            <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
950                                            <span class="text-[10px] text-emerald-400 font-medium">Sent</span>
951                                        </div>
952                                    </div>
953                                </div>
954                            </div>
955                        </div>
956                    </div>
957
958                    <!-- Step 3: Track -->
959                    <div data-flow-content="3" class="grid grid-cols-1 lg:grid-cols-2 gap-0 hidden">
960                        <div class="p-8 md:p-10 lg:p-12 flex flex-col justify-center">
961                            <div class="inline-flex items-center gap-2 mb-4">
962                                <span class="text-xs font-bold text-blue-600 bg-blue-500/10 px-2.5 py-1 rounded-md">
963                                    Step 4
964                                </span>
965                            </div>
966                            <h3 class="text-2xl md:text-3xl font-bold text-foreground mb-4 leading-tight">Track every sale to its source</h3>
967                            <p class="text-muted-foreground leading-relaxed mb-6 text-[15px]">Know exactly which post, in which group, on which platform drove each sale. Real attribution, real revenue data,no more guessing what works.</p>
968                            <ul class="space-y-3">
969                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 0ms">
970                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
971                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
972                                    </div>
973                                    <span class="text-sm text-foreground/80">Post-to-sale attribution with tracking IDs</span>
974                                </li>
975                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 150ms">
976                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
977                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
978                                    </div>
979                                    <span class="text-sm text-foreground/80">Revenue &amp; commission per post</span>
980                                </li>
981                                <li class="bullet-item flex items-start gap-3" style="animation-delay: 300ms">
982                                    <div class="w-5 h-5 rounded-full bg-emerald-500/15 flex items-center justify-center shrink-0 mt-0.5">
983                                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="#34d399" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
984                                    </div>
985                                    <span class="text-sm text-foreground/80">Platform performance comparison</span>
986                                </li>
987                            </ul>
988                        </div>
989                        <div class="relative bg-slate-900 p-6 md:p-8 flex items-center justify-center min-h-[320px] lg:min-h-[400px] border-t lg:border-t-0 lg:border-l border-border">
990                            <div class="w-full max-w-sm step-visual">
991                                <div class="bg-slate-800/60 rounded-xl p-5 border border-slate-700/40 space-y-4">
992                                    <div class="grid grid-cols-2 gap-3">
993                                        <div class="stat-card bg-slate-900/60 rounded-lg p-3 border border-slate-700/30" style="animation-delay: 0ms">
994                                            <p class="text-[10px] text-slate-500 mb-1">Posts Published</p>
995                                            <p class="text-lg font-bold text-white">247</p>
996                                        </div>
997                                        <div class="stat-card bg-slate-900/60 rounded-lg p-3 border border-slate-700/30" style="animation-delay: 150ms">
998                                            <p class="text-[10px] text-slate-500 mb-1">Conversions</p>
999                                            <p class="text-lg font-bold text-emerald-400">89</p>
1000                                        </div>
1001                                        <div class="stat-card bg-slate-900/60 rounded-lg p-3 border border-slate-700/30" style="animation-delay: 300ms">
1002                                            <p class="text-[10px] text-slate-500 mb-1">Revenue</p>
1003                                            <p class="text-lg font-bold text-blue-400">$1,247</p>
1004                                        </div>
1005                                        <div class="stat-card bg-slate-900/60 rounded-lg p-3 border border-slate-700/30" style="animation-delay: 450ms">
1006                                            <p class="text-[10px] text-slate-500 mb-1">Conv. Rate</p>
1007                                            <p class="text-lg font-bold text-amber-400">36%</p>
1008                                        </div>
1009                                    </div>
1010                                    <div class="h-16 flex items-end gap-1 pt-2">
1011                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 30%; animation-delay: 0ms"></div>
1012                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 45%; animation-delay: 80ms"></div>
1013                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 35%; animation-delay: 160ms"></div>
1014                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 60%; animation-delay: 240ms"></div>
1015                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 50%; animation-delay: 320ms"></div>
1016                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 75%; animation-delay: 400ms"></div>
1017                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 55%; animation-delay: 480ms"></div>
1018                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 80%; animation-delay: 560ms"></div>
1019                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 65%; animation-delay: 640ms"></div>
1020                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 90%; animation-delay: 720ms"></div>
1021                                        <div class="flex-1 rounded-t-sm chart-bar bg-slate-700/60" style="height: 70%; animation-delay: 800ms"></div>
1022                                        <div class="flex-1 rounded-t-sm chart-bar bg-blue-500" style="height: 95%; animation-delay: 880ms"></div>
1023                                    </div>
1024                                </div>
1025                            </div>
1026                        </div>
1027                    </div>
1028                </div>
1029            </div>
1030        </div>
1031    </div>
1032</section>
1033
1034        <!-- Features Section -->
1035<section id="features" class="py-24 bg-slate-950 relative overflow-hidden">
1036    <!-- Background atmosphere -->
1037    <div class="absolute inset-0 bg-grid-white/[0.025] bg-[size:36px_36px] pointer-events-none"></div>
1038    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[400px] bg-blue-600/8 blur-[120px] rounded-full pointer-events-none"></div>
1039    <div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-indigo-600/6 blur-[100px] rounded-full pointer-events-none"></div>
1040
1041    <div class="container relative z-10">
1042        <!-- Section header -->
1043        <div class="text-center mb-16">
1044            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 mb-5">
1045                <div class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></div>
1046                <span class="text-xs font-semibold text-blue-400 uppercase tracking-widest">Platform Features</span>
1047            </div>
1048            <h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-white mb-4">
1049                Affiliate Marketing Tools: From Product to Profit
1050            </h2>
1051            <p class="text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">
1052                Afflow handles the entire affiliate workflow,so you can focus on growing your business.
1053            </p>
1054        </div>
1055
1056        <!-- Features Grid -->
1057        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-start max-w-6xl mx-auto">
1058            <!-- Feature List -->
1059            <div class="space-y-1.5" id="features-list">
1060                <!-- Product Management -->
1061                <button data-feature-btn="0" data-image="/images/features/products.webp" data-glow="radial-gradient(ellipse at center, rgba(251,146,60,0.15) 0%, transparent 70%)" class="w-full text-start group relative rounded-xl transition-all duration-300 overflow-hidden bg-slate-800/80 border border-slate-600/60 shadow-lg shadow-black/30">
1062                    <div class="flex items-start gap-4 px-4 py-3.5">
1063                        <div class="flex-shrink-0 mt-0.5 w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-300 bg-blue-500/20 shadow-inner">
1064                            <i data-lucide="package" class="h-4 w-4 text-orange-400"></i>
1065                        </div>
1066                        <div class="flex-1 min-w-0">
1067                            <h3 class="text-sm font-semibold mb-0.5 transition-colors duration-300 text-white">Find &amp; Import Products</h3>
1068                            <div class="overflow-hidden transition-all duration-400 ease-in-out" style="max-height: 80px; opacity: 1">
1069                                <p class="text-xs text-slate-400 leading-relaxed pt-0.5 pb-1">AI discovers trending products with high commissions, or import from AliExpress and Amazon in one click.</p>
1070                            </div>
1071                        </div>
1072                        <div class="flex-shrink-0 self-center transition-all duration-300 opacity-100 translate-x-0">
1073                            <i data-lucide="chevron-right" class="h-4 w-4 text-blue-400"></i>
1074                        </div>
1075                    </div>
1076                    <div class="absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-blue-500 to-indigo-400 rounded-full progress-bar"></div>
1077                </button>
1078
1079                <!-- AI Post Generation -->
1080                <button data-feature-btn="1" data-image="/images/features/posts.webp" data-glow="radial-gradient(ellipse at center, rgba(250,204,21,0.15) 0%, transparent 70%)" class="w-full text-start group relative rounded-xl transition-all duration-300 overflow-hidden hover:bg-slate-800/40 border border-transparent">
1081                    <div class="flex items-start gap-4 px-4 py-3.5">
1082                        <div class="flex-shrink-0 mt-0.5 w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-300 bg-slate-700/50 group-hover:bg-slate-700">
1083                            <i data-lucide="lightbulb" class="h-4 w-4 text-slate-500 group-hover:text-slate-400"></i>
1084                        </div>
1085                        <div class="flex-1 min-w-0">
1086                            <h3 class="text-sm font-semibold mb-0.5 transition-colors duration-300 text-slate-400 group-hover:text-slate-300">AI Writes Your Posts</h3>
1087                            <div class="overflow-hidden transition-all duration-400 ease-in-out" style="max-height: 0px; opacity: 0">
1088                                <p class="text-xs text-slate-400 leading-relaxed pt-0.5 pb-1">Generates unique posts for each platform,right tone, emojis, and formatting for Telegram, WhatsApp, and Facebook.</p>
1089                            </div>
1090                        </div>
1091                        <div class="flex-shrink-0 self-center transition-all duration-300 opacity-0 -translate-x-2">
1092                            <i data-lucide="chevron-right" class="h-4 w-4 text-blue-400"></i>
1093                        </div>
1094                    </div>
1095                </button>
1096
1097                <!-- Multi-Platform Publishing -->
1098                <button data-feature-btn="2" data-image="/images/features/publishing.webp" data-glow="radial-gradient(ellipse at center, rgba(96,165,250,0.18) 0%, transparent 70%)" class="w-full text-start group relative rounded-xl transition-all duration-300 overflow-hidden hover:bg-slate-800/40 border border-transparent">
1099                    <div class="flex items-start gap-4 px-4 py-3.5">
1100                        <div class="flex-shrink-0 mt-0.5 w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-300 bg-slate-700/50 group-hover:bg-slate-700">
1101                            <i data-lucide="megaphone" class="h-4 w-4 text-slate-500 group-hover:text-slate-400"></i>
1102                        </div>
1103                        <div class="flex-1 min-w-0">
1104                            <h3 class="text-sm font-semibold mb-0.5 transition-colors duration-300 text-slate-400 group-hover:text-slate-300">Publish Everywhere at Once</h3>
1105                            <div class="overflow-hidden transition-all duration-400 ease-in-out" style="max-height: 0px; opacity: 0">
1106                                <p class="text-xs text-slate-400 leading-relaxed pt-0.5 pb-1">Send to Telegram, WhatsApp, Facebook, Instagram, and Pinterest,all with a single click.</p>
1107                            </div>
1108                        </div>
1109                        <div class="flex-shrink-0 self-center transition-all duration-300 opacity-0 -translate-x-2">
1110                            <i data-lucide="chevron-right" class="h-4 w-4 text-blue-400"></i>
1111                        </div>
1112                    </div>
1113                </button>
1114
1115                <!-- Profit Tracking -->
1116                <button data-feature-btn="3" data-image="/images/features/orders.webp" data-glow="radial-gradient(ellipse at center, rgba(52,211,153,0.15) 0%, transparent 70%)" class="w-full text-start group relative rounded-xl transition-all duration-300 overflow-hidden hover:bg-slate-800/40 border border-transparent">
1117                    <div class="flex items-start gap-4 px-4 py-3.5">
1118                        <div class="flex-shrink-0 mt-0.5 w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-300 bg-slate-700/50 group-hover:bg-slate-700">
1119                            <i data-lucide="dollar-sign" class="h-4 w-4 text-slate-500 group-hover:text-slate-400"></i>
1120                        </div>
1121                        <div class="flex-1 min-w-0">
1122                            <h3 class="text-sm font-semibold mb-0.5 transition-colors duration-300 text-slate-400 group-hover:text-slate-300">Know Which Post Sold</h3>
1123                            <div class="overflow-hidden transition-all duration-400 ease-in-out" style="max-height: 0px; opacity: 0">
1124                                <p class="text-xs text-slate-400 leading-relaxed pt-0.5 pb-1">See exactly which post, in which group, on which platform drove each sale. Real revenue data, zero guesswork.</p>
1125                            </div>
1126                        </div>
1127                        <div class="flex-shrink-0 self-center transition-all duration-300 opacity-0 -translate-x-2">
1128                            <i data-lucide="chevron-right" class="h-4 w-4 text-blue-400"></i>
1129                        </div>
1130                    </div>
1131                </button>
1132
1133                <!-- Smart Scheduling -->
1134                <button data-feature-btn="4" data-image="/images/features/scheduling.webp" data-glow="radial-gradient(ellipse at center, rgba(167,139,250,0.15) 0%, transparent 70%)" class="w-full text-start group relative rounded-xl transition-all duration-300 overflow-hidden hover:bg-slate-800/40 border border-transparent">
1135                    <div class="flex items-start gap-4 px-4 py-3.5">
1136                        <div class="flex-shrink-0 mt-0.5 w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-300 bg-slate-700/50 group-hover:bg-slate-700">
1137                            <i data-lucide="clock" class="h-4 w-4 text-slate-500 group-hover:text-slate-400"></i>
1138                        </div>
1139                        <div class="flex-1 min-w-0">
1140                            <h3 class="text-sm font-semibold mb-0.5 transition-colors duration-300 text-slate-400 group-hover:text-slate-300">Best Time to Post</h3>
1141                            <div class="overflow-hidden transition-all duration-400 ease-in-out" style="max-height: 0px; opacity: 0">
1142                                <p class="text-xs text-slate-400 leading-relaxed pt-0.5 pb-1">Schedule posts or let Afflow pick the optimal time based on your audience&#39;s engagement patterns.</p>
1143                            </div>
1144                        </div>
1145                        <div class="flex-shrink-0 self-center transition-all duration-300 opacity-0 -translate-x-2">
1146                            <i data-lucide="chevron-right" class="h-4 w-4 text-blue-400"></i>
1147                        </div>
1148                    </div>
1149                </button>
1150
1151                <!-- AI Image Optimizer -->
1152                <button data-feature-btn="5" data-image="/images/features/ai-image-optimizer.webp" data-glow="radial-gradient(ellipse at center, rgba(236,72,153,0.15) 0%, transparent 70%)" class="w-full text-start group relative rounded-xl transition-all duration-300 overflow-hidden hover:bg-slate-800/40 border border-transparent">
1153                    <div class="flex items-start gap-4 px-4 py-3.5">
1154                        <div class="flex-shrink-0 mt-0.5 w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-300 bg-slate-700/50 group-hover:bg-slate-700">
1155                            <i data-lucide="sparkles" class="h-4 w-4 text-slate-500 group-hover:text-slate-400"></i>
1156                        </div>
1157                        <div class="flex-1 min-w-0">
1158                            <h3 class="text-sm font-semibold mb-0.5 transition-colors duration-300 text-slate-400 group-hover:text-slate-300">AI Image Optimizer</h3>
1159                            <div class="overflow-hidden transition-all duration-400 ease-in-out" style="max-height: 0px; opacity: 0">
1160                                <p class="text-xs text-slate-400 leading-relaxed pt-0.5 pb-1">Transform product photos into scroll-stopping marketing images. Choose from UGC, lifestyle, or studio styles powered by AI.</p>
1161                            </div>
1162                        </div>
1163                        <div class="flex-shrink-0 self-center transition-all duration-300 opacity-0 -translate-x-2">
1164                            <i data-lucide="chevron-right" class="h-4 w-4 text-blue-400"></i>
1165                        </div>
1166                    </div>
1167                </button>
1168
1169                <!-- A/B Testing -->
1170                <button data-feature-btn="6" data-image="/images/features/variants.webp" data-glow="radial-gradient(ellipse at center, rgba(129,140,248,0.15) 0%, transparent 70%)" class="w-full text-start group relative rounded-xl transition-all duration-300 overflow-hidden hover:bg-slate-800/40 border border-transparent">
1171                    <div class="flex items-start gap-4 px-4 py-3.5">
1172                        <div class="flex-shrink-0 mt-0.5 w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-300 bg-slate-700/50 group-hover:bg-slate-700">
1173                            <i data-lucide="flask-conical" class="h-4 w-4 text-slate-500 group-hover:text-slate-400"></i>
1174                        </div>
1175                        <div class="flex-1 min-w-0">
1176                            <h3 class="text-sm font-semibold mb-0.5 transition-colors duration-300 text-slate-400 group-hover:text-slate-300">Test What Works</h3>
1177                            <div class="overflow-hidden transition-all duration-400 ease-in-out" style="max-height: 0px; opacity: 0">
1178                                <p class="text-xs text-slate-400 leading-relaxed pt-0.5 pb-1">Create multiple post variants and let the best-performing version win automatically.</p>
1179                            </div>
1180                        </div>
1181                        <div class="flex-shrink-0 self-center transition-all duration-300 opacity-0 -translate-x-2">
1182                            <i data-lucide="chevron-right" class="h-4 w-4 text-blue-400"></i>
1183                        </div>
1184                    </div>
1185                </button>
1186
1187                <!-- Community Feedback -->
1188                <button data-feature-btn="7" data-image="/images/features/feedback.webp" data-glow="radial-gradient(ellipse at center, rgba(251,113,133,0.15) 0%, transparent 70%)" class="w-full text-start group relative rounded-xl transition-all duration-300 overflow-hidden hover:bg-slate-800/40 border border-transparent">
1189                    <div class="flex items-start gap-4 px-4 py-3.5">
1190                        <div class="flex-shrink-0 mt-0.5 w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-300 bg-slate-700/50 group-hover:bg-slate-700">
1191                            <i data-lucide="heart" class="h-4 w-4 text-slate-500 group-hover:text-slate-400"></i>
1192                        </div>
1193                        <div class="flex-1 min-w-0">
1194                            <h3 class="text-sm font-semibold mb-0.5 transition-colors duration-300 text-slate-400 group-hover:text-slate-300">Audience Insights</h3>
1195                            <div class="overflow-hidden transition-all duration-400 ease-in-out" style="max-height: 0px; opacity: 0">
1196                                <p class="text-xs text-slate-400 leading-relaxed pt-0.5 pb-1">Track what your audience likes and dislikes to continuously improve your content.</p>
1197                            </div>
1198                        </div>
1199                        <div class="flex-shrink-0 self-center transition-all duration-300 opacity-0 -translate-x-2">
1200                            <i data-lucide="chevron-right" class="h-4 w-4 text-blue-400"></i>
1201                        </div>
1202                    </div>
1203                </button>
1204            </div>
1205
1206            <!-- Screenshot Panel -->
1207            <div class="relative lg:sticky lg:top-8">
1208                <!-- Glow behind panel -->
1209                <div id="feature-glow" class="absolute inset-0 rounded-2xl transition-all duration-700 blur-2xl scale-95 opacity-60" style="background: radial-gradient(ellipse at center, rgba(251,146,60,0.15) 0%, transparent 70%)"></div>
1210
1211                <!-- Browser chrome panel -->
1212                <div class="relative rounded-2xl border border-slate-700/60 bg-slate-900/90 shadow-[0_32px_64px_rgba(0,0,0,0.6)] overflow-hidden backdrop-blur-sm" id="feature-screenshot">
1213                    <!-- Browser bar -->
1214                    <div class="flex items-center gap-2 px-4 py-2.5 bg-slate-800/80 border-b border-slate-700/50">
1215                        <div class="flex gap-1.5">
1216                            <div class="w-2.5 h-2.5 rounded-full bg-red-500/60"></div>
1217                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/60"></div>
1218                            <div class="w-2.5 h-2.5 rounded-full bg-green-500/60"></div>
1219                        </div>
1220                        <div class="flex-1 mx-2">
1221                            <div class="bg-slate-700/50 rounded-md px-3 py-0.5 text-xs text-slate-500 font-mono truncate max-w-[200px] mx-auto text-center">
1222   
1222                             app.afflow.co
1223                            </div>
1224                        </div>
1225                        <!-- Active feature badge -->
1226                        <div class="flex items-center gap-1.5" id="feature-badge">
1227                            <i data-lucide="package" class="h-3 w-3 text-orange-400" id="feature-bar-icon"></i>
1228                            <span class="text-xs font-medium text-slate-400 hidden sm:inline" id="feature-name">Find &amp; Import Products</span>
1229                        </div>
1230                    </div>
1231
1232                    <!-- Screenshot image -->
1233                    <div class="aspect-[4/3] relative overflow-hidden bg-slate-900">
1234                        <img loading="lazy" id="feature-image" src="/images/features/products.webp" alt="Feature screenshot" class="w-full h-full object-cover object-left-top transition-opacity duration-300">
1235                    </div>
1236                </div>
1237
1238                <!-- Feature index dots -->
1239                <div class="flex justify-center gap-1.5 mt-4" id="feature-dots">
1240                    <button class="rounded-full transition-all duration-300 w-5 h-1.5 bg-blue-400" data-feature-dot="0"></button>
1241                    <button class="rounded-full transition-all duration-300 w-1.5 h-1.5 bg-slate-600 hover:bg-slate-500" data-feature-dot="1"></button>
1242                    <button class="rounded-full transition-all duration-300 w-1.5 h-1.5 bg-slate-600 hover:bg-slate-500" data-feature-dot="2"></button>
1243                    <button class="rounded-full transition-all duration-300 w-1.5 h-1.5 bg-slate-600 hover:bg-slate-500" data-feature-dot="3"></button>
1244                    <button class="rounded-full transition-all duration-300 w-1.5 h-1.5 bg-slate-600 hover:bg-slate-500" data-feature-dot="4"></button>
1245                    <button class="rounded-full transition-all duration-300 w-1.5 h-1.5 bg-slate-600 hover:bg-slate-500" data-feature-dot="5"></button>
1246                    <button class="rounded-full transition-all duration-300 w-1.5 h-1.5 bg-slate-600 hover:bg-slate-500" data-feature-dot="6"></button>
1247                    <button class="rounded-full transition-all duration-300 w-1.5 h-1.5 bg-slate-600 hover:bg-slate-500" data-feature-dot="7"></button>
1248                </div>
1249            </div>
1250        </div>
1251    </div>
1252</section>
1253
1254        <!-- Integration Flow Section -->
1255<section id="integration-flow" class="py-24 md:py-32 bg-gradient-to-b from-muted/30 to-background relative overflow-hidden">
1256    <!-- Ambient background -->
1257    <div class="absolute inset-0 pointer-events-none">
1258        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-500/[0.03] rounded-full blur-[120px]"></div>
1259    </div>
1260
1261    <div class="container relative z-10">
1262        <!-- Section header -->
1263        <div class="text-center mb-16 md:mb-20">
1264            <p class="text-xs font-mono tracking-[0.25em] uppercase text-blue-600 mb-3">Seamless Integration</p>
1265            <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-4 tracking-tight">
1266                Source products. Publish everywhere.
1267            </h2>
1268            <p class="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
1269                Afflow connects your favorite marketplaces to all your social channels,import products, generate posts, and publish automatically.
1270            </p>
1271        </div>
1272
1273        <!-- Flow diagram -->
1274        <div id="iflow-diagram" class="relative max-w-6xl mx-auto">
1275            <!-- SVG connection lines layer (desktop only) -->
1276            <svg id="iflow-svg" class="absolute inset-0 w-full h-full pointer-events-none z-0 hidden md:block" fill="none">
1277                <defs>
1278                    <linearGradient id="iflow-grad-left" x1="0%" y1="0%" x2="100%" y2="0%">
1279                        <stop offset="0%" stop-color="#f59e0b" stop-opacity="0.6" />
1280                        <stop offset="100%" stop-color="#3b82f6" stop-opacity="0.25" />
1281                    </linearGradient>
1282                    <linearGradient id="iflow-grad-right" x1="0%" y1="0%" x2="100%" y2="0%">
1283                        <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.25" />
1284                        <stop offset="100%" stop-color="#10b981" stop-opacity="0.6" />
1285                    </linearGradient>
1286                    <filter id="iflow-glow">
1287                        <feGaussianBlur stdDeviation="3" result="blur" />
1288                        <feMerge>
1289                            <feMergeNode in="blur" />
1290                            <feMergeNode in="SourceGraphic" />
1291                        </feMerge>
1292                    </filter>
1293                </defs>
1294            </svg>
1295
1296            <!-- Three-column layout (always LTR — flow diagram is direction-independent) -->
1297            <div dir="ltr" class="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-10 md:gap-0 items-center">
1298                <!-- Left: Marketplaces -->
1299                <div class="flex flex-col items-center md:items-end md:pr-14 lg:pr-20 justify-center gap-6">
1300                    <div data-iflow-left="0" class="flow-card group" style="animation-delay: 0ms">
1301                        <div class="flow-card-inner marketplace-card px-8 py-5">
1302                            <img loading="lazy" src="/images/aliexpress-colored.svg" alt="AliExpress" class="h-[22px] w-[140px] object-contain object-center opacity-80 group-hover:opacity-100 transition-opacity">
1303                        </div>
1304                    </div>
1305                    <div data-iflow-left="1" class="flow-card group" style="animation-delay: 120ms">
1306                        <div class="flow-card-inner marketplace-card px-8 py-5">
1307                            <img loading="lazy" src="/images/amazon-colored.svg" alt="Amazon" class="h-[22px] w-[140px] object-contain object-center opacity-80 group-hover:opacity-100 transition-opacity">
1308                        </div>
1309                    </div>
1310                </div>
1311
1312                <!-- Center: Hub -->
1313                <div class="flex items-center justify-center relative order-first md:order-none my-4 md:my-0">
1314                    <div id="iflow-hub" class="hub-container">
1315                        <!-- Pulse rings -->
1316                        <div class="pulse-ring pulse-ring-1"></div>
1317                        <div class="pulse-ring pulse-ring-2"></div>
1318                        <div class="pulse-ring pulse-ring-3"></div>
1319
1320                        <!-- Hub card -->
1321                        <div class="hub-card bg-white">
1322                            <img loading="lazy" src="/images/logo.png" alt="Afflow" class="w-[5.5rem] h-[5.5rem] md:w-[6.5rem] md:h-[6.5rem] object-contain relative z-10">
1323                        </div>
1324
1325                        <!-- Status indicator -->
1326                        <div class="absolute -bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-1.5 bg-white border border-emerald-500/20 rounded-full px-3 py-1 shadow-sm">
1327                            <span class="relative flex h-1.5 w-1.5">
1328                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-60"></span>
1329                                <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-400"></span>
1330                            </span>
1331                            <span class="text-[10px] font-medium text-emerald-600 tracking-wide">LIVE</span>
1332                        </div>
1333                    </div>
1334                </div>
1335
1336                <!-- Right: Social platforms -->
1337                <div class="flex flex-col items-center md:items-start md:pl-14 lg:pl-20 gap-5">
1338                    <div data-iflow-right="0" class="flow-card group" style="animation-delay: 200ms">
1339                        <div class="flow-card-inner social-card px-5 py-4">
1340                            <div class="flex items-center gap-3.5">
1341                                <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 bg-sky-500/10">
1342                                    <img loading="lazy" src="/images/telegram.svg" alt="Telegram" class="w-[22px] h-[22px] object-contain icon-telegram">
1343                                </div>
1344                                <p class="text-[15px] font-semibold text-foreground">Telegram</p>
1345                            </div>
1346                        </div>
1347                    </div>
1348                    <div data-iflow-right="1" class="flow-card group" style="animation-delay: 300ms">
1349                        <div class="flow-card-inner social-card px-5 py-4">
1350                            <div class="flex items-center gap-3.5">
1351                                <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 bg-emerald-500/10">
1352                                    <img loading="lazy" src="/images/whatsapp.svg" alt="WhatsApp" class="w-[22px] h-[22px] object-contain icon-whatsapp">
1353                                </div>
1354                                <p class="text-[15px] font-semibold text-foreground">WhatsApp</p>
1355                            </div>
1356                        </div>
1357                    </div>
1358                    <div data-iflow-right="2" class="flow-card group" style="animation-delay: 400ms">
1359                        <div class="flow-card-inner social-card px-5 py-4">
1360                            <div class="flex items-center gap-3.5">
1361                                <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 bg-blue-500/10">
1362                                    <img loading="lazy" src="/images/facebook.svg" alt="Facebook" class="w-[22px] h-[22px] object-contain icon-facebook">
1363                                </div>
1364                                <p class="text-[15px] font-semibold text-foreground">Facebook</p>
1365                            </div>
1366                        </div>
1367                    </div>
1368                    <div data-iflow-right="3" class="flow-card group" style="animation-delay: 500ms">
1369                        <div class="flow-card-inner social-card px-5 py-4">
1370                            <div class="flex items-center gap-3.5">
1371                                <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 bg-pink-500/10">
1372                                    <img loading="lazy" src="/images/instagram.svg" alt="Instagram" class="w-[22px] h-[22px] object-contain icon-instagram">
1373                                </div>
1374                                <p class="text-[15px] font-semibold text-foreground">Instagram</p>
1375                            </div>
1376                        </div>
1377                    </div>
1378                    <div data-iflow-right="4" class="flow-card group" style="animation-delay: 600ms">
1379                        <div class="flow-card-inner social-card px-5 py-4">
1380                            <div class="flex items-center gap-3.5">
1381                                <div class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 bg-red-500/10">
1382                                    <img loading="lazy" src="/images/pinterest.svg" alt="Pinterest" class="w-[22px] h-[22px] object-contain icon-pinterest">
1383                                </div>
1384                                <p class="text-[15px] font-semibold text-foreground">Pinterest</p>
1385                            </div>
1386                        </div>
1387                    </div>
1388                </div>
1389            </div>
1390        </div>
1391    </div>
1392</section>
1393
1394        <!-- Before/After Section -->
1395<section class="py-24 bg-gradient-to-b from-background to-muted/30 relative overflow-hidden">
1396    <!-- Background decoration -->
1397    <div class="absolute inset-0 bg-grid-white/[0.02] bg-[size:40px_40px]"></div>
1398    <div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-primary/10 rounded-full blur-3xl"></div>
1399
1400    <div class="container relative z-10">
1401        <div class="max-w-5xl mx-auto">
1402            <!-- Section Header -->
1403            <div class="text-center mb-16 animate-fade-in">
1404                <h2 class="text-3xl sm:text-4xl font-bold mb-4">
1405                    Automate Your Affiliate Marketing
1406                </h2>
1407                <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
1408                    Affiliate marketers spend hours on repetitive tasks. Afflow automates the entire workflow.
1409                </p>
1410            </div>
1411
1412            <!-- Before/After Grid -->
1413            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 animate-fade-in" style="animation-delay: 0.2s">
1414                <!-- BEFORE Column -->
1415                <div class="bg-card border-2 border-destructive/30 rounded-xl p-8 shadow-lg hover:shadow-xl transition-all duration-300">
1416                    <div class="mb-8">
1417                        <div class="inline-flex items-center gap-2 px-3 py-1 bg-destructive/20 rounded-full mb-3">
1418                            <i data-lucide="frown" class="h-4 w-4 text-destructive"></i>
1419                            <span class="text-xs font-semibold text-destructive">
1420                                Without Afflow
1421                            </span>
1422                        </div>
1423                        <h3 class="text-2xl font-bold text-foreground mb-2">
1424                            The Old Way
1425                        </h3>
1426                        <p class="text-muted-foreground text-sm">
1427                            Hours of manual work, every single day
1428                        </p>
1429                    </div>
1430
1431                    <ul class="space-y-4">
1432                        <li class="flex items-start gap-3">
1433                            <i data-lucide="x" class="h-5 w-5 text-destructive mt-0.5 flex-shrink-0"></i>
1434                            <div>
1435                                <div class="font-semibold text-foreground mb-1">Hours of manual work</div>
1436                                <div class="text-sm text-muted-foreground">Write posts, format for each platform, copy-paste to every group. Repeat daily.</div>
1437                            </div>
1438                        </li>
1439                        <li class="flex items-start gap-3">
1440                            <i data-lucide="x" class="h-5 w-5 text-destructive mt-0.5 flex-shrink-0"></i>
1441                            <div>
1442                                <div class="font-semibold text-foreground mb-1">Wrong format, wrong platform</div>
1443                                <div class="text-sm text-muted-foreground">What works on Telegram looks wrong on WhatsApp. Each platform needs different formatting.</div>
1444                            </div>
1445                        </li>
1446                        <li class="flex items-start gap-3">
1447                            <i data-lucide="x" class="h-5 w-5 text-destructive mt-0.5 flex-shrink-0"></i>
1448                            <div>
1449                                <div class="font-semibold text-foreground mb-1">No idea what&#39;s working</div>
1450                                <div class="text-sm text-muted-foreground">Which post drove a sale? Which group converts? No way to know.</div>
1451                            </div>
1452                        </li>
1453                    </ul>
1454                </div>
1455
1456                <!-- AFTER Column -->
1457                <div class="bg-gradient-to-br from-primary/10 to-primary/5 border-2 border-primary rounded-xl p-8 relative shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:scale-105">
1458                    <!-- Recommended Badge -->
1459                    <div class="absolute -top-5 left-1/2 -translate-x-1/2">
1460                        <span class="bg-gradient-to-r from-primary to-primary/80 text-white px-6 py-2 rounded-full text-sm font-bold shadow-2xl shadow-primary/30 flex items-center gap-2">
1461                            <i data-lucide="sparkles" class="h-4 w-4 animate-pulse"></i>
1462                            With Afflow
1463                        </span>
1464                    </div>
1465
1466                    <div class="mb-8 mt-4">
1467                        <div class="flex items-center gap-3 mb-3">
1468                            <img loading="lazy" src="/images/logo.png" alt="Afflow" class="h-10 w-auto">
1469                        </div>
1470                        <h3 class="text-2xl font-bold text-foreground mb-2">
1471                            The New Way
1472                        </h3>
1473                        <p class="text-muted-foreground text-sm font-medium">
1474                            Set up once, let Afflow handle the rest
1475                        </p>
1476                    </div>
1477
1478                    <ul class="space-y-4">
1479                        <li class="flex items-start gap-3">
1480                            <i data-lucide="check-circle-2" class="h-5 w-5 text-primary mt-0.5 flex-shrink-0"></i>
1481                            <div>
1482                                <div class="font-semibold text-foreground mb-1">One click, all platforms</div>
1483                                <div class="text-sm text-muted-foreground">AI writes and formats posts for each platform. Publish to all your groups at once.</div>
1484                            </div>
1485                        </li>
1486                        <li class="flex items-start gap-3">
1487                            <i data-lucide="check-circle-2" class="h-5 w-5 text-primary mt-0.5 flex-shrink-0"></i>
1488                            <div>
1489                                <div class="font-semibold text-foreground mb-1">Platform-perfect posts</div>
1490                                <div class="text-sm text-muted-foreground">Every post is tailored,right emojis, formatting, and tone for Telegram, WhatsApp, and Facebook.</div>
1491                            </div>
1492                        </li>
1493                        <li class="flex items-start gap-3">
1494                            <i data-lucide="check-circle-2" class="h-5 w-5 text-primary mt-0.5 flex-shrink-0"></i>
1495                            <div>
1496                                <div class="font-semibold text-foreground mb-1">Know which post sold</div>
1497                                <div class="text-sm text-muted-foreground">Track every sale back to the exact post that drove it. Real data, real ROI.</div>
1498                            </div>
1499                        </li>
1500                    </ul>
1501                </div>
1502            </div>
1503
1504            <!-- Stats Section -->
1505            <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 animate-fade-in" style="animation-delay: 0.4s">
1506                <div class="text-center p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-xl border border-primary/20 hover:border-primary/40 transition-all duration-300">
1507                    <div class="text-3xl sm:text-4xl font-bold mb-2 text-primary">90%</div>
1508                    <div class="text-sm text-muted-foreground">Less time on content</div>
1509                </div>
1510                <div class="text-center p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-xl border border-primary/20 hover:border-primary/40 transition-all duration-300">
1511                    <div class="text-3xl sm:text-4xl font-bold mb-2 text-green-500">3x</div>
1512                    <div class="text-sm text-muted-foreground">
1512More revenue</div>
1513                </div>
1514                <div class="text-center p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-xl border border-primary/20 hover:border-primary/40 transition-all duration-300">
1515                    <div class="text-3xl sm:text-4xl font-bold mb-2 text-blue-500">2.5x</div>
1516                    <div class="text-sm text-muted-foreground">Higher engagement</div>
1517                </div>
1518            </div>
1519
1520            <!-- Mid-page CTA -->
1521            <div class="mt-16 text-center animate-fade-in" style="animation-delay: 0.5s">
1522                <p class="text-xl sm:text-2xl font-bold text-foreground mb-6">
1523                    Ready to run your affiliate business on autopilot?
1524                </p>
1525                <a href="https://app.afflow.co/signup" rel="noopener"
1526                    class="inline-flex items-center gap-2 px-8 py-3.5 bg-primary hover:bg-primary/90 text-primary-foreground text-base font-semibold rounded-xl shadow-lg shadow-primary/25 hover:shadow-primary/40 transition-all duration-300 hover:scale-105">
1527                    <i data-lucide="sparkles" class="h-5 w-5"></i>
1528                    Start Free Trial
1529                </a>
1530                <p class="mt-3 text-sm text-muted-foreground">7-day free trial · No credit card required</p>
1531            </div>
1532        </div>
1533    </div>
1534</section>
1535
1536        <!-- Pricing Section -->
1537<section id="pricing" class="py-20 bg-muted/40">
1538    <div class="container">
1539        <!-- Section Header -->
1540        <div class="text-center mb-16 animate-fade-in">
1541            <h1 class="text-3xl sm:text-4xl font-bold mb-4">
1542                Simple, transparent pricing
1543            </h1>
1544            <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
1545                Start free for 7 days. No credit card required. Pick a plan that matches your scale.
1546            </p>
1547        </div>
1548
1549        <!-- Billing Toggle -->
1550        <div class="flex justify-center mb-10">
1551            <div class="billing-toggle group relative inline-flex items-center rounded-2xl border border-border/80 bg-background p-1.5 shadow-[0_2px_20px_-4px_rgba(0,0,0,0.08)]" id="billing-toggle">
1552                <!-- Sliding pill indicator -->
1553                <div class="billing-toggle-pill absolute top-1.5 bottom-1.5 rounded-xl bg-foreground transition-all duration-[400ms] ease-[cubic-bezier(0.16,1,0.3,1)]" id="billing-pill" style="left: 6px; width: calc(50% - 6px);"></div>
1554                <button data-billing="monthly" class="relative z-10 px-7 py-2.5 rounded-xl text-sm font-semibold tracking-tight transition-colors duration-300 text-background">
1555                    Monthly
1556                </button>
1557                <button data-billing="yearly" class="relative z-10 px-7 py-2.5 rounded-xl text-sm font-semibold tracking-tight transition-colors duration-300 text-muted-foreground hover:text-foreground">
1558                    Yearly
1559                </button>
1560                <!-- Floating savings badge -->
1561                <span class="absolute -top-2.5 -end-2 bg-emerald-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-md shadow-emerald-500/25 pointer-events-none ring-2 ring-background">
1562                    Save 20%
1563                </span>
1564            </div>
1565        </div>
1566
1567        <!-- Pricing Cards Grid -->
1568        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto mb-16">
1569
1570            <!-- Starter -->
1571            <div class="relative border-2 border-border hover:border-primary/50 hover:shadow-lg transition-all flex flex-col rounded-xl bg-card">
1572                <div class="text-center pb-6 p-6">
1573                    <h3 class="text-xl mb-3 font-semibold">Starter</h3>
1574                    <div class="mb-4">
1575                        <div class="flex items-baseline justify-center gap-0.5">
1576                            
1577                                <span class="text-5xl font-bold" data-price-monthly="19" data-price-yearly="15">19</span>
1578                                <span class="text-xl font-bold mt-1">$</span>
1579                            
1580                            <span class="text-muted-foreground text-sm">/ month</span>
1581                        </div>
1582                        <p class="text-xs text-muted-foreground mt-1">7-day free trial</p>
1583                        <p class="text-xs text-muted-foreground/70 mt-0.5 hidden" data-yearly-note>billed annually</p>
1584                    </div>
1585                    <p class="text-base font-semibold text-foreground">Get Started</p>
1586                </div>
1587                <div class="flex flex-col flex-1 px-6 pb-6">
1588                    <ul class="space-y-3 mb-6 flex-1">
1589                        <li class="pt-1 pb-2 border-b border-border/50">
1590                            <span class="text-xs font-semibold text-foreground/70 uppercase tracking-wide">Start free with:</span>
1591                        </li>
1592                        <li class="flex items-start gap-3">
1593                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1594                            <span class="text-sm">500 AI credits/month <span class="credits-tooltip-wrap"><i data-lucide="info" class="inline h-3.5 w-3.5 text-muted-foreground ml-1 cursor-help align-text-bottom"></i><span class="credits-tooltip">AI credits power all AI features: writing posts, rewriting titles, and running the product discovery agent. Credits reset monthly.</span></span></span>
1595                        </li>
1596                        <li class="flex items-start gap-3">
1597                            <i data-lucide="sparkles" class="h-5 w-5 text-pink-500 flex-shrink-0 mt-0.5"></i>
1598                            <span class="text-sm font-medium">AI Content Writer</span>
1599                        </li>
1600                        <li class="flex items-start gap-3">
1601                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1602                            <span class="text-sm">Telegram publishing</span>
1603                        </li>
1604                        <li class="flex items-start gap-3">
1605                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1606                            <span class="text-sm">Automatic order tracking</span>
1607                        </li>
1608                        <li class="flex items-start gap-3">
1609                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1610                            <span class="text-sm">1 group</span>
1611                        </li>
1612                    </ul>
1613                    <a href="https://app.afflow.co/signup" rel="noopener">
1614                        <button class="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-11 px-8 bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors">
1615                            Start Free Trial
1616                        </button>
1617                    </a>
1618                </div>
1619            </div>
1620
1621            <!-- Growth -->
1622            <div class="relative border-2 border-border hover:border-primary/50 hover:shadow-lg transition-all flex flex-col rounded-xl bg-card">
1623                <div class="text-center pb-6 p-6">
1624                    <h3 class="text-xl mb-3 font-semibold">Growth</h3>
1625                    <div class="mb-4">
1626                        <div class="flex items-baseline justify-center gap-0.5">
1627                            
1628                                <span class="text-5xl font-bold" data-price-monthly="39" data-price-yearly="31">39</span>
1629                                <span class="text-xl font-bold mt-1">$</span>
1630                            
1631                            <span class="text-muted-foreground text-sm">/ month</span>
1632                        </div>
1633                        <p class="text-xs text-muted-foreground mt-1">7-day free trial</p>
1634                        <p class="text-xs text-muted-foreground/70 mt-0.5 hidden" data-yearly-note>billed annually</p>
1635                    </div>
1636                    <p class="text-base font-semibold text-foreground">Your First AI Agent</p>
1637                </div>
1638                <div class="flex flex-col flex-1 px-6 pb-6">
1639                    <ul class="space-y-3 mb-6 flex-1">
1640                        <li class="pt-1 pb-2 border-b border-border/50">
1641                            <span class="text-xs font-semibold text-foreground/70 uppercase tracking-wide">Everything in Starter, plus:</span>
1642                        </li>
1643                        <li class="flex items-start gap-3">
1644                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1645                            <span class="text-sm">1,500 AI credits/month <span class="credits-tooltip-wrap"><i data-lucide="info" class="inline h-3.5 w-3.5 text-muted-foreground ml-1 cursor-help align-text-bottom"></i><span class="credits-tooltip">AI credits power all AI features: writing posts, rewriting titles, and running the product discovery agent. Credits reset monthly.</span></span></span>
1646                        </li>
1647                        <li class="flex items-start gap-3">
1648                            <i data-lucide="sparkles" class="h-5 w-5 text-pink-500 flex-shrink-0 mt-0.5"></i>
1649                            <span class="text-sm font-medium">AI Product Finder</span>
1650                        </li>
1651                        <li class="flex items-start gap-3">
1652                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1653                            <span class="text-sm">1 WhatsApp + Facebook + Pinterest publishing</span>
1654                        </li>
1655                        <li class="flex items-start gap-3">
1656                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1657                            <span class="text-sm">Track converting posts</span>
1658                        </li>
1659                        <li class="flex items-start gap-3">
1660                            <i data-lucide="sparkles" class="h-5 w-5 text-pink-500 flex-shrink-0 mt-0.5"></i>
1661                            <span class="text-sm font-medium">AI Image Optimizer</span>
1662                        </li>
1663                        <li class="flex items-start gap-3">
1664                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1665                            <span class="text-sm">5 groups</span>
1666                        </li>
1667                    </ul>
1668                    <a href="https://app.afflow.co/signup" rel="noopener">
1669                        <button class="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-11 px-8 bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors">
1670                            Start Free Trial
1671                        </button>
1672                    </a>
1673                </div>
1674            </div>
1675
1676            <!-- Autopilot (Featured) -->
1677            <div class="relative border-2 border-primary shadow-2xl transition-all flex flex-col rounded-xl bg-card z-10">
1678                <!-- Featured Badge -->
1679                <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-amber-500 text-white px-4 py-1.5 rounded-full text-sm font-semibold shadow-lg flex items-center gap-1.5 whitespace-nowrap">
1680                    <span>⭐ Most Popular</span>
1681                </div>
1682                <div class="text-center pb-6 p-6">
1683                    <h3 class="text-xl mb-3 font-semibold">Autopilot</h3>
1684                    <div class="mb-4">
1685                        <div class="flex items-baseline justify-center gap-0.5">
1686                            
1687                                <span class="text-5xl font-bold" data-price-monthly="69" data-price-yearly="55">69</span>
1688                                <span class="text-xl font-bold mt-1">$</span>
1689                            
1690                            <span class="text-muted-foreground text-sm">/ month</span>
1691                        </div>
1692                        <p class="text-xs text-muted-foreground mt-1">7-day free trial</p>
1693                        <p class="text-xs text-muted-foreground/70 mt-0.5 hidden" data-yearly-note>billed annually</p>
1694                    </div>
1695                    <p class="text-base font-semibold text-foreground">Full Autopilot</p>
1696                </div>
1697                <div class="flex flex-col flex-1 px-6 pb-6">
1698                    <ul class="space-y-3 mb-6 flex-1">
1699                        <li class="pt-1 pb-2 border-b border-border/50">
1700                            <span class="text-xs font-semibold text-foreground/70 uppercase tracking-wide">Everything in Growth, plus:</span>
1701                        </li>
1702                        <li class="flex items-start gap-3">
1703                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1704                            <span class="text-sm">3,000 AI credits/month <span class="credits-tooltip-wrap"><i data-lucide="info" class="inline h-3.5 w-3.5 text-muted-foreground ml-1 cursor-help align-text-bottom"></i><span class="credits-tooltip">AI credits power all AI features: writing posts, rewriting titles, and running the product discovery agent. Credits reset monthly.</span></span></span>
1705                        </li>
1706                        <li class="flex items-start gap-3">
1707                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1708                            <span class="text-sm">2 WhatsApp connections</span>
1709                        </li>
1710                        <li class="flex items-start gap-3">
1711                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1712                            <span class="text-sm">10 groups</span>
1713                        </li>
1714                        <li class="flex items-start gap-3">
1715                            <i data-lucide="sparkles" class="h-5 w-5 text-pink-500 flex-shrink-0 mt-0.5"></i>
1716                            <span class="text-sm font-medium">Auto Pilot Mode,discovery to revenue, zero input</span>
1717                        </li>
1718                    </ul>
1719                    <a href="https://app.afflow.co/signup" rel="noopener">
1720                        <button class="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-11 px-8 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white shadow-md transition-all">
1721                            Start Free Trial
1722                        </button>
1723                    </a>
1724                </div>
1725            </div>
1726
1727            <!-- Scale -->
1728            <div class="relative border-2 border-border hover:border-primary/50 hover:shadow-lg transition-all flex flex-col rounded-xl bg-card">
1729                <div class="text-center pb-6 p-6">
1730                    <h3 class="text-xl mb-3 font-semibold">Scale</h3>
1731                    <div class="mb-4">
1732                        <div class="flex items-baseline justify-center gap-0.5">
1733                            
1734                                <span class="text-5xl font-bold" data-price-monthly="119" data-price-yearly="95">119</span>
1735                                <span class="text-xl font-bold mt-1">$</span>
1736                            
1737                            <span class="text-muted-foreground text-sm">/ month</span>
1738                        </div>
1739                        <p class="text-xs text-muted-foreground mt-1">7-day free trial</p>
1740                        <p class="text-xs text-muted-foreground/70 mt-0.5 hidden" data-yearly-note>billed annually</p>
1741                    </div>
1742                    <p class="text-base font-semibold text-foreground">Agent Fleet</p>
1743                </div>
1744                <div class="flex flex-col flex-1 px-6 pb-6">
1745                    <ul class="space-y-3 mb-6 flex-1">
1746                        <li class="pt-1 pb-2 border-b border-border/50">
1747                            <span class="text-xs font-semibold text-foreground/70 uppercase tracking-wide">Everything in Autopilot, plus:</span>
1748                        </li>
1749                        <li class="flex items-start gap-3">
1750                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1751                            <span class="text-sm">6,000 AI credits/month <span class="credits-tooltip-wrap"><i data-lucide="info" class="inline h-3.5 w-3.5 text-muted-foreground ml-1 cursor-help align-text-bottom"></i><span class="credits-tooltip">AI credits power all AI features: writing posts, rewriting titles, and running the product discovery agent. Credits reset monthly.</span></span></span>
1752                        </li>
1753                        <li class="flex items-start gap-3">
1754                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1755                            <span class="text-sm">All publishing platforms unlocked</span>
1756                        </li>
1757                        <li class="flex items-start gap-3">
1758                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1759                            <span class="text-sm">3 WhatsApp connections</span>
1760                        </li>
1761                        <li class="flex items-start gap-3">
1762                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1763                            <span class="text-sm">Advanced P&amp;L reporting</span>
1764                        </li>
1765                        <li class="flex items-start gap-3">
1766                            <i data-lucide="check" class="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5"></i>
1767                            <span class="text-sm">100 groups</span>
1768                        </li>
1769                    </ul>
1770                    <a href="https://app.afflow.co/signup" rel="noopener">
1771                        <button class="w-full inline-flex items-center justify-center rounded-md text-sm font-medium h-11 px-8 bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors">
1772                            Start Free Trial
1773                        </button>
1774                    </a>
1775                </div>
1776            </div>
1777        </div>
1778
1779        <!-- Custom Plan CTA -->
1780        <div class="max-w-7xl mx-auto mb-8 animate-fade-in">
1781            <div class="rounded-xl border-2 border-dashed border-border/50 bg-muted/20 p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
1782                <div>
1783                    <h3 class="text-lg font-semibold">Need more scale?</h3>
1784                    <p class="text-sm text-muted-foreground mt-1">Custom plan for agencies and power users. Get dedicated support and tailored limits.</p>
1785                </div>
1786                <a href="mailto:[email protected]" rel="noopener">
1787                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium h-11 px-8 border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors shrink-0 gap-2">
1788                        <i data-lucide="mail" class="h-4 w-4"></i>
1789                        Contact Us
1790                    </button>
1791                </a>
1792            </div>
1793        </div>
1794
1795        <!-- WhatsApp Add-on -->
1796        <div class="max-w-3xl mx-auto animate-fade-in" style="animation-delay: 0.2s">
1797            <div class="relative border-2 border-dashed border-primary/30 bg-primary/5 rounded-xl">
1798                <div class="p-6">
1799                    <div class="flex flex-col md:flex-row items-center justify-between gap-6">
1800                        <div class="flex items-start gap-4 flex-1">
1801                            <div class="p-3 bg-emerald-500/10 rounded-lg flex-shrink-0">
1802                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-500">
1803                                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
1804                                </svg>
1805                            </div>
1806                            <div>
1807                                <h3 class="text-lg font-bold mb-2">Need More WhatsApp Channels?</h3>
1808                                <p class="text-sm text-muted-foreground mb-2">Add extra WhatsApp connections beyond what&#39;s included in your plan.</p>
1809                                <p class="text-xs text-muted-foreground/70 italic">Available on all plans</p>
1810                            </div>
1811                        </div>
1812                        <div class="text-center md:text-right flex-shrink-0">
1813                            <div class="text-3xl font-bold text-foreground">
1814                                
1815                                    $19
1816                                
1817                            </div>
1818                            <div class="text-xs text-muted-foreground mt-1">/ month per extra connection</div>
1819                        </div>
1820                    </div>
1821                </div>
1822            </div>
1823        </div>
1824
1825        <!-- Compare Features Toggle -->
1826        <div class="mt-12 text-center">
1827            <button id="compare-toggle" class="inline-flex items-center justify-center rounded-md text-sm font-medium h-11 px-8 bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors" data-text-show="Compare plans" data-text-hide="Hide comparison">
1828                <span id="compare-toggle-text">Compare plans</span>
1829            </button>
1830        </div>
1831
1832        <!-- Features Comparison Table -->
1833        <div id="comparison-table" class="mt-6 hidden">
1834            <div class="overflow-x-auto overflow-y-auto max-h-[600px] rounded-xl border border-border bg-card">
1835                <table class="w-full text-sm border-collapse min-w-[600px]">
1836                    <thead>
1837                        <tr class="border-b border-border">
1838                            <th class="sticky top-0 z-10 bg-card text-left font-medium text-muted-foreground py-4 px-5 w-[220px]"></th>
1839                            <th class="sticky top-0 z-10 text-center py-4 px-4 font-semibold bg-card text-foreground">
1840                                <div class="flex flex-col items-center gap-0.5">
1841                                    <span>Starter</span>
1842                                    <span class="text-xs font-normal text-muted-foreground" data-compare-price-monthly="$19" data-compare-price-yearly="$15">$19</span>
1843                                </div>
1844                            </th>
1845                            <th class="sticky top-0 z-10 text-center py-4 px-4 font-semibold bg-card text-foreground">
1846                                <div class="flex flex-col items-center gap-0.5">
1847                                    <span>Growth</span>
1848                                    <span class="text-xs font-normal text-muted-foreground" data-compare-price-monthly="$39" data-compare-price-yearly="$31">$39</span>
1849                                </div>
1850                            </th>
1851                            <th class="sticky top-0 z-10 text-center py-4 px-4 font-semibold bg-primary/5 text-primary">
1852                                <div class="flex flex-col items-center gap-0.5">
1853                                    <span>Autopilot</span>
1854                                    <span class="text-xs font-normal text-muted-foreground" data-compare-price-monthly="$69" data-compare-price-yearly="$55">$69</span>
1855                                </div>
1856                            </th>
1857                            <th class="sticky top-0 z-10 text-center py-4 px-4 font-semibold bg-card text-foreground">
1858                                <div class="flex flex-col items-center gap-0.5">
1859                                    <span>Scale</span>
1860                                    <span class="text-xs font-normal text-muted-foreground" data-compare-price-monthly="$119" data-compare-price-yearly="$95">$119</span>
1861                                </div>
1862                            </th>
1863                        </tr>
1864                    </thead>
1865                    <tbody>
1866                        <!-- Platforms -->
1867                        <tr>
1868                            <td colspan="5" class="px-5 pt-5 pb-2">
1869                                <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Publishing Platforms</span>
1870                            </td>
1871                        </tr>
1872                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1873                            <td class="py-3 px-5 text-sm text-foreground">Telegram</td>
1874                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1875                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1876                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1877                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1878                        </tr>
1879                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1880                            <td class="py-3 px-5 text-sm text-foreground">WhatsApp</td>
1881                            <td class="py-3 px-4 text-center">
1881<span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
1882                            <td class="py-3 px-4 text-center"><span class="text-xs text-muted-foreground">1 connection</span></td>
1883                            <td class="py-3 px-4 text-center bg-primary/5"><span class="text-xs text-muted-foreground">2 connections</span></td>
1884                            <td class="py-3 px-4 text-center"><span class="text-xs text-muted-foreground">3 connections</span></td>
1885                        </tr>
1886                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1887                            <td class="py-3 px-5 text-sm text-foreground">Facebook</td>
1888                            <td class="py-3 px-4 text-center"><span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
1889                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1890                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1891                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1892                        </tr>
1893                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1894                            <td class="py-3 px-5 text-sm text-foreground">Instagram</td>
1895                            <td class="py-3 px-4 text-center"><span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
1896                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1897                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1898                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1899                        </tr>
1900                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1901                            <td class="py-3 px-5 text-sm text-foreground">Pinterest</td>
1902                            <td class="py-3 px-4 text-center"><span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
1903                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1904                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1905                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1906                        </tr>
1907
1908                        <!-- Products -->
1909                        <tr>
1910                            <td colspan="5" class="px-5 pt-6 pb-2">
1911                                <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Product Sources</span>
1912                            </td>
1913                        </tr>
1914                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1915                            <td class="py-3 px-5 text-sm text-foreground">AliExpress integration</td>
1916                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1917                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1918                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1919                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1920                        </tr>
1921                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1922                            <td class="py-3 px-5 text-sm text-foreground">Amazon integration</td>
1923                            <td class="py-3 px-4 text-center">
1923<span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
1924                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1925                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1926                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1927                        </tr>
1928
1929                        <!-- AI & Automation -->
1930                        <tr>
1931                            <td colspan="5" class="px-5 pt-6 pb-2">
1932                                <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">AI &amp; Automation</span>
1933                            </td>
1934                        </tr>
1935                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1936                            <td class="py-3 px-5 text-sm text-foreground">Smart scheduling</td>
1937                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1938                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1939                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1940                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1941                        </tr>
1942                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1943                            <td class="py-3 px-5 text-sm text-foreground">AI post writing</td>
1944                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1945                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1946                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1947                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1948                        </tr>
1949                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1950                            <td class="py-3 px-5 text-sm text-foreground">AI credits / month <span class="credits-tooltip-wrap"><i data-lucide="info" class="inline h-3.5 w-3.5 text-muted-foreground ml-1 cursor-help align-text-bottom"></i><span class="credits-tooltip">AI credits power all AI features: writing posts, rewriting titles, and running the product discovery agent. Credits reset monthly.</span></span></td>
1951                            <td class="py-3 px-4 text-center"><span class="text-sm font-medium text-foreground">500</span></td>
1952                            <td class="py-3 px-4 text-center"><span class="text-sm font-medium text-foreground">1,500</span></td>
1953                            <td class="py-3 px-4 text-center bg-primary/5"><span class="text-sm font-medium text-foreground">3,000</span></td>
1954                            <td class="py-3 px-4 text-center"><span class="text-sm font-medium text-foreground">6,000</span></td>
1955                        </tr>
1956                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1957                            <td class="py-3 px-5 text-sm text-foreground">AI Discovery Agent</td>
1958                            <td class="py-3 px-4 text-center"><span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
1959                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1960                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1961                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1962                        </tr>
1963                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1964                            <td class="py-3 px-5 text-sm text-foreground">AI Image Optimizer</td>
1965                            <td class="py-3 px-4 text-center">
1965<span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
1966                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1967                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1968                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1969                        </tr>
1970                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1971                            <td class="py-3 px-5 text-sm text-foreground">Auto Pilot Mode</td>
1972                            <td class="py-3 px-4 text-center"><span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
1973                            <td class="py-3 px-4 text-center"><span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
1974                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1975                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
1976                        </tr>
1977
1978                        <!-- Scale -->
1979                        <tr>
1980                            <td colspan="5" class="px-5 pt-6 pb-2">
1981                                <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Groups &amp; Scale</span>
1982                            </td>
1983                        </tr>
1984                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1985                            <td class="py-3 px-5 text-sm text-foreground">Max groups</td>
1986                            <td class="py-3 px-4 text-center"><span class="text-sm font-medium text-foreground">1</span></td>
1987                            <td class="py-3 px-4 text-center"><span class="text-sm font-medium text-foreground">5</span></td>
1988                            <td class="py-3 px-4 text-center bg-primary/5"><span class="text-sm font-medium text-foreground">10</span></td>
1989                            <td class="py-3 px-4 text-center"><span class="text-sm font-medium text-foreground">100</span></td>
1990                        </tr>
1991
1992                        <!-- Analytics -->
1993                        <tr>
1994                            <td colspan="5" class="px-5 pt-6 pb-2">
1995                                <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Analytics &amp; Tracking</span>
1996                            </td>
1997                        </tr>
1998                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
1999                            <td class="py-3 px-5 text-sm text-foreground">Orders sync</td>
2000                            <td class="py-3 px-4 text-center"><span class="text-xs text-muted-foreground">Basic</span></td>
2001                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
2002                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
2003                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
2004                        </tr>
2005                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
2006                            <td class="py-3 px-5 text-sm text-foreground">Track converting posts</td>
2007                            <td class="py-3 px-4 text-center"><span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
2008                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
2009                            <td class="py-3 px-4 text-center bg-primary/5"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
2010                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
2011                        </tr>
2012                        <tr class="border-t border-border/40 hover:bg-muted/20 transition-colors">
2013                            <td class="py-3 px-5 text-sm text-foreground">P&amp;L reporting</td>
2014                            <td class="py-3 px-4 text-center">
2014<span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
2015                            <td class="py-3 px-4 text-center"><span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
2016                            <td class="py-3 px-4 text-center bg-primary/5"><span class="text-muted-foreground/30 font-light text-base leading-none">&mdash;</span></td>
2017                            <td class="py-3 px-4 text-center"><i data-lucide="check" class="h-4 w-4 text-emerald-500 mx-auto"></i></td>
2018                        </tr>
2019
2020                        <!-- Bottom padding -->
2021                        <tr><td colspan="5" class="py-3"></td></tr>
2022                    </tbody>
2023                </table>
2024            </div>
2025        </div>
2026
2027        <!-- Microcopy -->
2028        <div class="mt-12 text-center">
2029            <p class="text-sm text-muted-foreground flex items-center justify-center gap-2 flex-wrap">
2030                <i data-lucide="check" class="h-4 w-4 text-emerald-500"></i>
2031                <span>No credit card required</span>
2032                <span>&middot;</span>
2033                <i data-lucide="check" class="h-4 w-4 text-emerald-500"></i>
2034                <span>Cancel anytime</span>
2035            </p>
2036        </div>
2037    </div>
2038</section>
2039
2040        <!-- Dark CTA Section -->
2041<section class="py-24 md:py-32 relative overflow-hidden" style="background: linear-gradient(170deg, #020617 0%, #0c1a3d 30%, #132e6b 52%, #1a4494 72%, #2563EB 100%)">
2042    <!-- Floating orbs -->
2043    <div class="absolute top-[15%] right-[10%] w-[350px] h-[350px] rounded-full pointer-events-none" style="background: rgba(255,255,255,0.05); filter: blur(80px);"></div>
2044    <div class="absolute bottom-[20%] left-[15%] w-[280px] h-[280px] rounded-full pointer-events-none" style="background: rgba(59,130,246,0.12); filter: blur(90px);"></div>
2045    <!-- Wave at bottom -->
2046    <div class="absolute bottom-0 left-0 right-0 pointer-events-none">
2047        <svg viewBox="0 0 800 280" fill="none" preserveAspectRatio="none" style="width: 100%; height: 140px; display: block;">
2048            <defs>
2049                <linearGradient id="dark-cta-wave1" x1="0" y1="0" x2="800" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#1d4ed8" /><stop offset="50%" stop-color="#2563EB" /><stop offset="100%" stop-color="#3b82f6" /></linearGradient>
2050                <linearGradient id="dark-cta-wave2" x1="0" y1="0" x2="800" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#2563EB" /><stop offset="100%" stop-color="#60a5fa" /></linearGradient>
2051            </defs>
2052            <path d="M0 280V180C40 150 120 100 200 90C300 78 380 120 480 140C560 155 660 130 740 150C780 160 800 175 800 175V280H0Z" fill="url(#dark-cta-wave1)" opacity="0.3" />
2053            <path d="M0 280V220C60 195 150 170 260 175C370 180 440 210 540 200C620 192 720 210 800 230V280H0Z" fill="url(#dark-cta-wave2)" opacity="0.45" />
2054        </svg>
2055    </div>
2056
2057    <div class="container relative z-10">
2058        <div class="max-w-4xl mx-auto text-center">
2059            <!-- Title -->
2060            <h2 class="amz-hero-headline text-4xl md:text-5xl lg:text-[3.2rem] font-extrabold leading-[1.08] tracking-tight mb-4 text-white animate-fade-in-up" style="animation-delay: 0.1s">
2061                Automate your affiliate marketing<br>
2062                <span class="amz-accent-text">#withAfflow</span>
2063            </h2>
2064
2065            <!-- Subtitle -->
2066            <p class="text-[0.95rem] md:text-base text-white/50 mb-10 max-w-xl mx-auto leading-relaxed animate-fade-in-up" style="animation-delay: 0.2s">
2067                From product discovery to publishing and commission tracking, your entire affiliate workflow automated in one platform.
2068            </p>
2069
2070            <!-- CTA Button -->
2071            <div class="animate-fade-in-up" style="animation-delay: 0.3s">
2072                <a href="https://app.afflow.co/signup" rel="noopener" class="inline-flex items-center gap-2 px-10 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white text-xl font-semibold rounded-xl shadow-2xl shadow-blue-500/40 hover:shadow-blue-400/60 transition-all duration-300 hover:scale-105">
2073                    <i data-lucide="sparkles" class="h-6 w-6"></i>
2074                    Start Free Trial
2075                </a>
2076            </div>
2077        </div>
2078    </div>
2079</section>
2080
2081        <!-- FAQ Section -->
2082<section id="faq" class="py-20 bg-background">
2083    <div class="container">
2084        <div class="text-center mb-16">
2085            <h2 class="text-3xl sm:text-4xl font-bold mb-4">Frequently Asked Questions: Afflow</h2>
2086            <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
2087                Everything you need to know about Afflow. Can&#39;t find what you&#39;re looking for? Contact our support team.
2088            </p>
2089        </div>
2090
2091        <div class="max-w-3xl mx-auto divide-y divide-border" id="faq-list">
2092            <!-- FAQ 1 -->
2093            <div class="group" data-faq>
2094                <button data-faq-toggle aria-expanded="false" class="w-full flex items-center justify-between gap-4 py-5 text-start hover:text-primary transition-colors duration-200">
2095                    <span class="flex items-center gap-3">
2096                        <span class="text-xs font-mono font-bold text-primary/50 group-hover:text-primary/80 transition-colors w-5 flex-shrink-0">01</span>
2097                        <span class="text-base font-semibold">What do I need to start using Afflow?</span>
2098                    </span>
2099                    <i data-lucide="chevron-down" class="h-5 w-5 flex-shrink-0 text-muted-foreground transition-transform duration-300"></i>
2100                </button>
2101                <div data-faq-content class="overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0px; opacity: 0">
2102                    <p class="pb-5 pl-8 text-muted-foreground leading-relaxed">
2103                        To get started, you&#39;ll need: (1) an affiliate account with AliExpress or Amazon, (2) a publishing channel,Telegram group, WhatsApp group, Facebook page, or Instagram account, and (3) optionally a Telegram bot for automated publishing. Signing up for Afflow is free.
2104                    </p>
2105                </div>
2106            </div>
2107
2108            <!-- FAQ 2 -->
2109            <div class="group" data-faq>
2110                <button data-faq-toggle aria-expanded="false" class="w-full flex items-center justify-between gap-4 py-5 text-start hover:text-primary transition-colors duration-200">
2111                    <span class="flex items-center gap-3">
2112                        <span class="text-xs font-mono font-bold text-primary/50 group-hover:text-primary/80 transition-colors w-5 flex-shrink-0">02</span>
2113                        <span class="text-base font-semibold">Do I need technical knowledge to use Afflow?</span>
2114                    </span>
2115                    <i data-lucide="chevron-down" class="h-5 w-5 flex-shrink-0 text-muted-foreground transition-transform duration-300"></i>
2116                </button>
2117                <div data-faq-content class="overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0px; opacity: 0">
2118                    <p class="pb-5 pl-8 text-muted-foreground leading-relaxed">
2119                        No. Afflow is built for marketers without technical backgrounds. If you can copy and paste text, you have everything you need. The setup process only involves copying API keys,no coding required.
2120                    </p>
2121                </div>
2122            </div>
2123
2124            <!-- FAQ 3 -->
2125            <div class="group" data-faq>
2126                <button data-faq-toggle aria-expanded="false" class="w-full flex items-center justify-between gap-4 py-5 text-start hover:text-primary transition-colors duration-200">
2127                    <span class="flex items-center gap-3">
2128                        <span class="text-xs font-mono font-bold text-primary/50 group-hover:text-primary/80 transition-colors w-5 flex-shrink-0">03</span>
2129                        <span class="text-base font-semibold">How do I connect to the AliExpress API?</span>
2130                    </span>
2131                    <i data-lucide="chevron-down" class="h-5 w-5 flex-shrink-0 text-muted-foreground transition-transform duration-300"></i>
2132                </button>
2133                <div data-faq-content class="overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0px; opacity: 0">
2134                    <p class="pb-5 pl-8 text-muted-foreground leading-relaxed">
2135                        To connect to the AliExpress API, you&#39;ll need to create an application on the AliExpress affiliate platform and obtain an App Key, App Secret, and Tracking ID. The process is simple and takes about 5 minutes. For a detailed guide, refer to Afflow&#39;s support article.
2136                    </p>
2137                </div>
2138            </div>
2139
2140            <!-- FAQ 4 -->
2141            <div class="group" data-faq>
2142                <button data-faq-toggle aria-expanded="false" class="w-full flex items-center justify-between gap-4 py-5 text-start hover:text-primary transition-colors duration-200">
2143                    <span class="flex items-center gap-3">
2144                        <span class="text-xs font-mono font-bold text-primary/50 group-hover:text-primary/80 transition-colors w-5 flex-shrink-0">04</span>
2145                        <span class="text-base font-semibold">How do I create a Telegram bot and get the token?</span>
2146                    </span>
2147                    <i data-lucide="chevron-down" class="h-5 w-5 flex-shrink-0 text-muted-foreground transition-transform duration-300"></i>
2148                </button>
2149                <div data-faq-content class="overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0px; opacity: 0">
2150                    <p class="pb-5 pl-8 text-muted-foreground leading-relaxed">
2151                        Send a message to @BotFather on Telegram, send `/newbot`, choose a name for your bot, and receive a token that looks like this: `1234567890:ABCdefGHIjklMNOpqrs`. Copy the token to Afflow settings - that&#39;s it.
2152                    </p>
2153                </div>
2154            </div>
2155
2156            <!-- FAQ 5 -->
2157            <div class="group" data-faq>
2158                <button data-faq-toggle aria-expanded="false" class="w-full flex items-center justify-between gap-4 py-5 text-start hover:text-primary transition-colors duration-200">
2159                    <span class="flex items-center gap-3">
2160                        <span class="text-xs font-mono font-bold text-primary/50 group-hover:text-primary/80 transition-colors w-5 flex-shrink-0">05</span>
2161                        <span class="text-base font-semibold">How much can I earn with affiliate marketing using Afflow?</span>
2162                    </span>
2163                    <i data-lucide="chevron-down" class="h-5 w-5 flex-shrink-0 text-muted-foreground transition-transform duration-300"></i>
2164                </button>
2165                <div data-faq-content class="overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0px; opacity: 0">
2166                    <p class="pb-5 pl-8 text-muted-foreground leading-relaxed">
2167                        Earnings depend on your audience size and posting consistency. Affiliate marketers with a few thousand Telegram or WhatsApp subscribers typically earn $200-$500/month. As you grow your channels and optimize your strategy with Afflow&#39;s tracking data, income scales significantly. The automation means you can manage more channels without spending more time.
2168                    </p>
2169                </div>
2170            </div>
2171
2172            <!-- FAQ 6 -->
2173            <div class="group" data-faq>
2174                <button data-faq-toggle aria-expanded="false" class="w-full flex items-center justify-between gap-4 py-5 text-start hover:text-primary transition-colors duration-200">
2175                    <span class="flex items-center gap-3">
2176                        <span class="text-xs font-mono font-bold text-primary/50 group-hover:text-primary/80 transition-colors w-5 flex-shrink-0">06</span>
2177                        <span class="text-base font-semibold">What results can I expect in the first month?</span>
2178                    </span>
2179                    <i data-lucide="chevron-down" class="h-5 w-5 flex-shrink-0 text-muted-foreground transition-transform duration-300"></i>
2180                </button>
2181                <div data-faq-content class="overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0px; opacity: 0">
2182                    <p class="pb-5 pl-8 text-muted-foreground leading-relaxed">
2183                        In your first month, most users see a 90% reduction in time spent on content creation and publishing. Instead of manually writing posts and copy-pasting to each group, Afflow handles it in seconds. The real impact comes from consistency , with automation, you can post more frequently across more channels, which directly increases your commissions.
2184                    </p>
2185                </div>
2186            </div>
2187        </div>
2188
2189        <!-- Still have questions -->
2190        <div class="mt-12 text-center">
2191            <p class="text-muted-foreground">
2192                Still have questions?
2193                <a href="mailto:[email protected]" class="text-primary hover:underline font-medium ml-1">
2194                    Contact our support team →
2195                </a>
2196            </p>
2197        </div>
2198    </div>
2199</section>
2200
2201    </main>
2202
2203    <!-- Footer -->
2204<footer class="bg-slate-950 text-slate-400 border-t border-slate-800">
2205    <div class="container py-14">
2206        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
2207
2208            <!-- Brand column -->
2209            <div class="sm:col-span-2 lg:col-span-1">
2210                <a href="/" class="inline-block mb-4" aria-label="Afflow Home">
2211                    <img loading="lazy" src="/images/logo.png" alt="Afflow" class="h-9 w-auto brightness-0 invert opacity-90">
2212                </a>
2213                <p class="text-sm leading-relaxed text-slate-400 max-w-xs">
2214                    Automate your affiliate flow. Run your affiliate communities effortlessly with AI-powered automation.
2215                </p>
2216            </div>
2217
2218            <!-- Product links -->
2219            <div>
2220                <h4 class="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-4">Product</h4>
2221                <ul class="space-y-2.5">
2222                    <li><a href="#features" class="text-sm hover:text-white transition-colors duration-200">Features</a></li>
2223                    <li><a href="/pricing" class="text-sm hover:text-white transition-colors duration-200">Pricing</a></li>
2224                    <li><a href="#flow-showcase" class="text-sm hover:text-white transition-colors duration-200">How It Works</a></li>
2225                    <li><a href="#faq" class="text-sm hover:text-white transition-colors duration-200">FAQ</a></li>
2226                    <li><a href="/chrome-extension" class="text-sm hover:text-white transition-colors duration-200">Chrome Extension</a></li>
2227                    <li><a href="/blog" class="text-sm hover:text-white transition-colors duration-200">Blog</a></li>
2228                </ul>
2229            </div>
2230
2231            <!-- Integrations -->
2232            <div>
2233                <h4 class="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-4">Integrations</h4>
2234                <ul class="space-y-2.5">
2235                    <li><a href="/aliexpress" class="text-sm hover:text-white transition-colors duration-200">AliExpress</a></li>
2236                    <li><a href="/amazon" class="text-sm hover:text-white transition-colors duration-200">Amazon</a></li>
2237                    <li><a href="/telegram" class="text-sm hover:text-white transition-colors duration-200">Telegram</a></li>
2238                    <li><a href="/whatsapp" class="text-sm hover:text-white transition-colors duration-200">WhatsApp</a></li>
2239                    <li><a href="/facebook" class="text-sm hover:text-white transition-colors duration-200">Facebook</a></li>
2240                    <li><a href="/instagram" class="text-sm hover:text-white transition-colors duration-200">Instagram</a></li>
2241                    <li><a href="/pinterest" class="text-sm hover:text-white transition-colors duration-200">Pinterest</a></li>
2242                </ul>
2243            </div>
2244
2245            <!-- Legal & support -->
2246            <div>
2247                <h4 class="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-4">Company</h4>
2248                <ul class="space-y-2.5">
2249                    <li><a href="/terms" class="text-sm hover:text-white transition-colors duration-200">Terms</a></li>
2250                    <li><a href="/privacy" class="text-sm hover:text-white transition-colors duration-200">Privacy Policy</a></li>
2251                    <li><a href="/cookies" class="text-sm hover:text-white transition-colors duration-200">Cookies</a></li>
2252                    <li><a href="/help" class="text-sm hover:text-white transition-colors duration-200">Help</a></li>
2253                    <li><a href="mailto:[email protected]" rel="noopener" class="text-sm hover:text-white transition-colors duration-200">Support</a></li>
2254                </ul>
2255            </div>
2256        </div>
2257
2258        <!-- Bottom bar -->
2259        <div class="border-t border-slate-800 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3">
2260            <p class="text-xs text-slate-600">
2261                © 2026 Afflow. All rights reserved.
2262            </p>
2263            <p class="text-xs text-slate-600">
2264                Built for affiliate marketers who want to scale.
2265            </p>
2266        </div>
2267    </div>
2268</footer>
2269
2270
2271    <!-- Locale data for JS -->
2272    
2272<script>
2273        window.__LANG__ = 'en';
2274    </script>
2274
2275    
2275<script src="/js/main.js"></script>
2275
2276    
2276<script>lucide.createIcons();</script>
2276
2277</body>
2278</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.