ni-link/app/page.tsx

import Image from "next/image"
import Link from "next/link"
import { BackgroundGradientAnimation } from "@/components/ui/background-gradient-animation"
import { HoverBorderGradient } from "@/components/ui/hover-border-gradient"
import niLogo from "@/public/logo.svg"
import netinternet from "@/public/netinternet.svg"
import waf from "@/public/heimwall-logo.svg"
import { FaFacebook } from "react-icons/fa";
import { BsTwitterX } from "react-icons/bs";
import { FaLinkedin } from "react-icons/fa";
import { FaInstagram } from "react-icons/fa";
import { BsRouter } from "react-icons/bs";
import { HiOutlineServerStack } from "react-icons/hi2";
import { IoMdCloudOutline } from "react-icons/io";
import { MdCampaign } from "react-icons/md";
import { TbWorldWww } from "react-icons/tb";
import { BsHddNetwork } from "react-icons/bs";
import { CgServer } from "react-icons/cg";
import { LampDemo } from "@/components/ui/lamp"

export default function Home() {
  return (
    <LampDemo>
      <>
        <div className="h-screen w-screen bg-slate-900 overflow-hidden">
          <div className="flex justify-center text-center pt-20 md:pt-8">
            <button className="inline-flex h-16 w-16 px-4 animate-shimmer items-center justify-center rounded-full border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
              <Link href={"https://netinternet.com.tr"}><Image src={niLogo} alt={""} width={48} height={48} /></Link>
            </button>
          </div>
          <div className="flex text-center p-8 justify-center justify-items-center">
            <Image src={netinternet} alt={""} width={240} height={64} />
          </div>
          <div className="items-center flex justify-center text-white gap-x-6">
            <FaFacebook className="w-8 h-8" />
            <BsTwitterX className="w-8 h-8" />
            <FaLinkedin className="w-8 h-8" />
            <FaInstagram className="w-8 h-8" />
          </div>
          <div className="flex flex-wrap w-full justify-center pt-16">
            <button className="inline-flex h-12 w-2/3 md:h-16 mb-4 animate-shimmer items-center justify-center rounded-2xl border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 hover:bg-white hover:text-red-500"><Link href={"https://netinternet.com.tr"}><></>Test</Link></button>
            <button className="inline-flex h-12 w-2/3 md:h-16 mb-4 animate-shimmer items-center justify-center rounded-2xl border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 hover:bg-white hover:text-red-500">
              <BsRouter className="left-[20%] absolute w-6 h-6" />
              <h1>İnternet</h1>
            </button>
            <button className="inline-flex h-12 w-2/3 md:h-16 mb-4 px-6 animate-shimmer items-center justify-center rounded-2xl border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
              <BsHddNetwork className="left-[20%] absolute w-6 h-6" />
              Veri Merkezi
            </button>
            <button className="inline-flex h-12 w-2/3 md:h-16 mb-4 px-6 animate-shimmer items-center justify-center rounded-2xl border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
              <div className="absolute w-6 h-6 left-[20%]">
                <Image src={waf} alt="" fill />
              </div>
              Heimwall
            </button>
            <button className="inline-flex h-12 w-2/3 md:h-16 mb-4 px-6 animate-shimmer items-center justify-center rounded-2xl border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
              <IoMdCloudOutline className="left-[20%] absolute w-6 h-6" />
              İlkbyte
            </button>
            <button className="inline-flex h-12 w-2/3 md:h-16 mb-4 px-6 animate-shimmer items-center justify-center rounded-2xl border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
              <CgServer className="left-[20%] absolute w-6 h-6" />
              Hosting
            </button>
            <button className="inline-flex h-12 w-2/3 md:h-16 mb-4 px-6 animate-shimmer items-center justify-center rounded-2xl border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
              <TbWorldWww className="left-[20%] absolute w-6 h-6" />
              Alan Adı
            </button>
            <button className="inline-flex h-12 w-2/3 md:h-16 mb-4 px-6 animate-shimmer items-center justify-center rounded-2xl border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
              <HiOutlineServerStack className="left-[20%] absolute w-6 h-6" />
              Sunucu
            </button>
            <button className="inline-flex h-12 w-2/3 md:h-16 mb-4 px-6 animate-shimmer items-center justify-center rounded-2xl border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
              <MdCampaign className="left-[20%] absolute w-6 h-6" />
              Kampanyalar
            </button>
          </div>
        </div>
        <p>Deneme</p>ƒ
      </>
    </LampDemo>
  );
}