Initial commit: Kottgard production website code

2026-06-19 15:46:23 +00:00
commit e0273c46d7
196 changed files with 29799 additions and 0 deletions
@@ -0,0 +1,66 @@
+'use client';
+
+import { Facebook, Instagram, MessageCircle } from 'lucide-react';
+import {
+  FACEBOOK_URL,
+  INSTAGRAM_URL,
+  WHATSAPP_URL,
+} from '@/lib/constants';
+import { useTranslation } from '@/hooks/useTranslation';
+
+const socialLinks = [
+  {
+    key: 'facebook',
+    href: FACEBOOK_URL,
+    icon: Facebook,
+    className:
+      'border-blue-600/20 bg-blue-600/10 text-blue-700 hover:border-blue-600/40 hover:bg-blue-600/15',
+  },
+  {
+    key: 'instagram',
+    href: INSTAGRAM_URL,
+    icon: Instagram,
+    className:
+      'border-pink-600/20 bg-pink-600/10 text-pink-700 hover:border-pink-600/40 hover:bg-pink-600/15',
+  },
+  {
+    key: 'whatsapp',
+    href: WHATSAPP_URL,
+    icon: MessageCircle,
+    className:
+      'border-green-600/20 bg-green-600/10 text-green-700 hover:border-green-600/40 hover:bg-green-600/15',
+  },
+] as const;
+
+export default function SocialFollow() {
+  const { t } = useTranslation();
+
+  return (
+    <section className="py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="rounded-3xl border border-cream-300/80 bg-white px-8 py-12 text-center shadow-premium sm:px-16">
+          <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+            {t('social.label')}
+          </span>
+          <h2 className="section-heading mb-3">{t('social.title')}</h2>
+          <p className="mx-auto mb-8 max-w-xl text-gray-500">{t('social.subtitle')}</p>
+
+          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
+            {socialLinks.map(({ key, href, icon: Icon, className }) => (
+              <a
+                key={key}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`inline-flex items-center gap-2 rounded-xl border-2 px-6 py-3 text-sm font-semibold transition-all ${className}`}
+              >
+                <Icon className="h-5 w-5" />
+                {t(`social.${key}`)}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}