commit 258bdad06b402a8f6b1078dac3258f63b88ee64f Author: Berkan Date: Wed Apr 17 17:20:39 2024 +0300 Initialize project diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fd3dbb5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/README.md b/README.md new file mode 100644 index 0000000..c403366 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100755 index 0000000..c13b069 Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..bcf21eb --- /dev/null +++ b/app/globals.css @@ -0,0 +1,5 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + + diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..75fb648 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,24 @@ +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: "Netinternet - Kotasız, Taahhütsüz Fiber İnternet ve Sunucu Hizmetleri", + description: "Hosting, alan adı (domain) , kiralık sunucu, vds sunucu, yönetilen sunucu, sunucu barındırma, kabin kiralama ihtiyaçlarınız için size özel çözümler sunan hızlı ve kaliteli hizmet sunan,7/24 Müşterilerine profesyonel destek ve hizmet vermekteyiz.", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + {children} + + + ); +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..3344308 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,19 @@ +import Image from "next/image" +import { BackgroundGradientAnimation } from "@/components/ui/background-gradient-animation" +import { HoverBorderGradient } from "@/components/ui/hover-border-gradient" +import niLogo from "@/public/logo.svg" + +export default function Home() { + return ( + <> + +

Netinternet

+
+ + {""} + +
+ + + ); +} diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..f8ff5a2 Binary files /dev/null and b/bun.lockb differ diff --git a/components/ui/background-gradient-animation.tsx b/components/ui/background-gradient-animation.tsx new file mode 100644 index 0000000..106c10a --- /dev/null +++ b/components/ui/background-gradient-animation.tsx @@ -0,0 +1,182 @@ +"use client"; +import { useEffect, useRef, useState } from "react"; +import { cn } from "@/lib/utils/cn"; + +export const BackgroundGradientAnimation = ({ + gradientBackgroundStart = "rgb(108, 0, 162)", + gradientBackgroundEnd = "rgb(0, 17, 82)", + firstColor = "42, 169, 91", + secondColor = "5, 138, 218", + thirdColor = "174, 38, 60", + fourthColor = "255, 146, 5", + fifthColor = "234, 199, 58", + pointerColor = "5, 171, 204", + size = "80%", + blendingValue = "hard-light", + children, + className, + interactive = true, + containerClassName, +}: { + gradientBackgroundStart?: string; + gradientBackgroundEnd?: string; + firstColor?: string; + secondColor?: string; + thirdColor?: string; + fourthColor?: string; + fifthColor?: string; + pointerColor?: string; + size?: string; + blendingValue?: string; + children?: React.ReactNode; + className?: string; + interactive?: boolean; + containerClassName?: string; +}) => { + const interactiveRef = useRef(null); + + const [curX, setCurX] = useState(0); + const [curY, setCurY] = useState(0); + const [tgX, setTgX] = useState(0); + const [tgY, setTgY] = useState(0); + useEffect(() => { + document.body.style.setProperty( + "--gradient-background-start", + gradientBackgroundStart + ); + document.body.style.setProperty( + "--gradient-background-end", + gradientBackgroundEnd + ); + document.body.style.setProperty("--first-color", firstColor); + document.body.style.setProperty("--second-color", secondColor); + document.body.style.setProperty("--third-color", thirdColor); + document.body.style.setProperty("--fourth-color", fourthColor); + document.body.style.setProperty("--fifth-color", fifthColor); + document.body.style.setProperty("--pointer-color", pointerColor); + document.body.style.setProperty("--size", size); + document.body.style.setProperty("--blending-value", blendingValue); + }, [blendingValue, fifthColor, firstColor, fourthColor, gradientBackgroundEnd, gradientBackgroundStart, pointerColor, secondColor, size, thirdColor]); + + useEffect(() => { + function move() { + if (!interactiveRef.current) { + return; + } + setCurX(curX + (tgX - curX) / 20); + setCurY(curY + (tgY - curY) / 20); + interactiveRef.current.style.transform = `translate(${Math.round( + curX + )}px, ${Math.round(curY)}px)`; + } + + move(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [tgX, tgY]); + + const handleMouseMove = (event: React.MouseEvent) => { + if (interactiveRef.current) { + const rect = interactiveRef.current.getBoundingClientRect(); + setTgX(event.clientX - rect.left); + setTgY(event.clientY - rect.top); + } + }; + + const [isSafari, setIsSafari] = useState(false); + useEffect(() => { + setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)); + }, []); + + return ( +
+ + + + + + + + + +
{children}
+
+
+
+
+
+
+ + {interactive && ( +
+ )} +
+
+ ); +}; diff --git a/components/ui/hover-border-gradient.tsx b/components/ui/hover-border-gradient.tsx new file mode 100644 index 0000000..90bc92f --- /dev/null +++ b/components/ui/hover-border-gradient.tsx @@ -0,0 +1,99 @@ +"use client"; +import React, { useState, useEffect, useRef } from "react"; + +import { motion } from "framer-motion"; +import { cn } from "@/lib/utils/cn"; + +type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT"; + +export function HoverBorderGradient({ + children, + containerClassName, + className, + as: Tag = "button", + duration = 1, + clockwise = true, + ...props +}: React.PropsWithChildren< + { + as?: React.ElementType; + containerClassName?: string; + className?: string; + duration?: number; + clockwise?: boolean; + } & React.HTMLAttributes +>) { + const [hovered, setHovered] = useState(false); + const [direction, setDirection] = useState("TOP"); + + const rotateDirection = (currentDirection: Direction): Direction => { + const directions: Direction[] = ["TOP", "LEFT", "BOTTOM", "RIGHT"]; + const currentIndex = directions.indexOf(currentDirection); + const nextIndex = clockwise + ? (currentIndex - 1 + directions.length) % directions.length + : (currentIndex + 1) % directions.length; + return directions[nextIndex]; + }; + + const movingMap: Record = { + TOP: "radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", + LEFT: "radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", + BOTTOM: + "radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", + RIGHT: + "radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)", + }; + + const highlight = + "radial-gradient(75% 181.15942028985506% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 10%)"; + + useEffect(() => { + if (!hovered) { + const interval = setInterval(() => { + setDirection((prevState) => rotateDirection(prevState)); + }, duration * 1000); + return () => clearInterval(interval); + } + }, [hovered]); + return ( + ) => { + setHovered(true); + }} + onMouseLeave={() => setHovered(false)} + className={cn( + "relative flex rounded-full border content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit", + containerClassName + )} + {...props} + > +
+ {children} +
+ +
+ + ); +} diff --git a/index.ts b/index.ts new file mode 100644 index 0000000..f67b2c6 --- /dev/null +++ b/index.ts @@ -0,0 +1 @@ +console.log("Hello via Bun!"); \ No newline at end of file diff --git a/lib/utils/cn.ts b/lib/utils/cn.ts new file mode 100644 index 0000000..d83ac21 --- /dev/null +++ b/lib/utils/cn.ts @@ -0,0 +1,6 @@ +import { ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/next.config.mjs b/next.config.mjs new file mode 100644 index 0000000..4678774 --- /dev/null +++ b/next.config.mjs @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {}; + +export default nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 0000000..b7434b5 --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "ni-link", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@tabler/icons-react": "^3.2.0", + "clsx": "^2.1.0", + "framer-motion": "^11.1.3", + "next": "14.2.1", + "react": "^18", + "react-dom": "^18", + "tailwind-merge": "^2.2.2" + }, + "devDependencies": { + "typescript": "^5", + "@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" + }, + "module": "index.ts", + "type": "module" +} \ No newline at end of file diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..1a69fd2 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,8 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; + +export default config; diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..82b496b --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/next.svg b/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg new file mode 100644 index 0000000..d2f8422 --- /dev/null +++ b/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..e7d6347 --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,59 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + content: [ + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", + "./lib/**/*.{ts,tsx}", + ], + darkMode: "class", + theme: { + extend: { + animation: { + first: "moveVertical 30s ease infinite", + second: "moveInCircle 20s reverse infinite", + third: "moveInCircle 40s linear infinite", + fourth: "moveHorizontal 40s ease infinite", + fifth: "moveInCircle 20s ease infinite", + }, + keyframes: { + moveHorizontal: { + "0%": { + transform: "translateX(-50%) translateY(-10%)", + }, + "50%": { + transform: "translateX(50%) translateY(10%)", + }, + "100%": { + transform: "translateX(-50%) translateY(-10%)", + }, + }, + moveInCircle: { + "0%": { + transform: "rotate(0deg)", + }, + "50%": { + transform: "rotate(180deg)", + }, + "100%": { + transform: "rotate(360deg)", + }, + }, + moveVertical: { + "0%": { + transform: "translateY(-50%)", + }, + "50%": { + transform: "translateY(50%)", + }, + "100%": { + transform: "translateY(-50%)", + }, + }, + }, + }, + }, + plugins: [], +}; +export default config; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..bbb6a2e --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "baseUrl": ".", + "paths": { + "@/*": ["./*"] + }, + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + // "moduleResolution": "bundler", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}