96 lines
5.2 KiB
TypeScript
96 lines
5.2 KiB
TypeScript
/**
|
|
* ANNOTATED COPY — every line explained
|
|
* Source: src/components/home/CTA.tsx
|
|
* NOT used by the app — read this to learn how the real file works
|
|
*/
|
|
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
|
|
'use client';
|
|
// (blank line — separates logical blocks for readability)
|
|
// Next.js Link — fast client-side navigation without full page reload
|
|
import Link from 'next/link';
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import Button from '@/components/ui/Button';
|
|
// Lucide icons — lightweight SVG icon components
|
|
import { ArrowRight, MessageCircle } from 'lucide-react';
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import { WHATSAPP_URL } from '@/lib/constants';
|
|
// (blank line — separates logical blocks for readability)
|
|
// Default export — main component/page Next.js or other files import
|
|
export default function CTA() {
|
|
// Custom hook — returns t() translator and current locale
|
|
const { t } = useTranslation();
|
|
// (blank line — separates logical blocks for readability)
|
|
// Return JSX — describes UI tree React renders to the DOM
|
|
return (
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<section className="py-20">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-700 to-brand-900 px-8 py-16 text-center sm:px-16">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="absolute -right-20 -top-20 h-60 w-60 rounded-full bg-gold-500/10" />
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-gold-500/10" />
|
|
// (blank line — separates logical blocks for readability)
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="relative">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<h2 className="mb-4 font-display text-3xl font-bold text-white md:text-4xl">
|
|
// Line 21: {t('cta.title')}
|
|
{t('cta.title')}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</h2>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<p className="mx-auto mb-8 max-w-xl text-brand-100">{t('cta.subtitle')}</p>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<Link href="/shop">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<Button variant="gold" size="lg">
|
|
// Line 27: {t('cta.button')}
|
|
{t('cta.button')}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<ArrowRight className="h-4 w-4 rtl:rotate-180" />
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</Button>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</Link>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<Button
|
|
// Line 33: variant="secondary"
|
|
variant="secondary"
|
|
// Line 34: size="lg"
|
|
size="lg"
|
|
// Tailwind CSS utility classes — styling (colors, spacing, layout)
|
|
className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
|
|
// Line 36: >
|
|
>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<MessageCircle className="h-4 w-4" />
|
|
// Line 38: {t('cta.whatsapp')}
|
|
{t('cta.whatsapp')}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</Button>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</a>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</section>
|
|
// Line 46: );
|
|
);
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
}
|