diff --git a/app/favicon.ico b/app/favicon.ico index 718d6fe..49b3ee0 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css index a2dc41e..6ae65da 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,27 @@ @import "tailwindcss"; +@import "tw-animate-css"; + :root { - --background: #ffffff; - --foreground: #171717; + --background: #0a0a0a; + --foreground: #151515; + --border: #373737; + --primary: #FFFFFF; + --secondary: #989898; + --highlight: #FF00FF; } @theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-border: var(--border); + --color-primary: var(--primary); + --color-secondary: var(--secondary); + --color-highlight: var(--highlight); } body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} + background-color: var(--background); + color: var(--primary); + font-family: monospace; +} \ No newline at end of file diff --git a/app/imprint/page.tsx b/app/imprint/page.tsx new file mode 100644 index 0000000..ccbdef6 --- /dev/null +++ b/app/imprint/page.tsx @@ -0,0 +1,46 @@ +import Link from 'next/link'; +import GradientText from '@/components/GradientText'; + +export default function Home() { + return ( +
+
+ +

Imprint

+ +
+
+ + + GSH Digital Services + + +

CEO Tim Herb

+
+ +
+

Horrenberger Straße 25

+

74909 Meckesheim

+

Germany

+
+ +
+ + info@gsh-services.com + +
+
+
+ + Go back + +
+
+ ); +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..b9b8de0 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,34 +1,20 @@ -import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; - -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); +import type { Metadata } from 'next'; +import './globals.css'; export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: 'GSH Digital Services' }; -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - {children} - - - ); -} +type Props = Readonly<{ + children: React.ReactNode; +}> + +export default function RootLayout({ children }: Props) { + return ( + + + {children} + + + ); +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 295f8fd..7abc052 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,65 +1,43 @@ -import Image from "next/image"; +import Image from 'next/image'; +import Link from 'next/link'; +import Logo from '@/public/logo.svg'; +import GradientText from '@/components/GradientText'; export default function Home() { - return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

+ return ( +
+
+ Company Logo + +
+ + Something great is being built here. + +

+ Can't wait? Contact us via + + info@gsh-services.com + +

+
+ + + Imprint + +
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
-
- ); -} + ); +} \ No newline at end of file diff --git a/components/GradientText.css b/components/GradientText.css new file mode 100644 index 0000000..3d4998e --- /dev/null +++ b/components/GradientText.css @@ -0,0 +1,65 @@ +.animated-gradient-text { + position: relative; + margin: 0; + display: flex; + max-width: fit-content; + flex-direction: row; + align-items: center; + justify-content: center; + backdrop-filter: blur(10px); + transition: box-shadow 0.5s ease-out; + overflow: hidden; +} + +.gradient-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-size: 300% 100%; + animation: gradient linear infinite; + border-radius: inherit; + z-index: 0; + pointer-events: none; +} + +.gradient-overlay::before { + content: ''; + position: absolute; + left: 0; + top: 0; + border-radius: inherit; + width: calc(100% - 2px); + height: calc(100% - 2px); + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background-color: #060010; + z-index: -1; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} + +.text-content { + display: inline-block; + position: relative; + z-index: 2; + background-size: 300% 100%; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + animation: gradient linear infinite; +} \ No newline at end of file diff --git a/components/GradientText.tsx b/components/GradientText.tsx new file mode 100644 index 0000000..e70b77a --- /dev/null +++ b/components/GradientText.tsx @@ -0,0 +1,32 @@ +import './GradientText.css'; +import React, { ReactNode } from 'react'; + +interface GradientTextProps { + children: ReactNode; + className?: string; + colors?: string[]; + animationSpeed?: number; + showBorder?: boolean; +} + +export default function GradientText({ + children, + className = '', + colors = ['#40ffaa', '#4079ff', '#40ffaa', '#4079ff', '#40ffaa'], + animationSpeed = 8, + showBorder = false +}: GradientTextProps) { + const gradientStyle = { + backgroundImage: `linear-gradient(to right, ${colors.join(', ')})`, + animationDuration: `${animationSpeed}s` + }; + + return ( +
+ {showBorder &&
} +
+ {children} +
+
+ ); +} diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 0000000..bd0c391 --- /dev/null +++ b/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/package-lock.json b/package-lock.json index 8ceda93..4fa4e00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,13 @@ "name": "gsh-temp-website", "version": "0.1.0", "dependencies": { + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.562.0", "next": "16.1.0", "react": "19.2.3", - "react-dom": "19.2.3" + "react-dom": "19.2.3", + "tailwind-merge": "^3.4.0" }, "devDependencies": { "@tailwindcss/postcss": "^4", @@ -20,6 +24,7 @@ "eslint": "^9", "eslint-config-next": "16.1.0", "tailwindcss": "^4", + "tw-animate-css": "^1.4.0", "typescript": "^5" } }, @@ -2570,12 +2575,33 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", "license": "MIT" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -4833,6 +4859,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.562.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz", + "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.21", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", @@ -6018,6 +6053,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwind-merge": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz", + "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "4.1.18", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz", @@ -6145,6 +6190,16 @@ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" }, + "node_modules/tw-animate-css": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz", + "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Wombosvideo" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 883d817..12d20e7 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,13 @@ "lint": "eslint" }, "dependencies": { + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.562.0", "next": "16.1.0", "react": "19.2.3", - "react-dom": "19.2.3" + "react-dom": "19.2.3", + "tailwind-merge": "^3.4.0" }, "devDependencies": { "@tailwindcss/postcss": "^4", @@ -21,6 +25,7 @@ "eslint": "^9", "eslint-config-next": "16.1.0", "tailwindcss": "^4", + "tw-animate-css": "^1.4.0", "typescript": "^5" } } diff --git a/public/file.svg b/public/file.svg deleted file mode 100644 index 004145c..0000000 --- a/public/file.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/globe.svg b/public/globe.svg deleted file mode 100644 index 567f17b..0000000 --- a/public/globe.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..4644716 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index 7705396..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/window.svg b/public/window.svg deleted file mode 100644 index b2b2a44..0000000 --- a/public/window.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file