Update app/page.tsx

app/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Card } from "@/components/ui/card";
+import { Youtube, Instagram, ShoppingBag, Mail, ArrowUpRight } from "lucide-react";
+import Image from "next/image";
+
+const links = [
+  {
+    title: "Watch my latest YouTube video",
+    url: "https://youtube.com",
+    icon: <Youtube className="w-6 h-6" />,
+    color: "bg-[#FF0000]",
+  },
+  {
+    title: "Follow me on Instagram",
+    url: "https://instagram.com",
+    icon: <Instagram className="w-6 h-6" />,
+    color: "bg-[#E1306C]",
+  },
+  {
+    title: "Shop my digital products",
+    url: "https://shop.com",
+    icon: <ShoppingBag className="w-6 h-6" />,
+    color: "bg-[#00B2FF]",
+  },
+  {
+    title: "Join the Newsletter",
+    url: "https://newsletter.com",
+    icon: <Mail className="w-6 h-6" />,
+    color: "bg-[#FFD700]",
+  },
+];
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-[#FF3D00] pt-24 pb-12 px-4 relative overflow-hidden">
+      <div className="fixed inset-0 z-0 opacity-30 pointer-events-none">
+        <Image 
+          src="https://images.unsplash.com/photo-1705254613735-1abb457f8a60?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHx2aWJyYW50JTIwYWJzdHJhY3QlMjBiYWNrZ3JvdW5kJTIwY29sb3JmdWx8ZW58MHx8fHwxNzY4NDEzMTQzfDA&ixlib=rb-4.1.0&q=80&w=1080"
+          alt="background"
+          fill
+          className="object-cover"
+        />
+      </div>
+
+      <Container className="relative z-10 max-w-xl">
+        <div className="flex flex-col items-center text-center mb-12">
+          <div className="relative w-32 h-32 mb-6 border-4 border-black rounded-full overflow-hidden shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
+            <Image
+              src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=400&h=400&fit=crop"
+              alt="Profile"
+              fill
+              className="object-cover"
+            />
+          </div>
+          <Heading className="text-white text-5xl md:text-6xl font-black uppercase tracking-tighter drop-shadow-[4px_4px_0px_rgba(0,0,0,1)]">
+            Alex Creates
+          </Heading>
+          <Subheading className="text-black bg-white px-4 py-1 mt-4 font-bold text-xl border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
+            Digital Creator & Artist
+          </Subheading>
+          <p className="mt-6 text-white font-medium text-lg max-w-md drop-shadow-md">
+            Building cool things on the internet. Sharing my journey through art, code, and content.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          {links.map((link, index) => (
+            <a
+              key={index}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block group"
+            >
+              <Card className={`p-4 flex items-center justify-between border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-none ${link.color}`}>
+                <div className="flex items-center gap-4">
+                  <div className="p-2 bg-white border-2 border-black rounded-lg">
+                    {link.icon}
+                  </div>
+                  <span className="font-black text-xl uppercase tracking-tight text-black">
+                    {link.title}
+                  </span>
+                </div>
+                <ArrowUpRight className="w-6 h-6 text-black" />
+              </Card>
+            </a>
+          ))}
+        </div>
+
+        <footer className="mt-16 text-center">
+          <p className="font-bold text-black uppercase tracking-widest text-sm">
+            © 2026 Alex Creates Studio
+          </p>
+        </footer>
+      </Container>
+    </main>
+  );
+}