page.tsx

"use client"

import { useState, useEffect } from "react"
import { Github, Linkedin, Mail, Twitter } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

export default function Page() {
  const [isLoading, setIsLoading] = useState(true)
  const [activeSection, setActiveSection] = useState("about")

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 2000)

    return () => clearTimeout(timer)
  }, [])

  const socialLinks = [
    { icon: Github, href: "#", label: "GitHub" },
    { icon: Twitter, href: "#", label: "Twitter" },
    { icon: Linkedin, href: "#", label: "LinkedIn" },
    { icon: Mail, href: "#", label: "Email" },
  ]

  const navItems = ["about", "projects", "contact"]

  if (isLoading) {
    return (
      <main className="min-h-screen w-full bg-[#171923] flex items-center justify-center">
        <div className="animate-fade-in">
          <svg
            width="80"
            height="80"
            viewBox="0 0 80 80"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="transform hover:scale-110 transition-transform duration-300"
          >
            <path d="M40 0L73.1 19.2V57.6L40 76.8L6.9 57.6V19.2L40 0Z" fill="#0072F5" />
            <path
              d="M32 48V32H36.8C38.4 32 39.7333 32.4 40.8 33.2C41.8667 34 42.4 35.0667 42.4 36.4C42.4 37.7333 41.8667 38.8 40.8 39.6C39.7333 40.4 38.4 40.8 36.8 40.8H34.4V48H32ZM34.4 38.8H36.8C37.7333 38.8 38.4667 38.5667 39 38.1C39.5333 37.6333 39.8 37.0667 39.8 36.4C39.8 35.7333 39.5333 35.1667 39 34.7C38.4667 34.2333 37.7333 34 36.8 34H34.4V38.8Z"
              fill="white"
            />
            <path d="M44 48V32H46.4V48H44Z" fill="white" />
          </svg>
        </div>
      </main>
    )
  }

  return (
    <main className="min-h-screen w-full bg-gradient-to-b from-[#171923] to-[#0F1117]">
      <div className="container mx-auto px-4 py-16 animate-fade-in">
        <div className="max-w-4xl mx-auto space-y-12">
          {/* Profile Section */}
          <div className="text-center space-y-6">
            <h1 className="text-4xl font-bold text-white">Full Stack Developer</h1>
            <p className="text-lg text-gray-400">Building digital products, brands, and experiences</p>
            <div className="flex justify-center gap-4">
              {socialLinks.map((social) => (
                <a
                  key={social.label}
                  href={social.href}
                  className="text-gray-400 hover:text-[#0072F5] transition-colors"
                  aria-label={social.label}
                >
                  <social.icon className="w-6 h-6" />
                </a>
              ))}
            </div>
          </div>

          {/* Navigation */}
          <nav className="flex justify-center gap-8">
            {navItems.map((item) => (
              <Button
                key={item}
                variant="ghost"
                className={cn(
                  "text-lg capitalize",
                  activeSection === item ? "text-[#0072F5]" : "text-gray-400 hover:text-[#0072F5]",
                )}
                onClick={() => setActiveSection(item)}
              >
                {item}
              </Button>
            ))}
          </nav>

          {/* Content Section */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {[1, 2, 3, 4].map((i) => (
              <div
                key={i}
                className="group relative overflow-hidden rounded-lg bg-[#1A1B23] p-6 hover:bg-[#22242D] transition-colors"
              >
                <div className="space-y-4">
                  <h3 className="text-xl font-semibold text-white">Project Title {i}</h3>
                  <p className="text-gray-400">A brief description of the project and its key features.</p>
                  <div className="flex gap-2">
                    {["React", "Next.js", "TypeScript"].map((tech) => (
                      <span key={tech} className="px-3 py-1 text-sm rounded-full bg-[#252731] text-gray-400">
                        {tech}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </main>
  )
}