today
This commit is contained in:
Berkan
parent
258bdad06b
commit
8129a966b1
|
|
@ -1,8 +1,10 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Maven_Pro } from "next/font/google";
|
||||
import { LampDemo } from "@/components/ui/lamp"
|
||||
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
const maven = Maven_Pro({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Netinternet - Kotasız, Taahhütsüz Fiber İnternet ve Sunucu Hizmetleri",
|
||||
|
|
@ -16,8 +18,10 @@ export default function RootLayout({
|
|||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
{children}
|
||||
<body className={maven.className}>
|
||||
|
||||
{children}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
81
app/page.tsx
81
app/page.tsx
|
|
@ -1,19 +1,82 @@
|
|||
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 (
|
||||
<>
|
||||
<BackgroundGradientAnimation className="h-screen w-screen absolute overflow-hidden bg-black bg-opacity-50 z-20">
|
||||
<h1 className="text-indigo-500 font-light text-2xl flex text-center p-8 justify-center">Netinternet</h1>
|
||||
<div className="flex justify-items-center justify-center text-center">
|
||||
<HoverBorderGradient className="w-20 h-20 flex justify-center text-center bg-gradient-to-b from-[#957ba3] to-[#724582] bg-opacity-10">
|
||||
<Image src={niLogo} alt={""} width={32} height={32} />
|
||||
</HoverBorderGradient>
|
||||
<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>
|
||||
</BackgroundGradientAnimation>
|
||||
</>
|
||||
<p>Deneme</p>ƒ
|
||||
</>
|
||||
</LampDemo>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
"use client";
|
||||
import { cn } from "@/lib/utils/cn";
|
||||
import React, { ReactNode } from "react";
|
||||
|
||||
interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
|
||||
children: ReactNode;
|
||||
showRadialGradient?: boolean;
|
||||
}
|
||||
|
||||
export const AuroraBackground = ({
|
||||
className,
|
||||
children,
|
||||
showRadialGradient = true,
|
||||
...props
|
||||
}: AuroraBackgroundProps) => {
|
||||
return (
|
||||
<main>
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex flex-col h-[100vh] items-center justify-center bg-zinc-50 dark:bg-zinc-900 text-slate-950 transition-bg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div
|
||||
// I'm sorry but this is what peak developer performance looks like // trigger warning
|
||||
className={cn(
|
||||
`
|
||||
[--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)]
|
||||
[--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)]
|
||||
[--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)]
|
||||
[background-image:var(--white-gradient),var(--aurora)]
|
||||
dark:[background-image:var(--dark-gradient),var(--aurora)]
|
||||
[background-size:300%,_200%]
|
||||
[background-position:50%_50%,50%_50%]
|
||||
filter blur-[10px] invert dark:invert-0
|
||||
after:content-[""] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)]
|
||||
after:dark:[background-image:var(--dark-gradient),var(--aurora)]
|
||||
after:[background-size:200%,_100%]
|
||||
after:animate-aurora after:[background-attachment:fixed] after:mix-blend-difference
|
||||
absolute -inset-[10px] opacity-50 will-change-transform`,
|
||||
|
||||
showRadialGradient &&
|
||||
`[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`
|
||||
)}
|
||||
></div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
"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>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
"use client";
|
||||
import React from "react";
|
||||
import { IconClipboard } from "@tabler/icons-react";
|
||||
import { cn } from "@/lib/utils/cn";
|
||||
|
||||
export const ButtonsCard = ({
|
||||
children,
|
||||
className,
|
||||
onClick,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"h-60 w-full bg-white rounded-xl border border-neutral-100 dark:bg-black dark:border-white/[0.2] hover:border-neutral-200 group/btn overflow-hidden relative flex items-center justify-center",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="absolute inset-0 dark:bg-dot-white/[0.1] bg-dot-black/[0.1]" />
|
||||
<IconClipboard className="absolute top-2 right-2 text-neutral-300 group-hover/btn:block hidden h-4 w-4 transition duration-200" />
|
||||
<div className="relative z-40">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
|
|
@ -15,19 +15,21 @@
|
|||
"next": "14.2.1",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-element-to-jsx-string": "^15.0.0",
|
||||
"react-icons": "^5.1.0",
|
||||
"tailwind-merge": "^2.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@types/bun": "latest",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.1",
|
||||
"@types/bun": "latest"
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5"
|
||||
},
|
||||
"module": "index.ts",
|
||||
"type": "module"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="-498.5968 -26.509 285.7844 345.867" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Layer" class="shp0" d="M202.7 8.2C196.3 17.9 193.6 23 192.2 28.4C191.1 32.2 191.2 32.4 195.7 37.4C210.2 53.5 215.5 67.5 215.4 89.5C215.4 101.2 215.1 103.2 212.6 110C206.4 126.7 199.4 136.6 189.5 142.8L185.3 145.5L199 183.5C206.6 204.4 213.2 221.4 213.8 221.3C214.4 221.1 230.7 208.8 250 193.8L285.2 166.5L284.7 149.5C283.9 123.7 279.4 103.1 268.8 76.3C259.8 53.6 252.3 41.7 236.5 25.1C229.2 17.5 209.8 0 208.6 0C208.4 0 205.7 3.7 202.7 8.2Z" style="fill: rgb(203, 213, 225);" transform="matrix(1, 0, 0, 1, -498.3124084472656, -26.508956909179688)"/>
|
||||
<path id="Layer" class="shp0" d="M62.5 11.9C38.2 33.7 27 49.5 16.1 76.7C5.3 103.9 0.1 129.2 0 154.7L0 166.8L35.6 194.5C55.1 209.8 71.5 221.9 72 221.4C72.4 220.9 78.7 204.1 86 184C93.3 163.9 99.4 147.2 99.6 146.8C99.9 146.4 97.5 144.5 94.5 142.5C87.3 137.7 82.7 132.2 78 123C71 108.9 69.5 103 69.6 89C69.6 75.7 71.7 65.5 76.1 56.7C78.7 51.6 86.3 40.8 90.8 35.8L94.1 32.2L92.1 26.6C89 17.8 78.2 1 75.7 1C75.1 1.1 69.1 5.9 62.5 11.9Z" style="fill: rgb(203, 213, 225);" transform="matrix(1, 0, 0, 1, -498.3124084472656, -26.508956909179688)"/>
|
||||
<path id="Layer" class="shp0" d="M122 140.5C118.4 141.3 112.4 142.7 108.6 143.7L101.7 145.5L88.5 184.7C79.8 210.3 75.6 224 76.4 224.3C77 224.6 80.8 224.4 84.9 224.1C100.9 222.6 112.3 226.4 123.1 236.7L128.9 242.2L142.5 242.2L156.1 242.2L161.9 236.7C172.7 226.4 184.1 222.6 200.1 224.1C204.2 224.4 208 224.6 208.6 224.3C209.4 224 205.2 210.3 196.5 184.7L183.3 145.5L172.4 142.6C163 140.2 159.3 139.7 145 139.4C133.4 139.2 126.6 139.5 122 140.5Z" style="fill: rgb(203, 213, 225);" transform="matrix(1, 0, 0, 1, -498.3124084472656, -26.508956909179688)"/>
|
||||
<path id="Layer" class="shp0" d="M0 182.5C-1.1 183.8 0.6 186 12.1 197.8C25.3 211.3 34.7 223.4 41.5 235.7L45 241.8L39 249.9C35.6 254.5 33.3 258.6 33.6 259.4C34.5 261.6 37.9 262 47.1 261C75 257.8 79.5 261.4 83 289.5C84.6 302.7 87.2 306.9 107.4 328.1C123.3 344.8 127.1 347.9 128.2 344.8C129.7 340.9 126.4 324.6 114.9 279.6L108.6 254.8L81 233.2C65.9 221.3 45 205 34.6 196.8L15.7 182L10 182C6.8 182 3.5 181.8 2.7 181.5C2 181.2 0.7 181.6 0 182.5Z" style="fill: rgb(203, 213, 225);" transform="matrix(1, 0, 0, 1, -498.3124084472656, -26.508956909179688)"/>
|
||||
<path id="Layer" class="shp0" d="M269.5 182C268.4 182.4 247.1 198.9 222.1 218.4L176.7 254L169.9 280.8C160.2 318.6 158 328.4 157.3 337.2C156.7 344.8 156.8 345 159 345C160.6 345 164.8 341.3 173.5 332.3C199.1 305.5 200.1 303.9 202.5 286.4C205 267.9 209.1 261.2 218.8 259.4C220.7 259 227.7 259.3 234.6 260C244 261 247.6 261.1 249.5 260.2C250.9 259.6 252 258.6 252 258C252 257.4 249.5 253.6 246.4 249.5C242.1 243.8 240.9 241.5 241.4 239.7C242.1 236.6 252.2 220.7 257.6 214C260.1 211 267.4 202.9 273.8 196.1C280.2 189.3 285.5 183.3 285.5 182.6C285.5 181.2 272.4 180.7 269.5 182Z" style="fill: rgb(203, 213, 225);" transform="matrix(1, 0, 0, 1, -498.3124084472656, -26.508956909179688)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -1,5 +1,9 @@
|
|||
import type { Config } from "tailwindcss";
|
||||
|
||||
const {
|
||||
default: flattenColorPalette,
|
||||
} = require("tailwindcss/lib/util/flattenColorPalette");
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
|
|
@ -16,8 +20,26 @@ const config: Config = {
|
|||
third: "moveInCircle 40s linear infinite",
|
||||
fourth: "moveHorizontal 40s ease infinite",
|
||||
fifth: "moveInCircle 20s ease infinite",
|
||||
shimmer: "shimmer 2s linear infinite",
|
||||
aurora: "aurora 60s linear infinite",
|
||||
},
|
||||
keyframes: {
|
||||
aurora: {
|
||||
from: {
|
||||
backgroundPosition: "50% 50%, 50% 50%",
|
||||
},
|
||||
to: {
|
||||
backgroundPosition: "350% 50%, 350% 50%",
|
||||
},
|
||||
},
|
||||
shimmer: {
|
||||
from: {
|
||||
backgroundPosition: "0 0",
|
||||
},
|
||||
to: {
|
||||
backgroundPosition: "-200% 0",
|
||||
},
|
||||
},
|
||||
moveHorizontal: {
|
||||
"0%": {
|
||||
transform: "translateX(-50%) translateY(-10%)",
|
||||
|
|
@ -54,6 +76,17 @@ const config: Config = {
|
|||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [addVariablesForColors],
|
||||
};
|
||||
export default config;
|
||||
|
||||
function addVariablesForColors({ addBase, theme }: any) {
|
||||
let allColors = flattenColorPalette(theme("colors"));
|
||||
let newVars = Object.fromEntries(
|
||||
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
|
||||
);
|
||||
|
||||
addBase({
|
||||
":root": newVars,
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue