Initial commit: Kottgard testing website code

2026-06-19 15:46:24 +00:00
commit bd885cf0fa
196 changed files with 29799 additions and 0 deletions
@@ -0,0 +1,95 @@
+/**
+ * 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)
+}