102 lines
3.8 KiB
TypeScript
102 lines
3.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|