Final
This commit is contained in:
Berkan
parent
8129a966b1
commit
8b40f4a5c0
|
|
@ -1,6 +1,5 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Maven_Pro } from "next/font/google";
|
||||
import { LampDemo } from "@/components/ui/lamp"
|
||||
|
||||
import "./globals.css";
|
||||
|
||||
|
|
@ -17,11 +16,9 @@ export default function RootLayout({
|
|||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={maven.className}>
|
||||
|
||||
{children}
|
||||
|
||||
<html lang="en" className="overflow-hidden">
|
||||
<body className={maven.className}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
115
app/page.tsx
115
app/page.tsx
|
|
@ -1,7 +1,6 @@
|
|||
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"
|
||||
|
|
@ -9,6 +8,7 @@ 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 { FaGithub } from "react-icons/fa";
|
||||
import { BsRouter } from "react-icons/bs";
|
||||
import { HiOutlineServerStack } from "react-icons/hi2";
|
||||
import { IoMdCloudOutline } from "react-icons/io";
|
||||
|
|
@ -16,67 +16,90 @@ 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">
|
||||
<>
|
||||
<BackgroundGradientAnimation>
|
||||
<div className="absolute z-50 inset-0 h-screen w-screen bg-black bg-opacity-50 overflow-hidden">
|
||||
<div className="flex justify-center text-center pt-12 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>
|
||||
<Link href={"https://netinternet.com.tr"} aria-label="Netinternet">
|
||||
<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 className="flex text-center p-12 md:p-8 justify-center justify-items-center">
|
||||
<Link href={"https://netinternet.com.tr"} aria-label="Netinternet">
|
||||
<Image
|
||||
src={netinternet}
|
||||
alt={""}
|
||||
priority={false}
|
||||
loading="lazy"
|
||||
width={240} />
|
||||
</Link>
|
||||
</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 className="items-center flex justify-center text-white pt-2 gap-x-6">
|
||||
<Link href={"https://www.facebook.com/netinternet"} aria-label="Facebook"><FaFacebook className="w-8 h-8" /></Link>
|
||||
<Link href={"https://twitter.com/netinternet"} aria-label="Twitter"><BsTwitterX className="w-8 h-8" /></Link>
|
||||
<Link href={"https://www.instagram.com/netinternet/"} aria-label="Instagram"><FaInstagram className="w-8 h-8" /></Link>
|
||||
<Link href={"https://www.linkedin.com/company/netinternet"} aria-label="LinkedIn"><FaLinkedin className="w-8 h-8" /></Link>
|
||||
<Link href={"https://github.com/netinternet"} aria-label="GitHub"><FaGithub className="w-8 h-8" /></Link>
|
||||
</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>
|
||||
<div className="flex flex-wrap w-full justify-center pt-12">
|
||||
<button className="inline-flex h-12 w-2/3 md:h-16 mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
|
||||
<BsRouter className="left-[5%] absolute w-6 h-6" />
|
||||
<Link href={"https://www.netinternet.com.tr/altyapi-sorgula"}>
|
||||
<h1>İnternet</h1>
|
||||
</Link>
|
||||
</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 className="inline-flex h-12 w-2/3 md:h-16 mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
|
||||
<BsHddNetwork className="left-[5%] absolute w-6 h-6" />
|
||||
<Link href={"https://www.netinternet.com.tr/sunucu-barindirma"}>
|
||||
Veri Merkezi
|
||||
</Link>
|
||||
</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 className="inline-flex h-12 w-2/3 md:h-16 mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
|
||||
<Link href={"https://www.netinternet.com.tr/waf-hizmeti"}>
|
||||
<div className="absolute w-6 h-6 left-[5%]">
|
||||
<Image src={waf} alt="" fill />
|
||||
</div>
|
||||
Heimwall
|
||||
</Link>
|
||||
</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 className="inline-flex h-12 w-2/3 md:h-16 mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
|
||||
<Link href={"https://www.ilkbyte.com"}>
|
||||
<IoMdCloudOutline className="left-[5%] absolute w-6 h-6" />
|
||||
İlkbyte
|
||||
</Link>
|
||||
</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 className="inline-flex h-12 w-2/3 md:h-16 mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
|
||||
<Link href={"https://www.netinternet.com.tr/hosting/cpanel"}>
|
||||
<CgServer className="left-[5%] absolute w-6 h-6" />
|
||||
Hosting
|
||||
</Link>
|
||||
</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 className="inline-flex h-12 w-2/3 md:h-16 mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
|
||||
<Link href={"https://www.netinternet.com.tr/domain"}>
|
||||
<TbWorldWww className="left-[5%] absolute w-6 h-6" />
|
||||
Alan Adı
|
||||
</Link>
|
||||
</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 className="inline-flex h-12 w-2/3 md:h-16 mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
|
||||
<Link href={"https://www.netinternet.com.tr/ssd-vds-sanal-sunucu"}>
|
||||
<HiOutlineServerStack className="left-[5%] absolute w-6 h-6" />
|
||||
SSD VDS Sunucu
|
||||
</Link>
|
||||
</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 className="inline-flex h-12 w-2/3 md:h-16 mb-4 items-center justify-center backdrop-blur-lg border border-black rounded-2xl hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.2)] hover:bg-white/[0.1] hover:bg-opacity-20 hover:backdrop-blur-lg focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 bg-black/[0.5] text-slate-300 transition duration-200">
|
||||
<Link href={"https://www.netinternet.com.tr/campaigns"}>
|
||||
<MdCampaign className="left-[5%] absolute w-6 h-6" />
|
||||
Kampanyalar
|
||||
</Link>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Deneme</p>ƒ
|
||||
</>
|
||||
</LampDemo>
|
||||
</div >
|
||||
</BackgroundGradientAnimation >
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export const BackgroundGradientAnimation = ({
|
|||
blendingValue = "hard-light",
|
||||
children,
|
||||
className,
|
||||
interactive = true,
|
||||
interactive = false,
|
||||
containerClassName,
|
||||
}: {
|
||||
gradientBackgroundStart?: string;
|
||||
|
|
|
|||
|
|
@ -1,104 +0,0 @@
|
|||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { cn } from "@/lib/utils/cn";
|
||||
|
||||
export function LampDemo() {
|
||||
return (
|
||||
<LampContainer>
|
||||
<motion.h1
|
||||
initial={{ opacity: 0.5, y: 100 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
delay: 0.3,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
|
||||
>
|
||||
Build lamps <br /> the right way
|
||||
</motion.h1>
|
||||
</LampContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export const LampContainer = ({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-slate-950 w-full rounded-md z-0",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0 ">
|
||||
<motion.div
|
||||
initial={{ opacity: 0.5, width: "15rem" }}
|
||||
whileInView={{ opacity: 1, width: "30rem" }}
|
||||
transition={{
|
||||
delay: 0.3,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
style={{
|
||||
backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
|
||||
}}
|
||||
className="absolute inset-auto right-1/2 h-56 overflow-visible w-[30rem] bg-gradient-conic from-cyan-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]"
|
||||
>
|
||||
<div className="absolute w-[100%] left-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
|
||||
<div className="absolute w-40 h-[100%] left-0 bg-slate-950 bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0.5, width: "15rem" }}
|
||||
whileInView={{ opacity: 1, width: "30rem" }}
|
||||
transition={{
|
||||
delay: 0.3,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
style={{
|
||||
backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
|
||||
}}
|
||||
className="absolute inset-auto left-1/2 h-56 w-[30rem] bg-gradient-conic from-transparent via-transparent to-cyan-500 text-white [--conic-position:from_290deg_at_center_top]"
|
||||
>
|
||||
<div className="absolute w-40 h-[100%] right-0 bg-slate-950 bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]" />
|
||||
<div className="absolute w-[100%] right-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
|
||||
</motion.div>
|
||||
<div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-slate-950 blur-2xl"></div>
|
||||
<div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"></div>
|
||||
<div className="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-cyan-500 opacity-50 blur-3xl"></div>
|
||||
<motion.div
|
||||
initial={{ width: "8rem" }}
|
||||
whileInView={{ width: "16rem" }}
|
||||
transition={{
|
||||
delay: 0.3,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-cyan-400 blur-2xl"
|
||||
></motion.div>
|
||||
<motion.div
|
||||
initial={{ width: "15rem" }}
|
||||
whileInView={{ width: "30rem" }}
|
||||
transition={{
|
||||
delay: 0.3,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-cyan-400 "
|
||||
></motion.div>
|
||||
|
||||
<div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-slate-950 "></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-50 flex -translate-y-80 flex-col items-center px-5">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@svgr/webpack": "^8.1.0",
|
||||
"@tabler/icons-react": "^3.2.0",
|
||||
"clsx": "^2.1.0",
|
||||
"framer-motion": "^11.1.3",
|
||||
|
|
|
|||
Loading…
Reference in New Issue