From 005d071d3a130bf2a018f5ee94d695d65ed40e17 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 3 Sep 2026 19:12:46 +0700
Subject: [PATCH] feat: add social media icons for Instagram, Facebook, and
 TikTok in the Welcome component

---
 resources/js/pages/welcome.tsx | 43 ++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/welcome.tsx b/resources/js/pages/welcome.tsx
index 26401fb..b8f541d 100644
--- a/resources/js/pages/welcome.tsx
+++ b/resources/js/pages/welcome.tsx
@@ -12,7 +12,9 @@ import {
     ArrowRight,
     Check,
     ChevronRight,
+    Facebook,
     Info,
+    Instagram,
     LogIn,
     Mail,
     MapPin,
@@ -24,6 +26,14 @@ import {
 } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+function TiktokIcon({ className }: { className?: string }) {
+    return (
+        <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+            <path d="M16.6 5.82c-.7-.77-1.09-1.77-1.09-2.82h-3.13v13.14c0 1.53-1.24 2.77-2.77 2.77a2.77 2.77 0 0 1-2.77-2.77 2.77 2.77 0 0 1 2.77-2.77c.29 0 .56.04.82.12v-3.17a5.9 5.9 0 0 0-.82-.06A5.9 5.9 0 0 0 3.75 16.1a5.9 5.9 0 0 0 5.86 5.9 5.9 5.9 0 0 0 5.9-5.9V9.13a7.83 7.83 0 0 0 4.58 1.47V7.47a4.85 4.85 0 0 1-3.49-1.65z" />
+        </svg>
+    );
+}
+
 type Props = {
     appName: string;
     aboutApp: string | null;
@@ -617,22 +627,45 @@ export default function Welcome({
                                 <li><a href="#about" className="hover transition-colors">Tentang Kami</a></li>
                                 <li><a href="#order-guide" className="hover transition-colors">Cara Pemesanan</a></li>
                                 <li><a href="#contact" className="hover transition-colors">Hubungi Kami</a></li>
-                                <li><a href="/admin/dashboard" className="hover transition-colors font-semibold">Login Dashboard Admin</a></li>
                             </ul>
                         </div>
 
                         <div className="space-y-3">
                             <h4 className="text-xs uppercase font-bold text-slate-800 tracking-widest">Sosial Media</h4>
                             <p className="text-xs text-slate-400 font-light">Ikuti sosial media kami untuk mendapatkan update produk terbaru.</p>
-                            <div className="flex space-x-3 text-xs">
+                            <div className="flex items-center space-x-3">
                                 {instagramUrl && (
-                                    <a href={instagramUrl} target="_blank" rel="noreferrer" className="text-slate-400 hover">Instagram</a>
+                                    <a
+                                        href={instagramUrl}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        aria-label="Instagram"
+                                        className="flex items-center justify-center w-9 h-9 rounded-full border border-amber-100 text-slate-400 hover:text-amber-600 hover:border-amber-300 transition-colors"
+                                    >
+                                        <Instagram className="w-4 h-4" />
+                                    </a>
                                 )}
                                 {facebookUrl && (
-                                    <a href={facebookUrl} target="_blank" rel="noreferrer" className="text-slate-400 hover">Facebook</a>
+                                    <a
+                                        href={facebookUrl}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        aria-label="Facebook"
+                                        className="flex items-center justify-center w-9 h-9 rounded-full border border-amber-100 text-slate-400 hover:text-amber-600 hover:border-amber-300 transition-colors"
+                                    >
+                                        <Facebook className="w-4 h-4" />
+                                    </a>
                                 )}
                                 {tiktokUrl && (
-                                    <a href={tiktokUrl} target="_blank" rel="noreferrer" className="text-slate-400 hover">TikTok</a>
+                                    <a
+                                        href={tiktokUrl}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        aria-label="TikTok"
+                                        className="flex items-center justify-center w-9 h-9 rounded-full border border-amber-100 text-slate-400 hover:text-amber-600 hover:border-amber-300 transition-colors"
+                                    >
+                                        <TiktokIcon className="w-4 h-4" />
+                                    </a>
                                 )}
                             </div>
                         </div>