Add Woiken SVG icon and wire it as site icon

This commit is contained in:
Niklas
2026-02-18 16:50:09 +01:00
parent c7caed0c36
commit 831a8e88f4
3 changed files with 56 additions and 35 deletions
+8 -10
View File
@@ -1,10 +1,9 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import {ThemeProvider} from "next-themes"; import { ThemeProvider } from "next-themes";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
}); });
@@ -14,8 +13,11 @@ const geistMono = Geist_Mono({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Woiken",
description: "Generated by create next app", description: "Woiken coming soon",
icons: {
icon: "/woiken-icon.svg",
},
}; };
export default function RootLayout({ export default function RootLayout({
@@ -25,12 +27,8 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body <body className={`${geistSans.className} ${geistMono.variable} antialiased`}>
className={`${geistSans.variable} ${geistMono.variable} antialiased`} <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
>
<ThemeProvider defaultTheme="dark">
{children}
</ThemeProvider>
</body> </body>
</html> </html>
); );
+27 -25
View File
@@ -1,29 +1,31 @@
"use client"; "use client";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import React from "react";
import { AuroraBackground } from "@/components/ui/aurora-background";
export default function AuroraBackgroundDemo() { export default function Home() {
return ( return (
<AuroraBackground> <div className="min-h-screen bg-[#0b0b08] text-white">
<motion.div <header className="mx-auto flex w-full max-w-6xl items-center justify-center px-6 py-6 md:px-10">
initial={{ opacity: 0.0, y: 40 }} <div className="text-lg font-semibold tracking-wide">Woiken</div>
whileInView={{ opacity: 1, y: 0 }} </header>
transition={{
delay: 0.3, <motion.main
duration: 0.8, initial={{ opacity: 0, y: 18 }}
ease: "easeInOut", animate={{ opacity: 1, y: 0 }}
}} transition={{ duration: 0.55, ease: "easeOut" }}
className="relative flex flex-col gap-4 items-center justify-center px-4" className="mx-auto flex min-h-[calc(100vh-84px)] w-full max-w-6xl flex-col items-center justify-center px-6 pb-20 text-center md:px-10"
> >
<div className="text-3xl md:text-7xl font-bold dark:text-white text-center"> <section className="max-w-3xl">
woiken.cloud <p className="mb-3 text-xs uppercase tracking-[0.25em] text-white/60">
</div> Coming soon
<div className="font-extralight text-base md:text-4xl dark:text-neutral-200 py-4"> </p>
Coming soon. <h1 className="text-4xl font-medium leading-tight tracking-tight md:text-6xl">
</div> A cloud platform who developers who want to ship. Ship fast and ship
</motion.div> clean.
</AuroraBackground> </h1>
); <p className="mt-6 text-lg text-white/75">Built for teams that move fast.</p>
} </section>
</motion.main>
</div>
);
}
+21
View File
@@ -0,0 +1,21 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
<title id="title">Woiken Icon</title>
<desc id="desc">A minimalist dark rounded-square icon with a cloud outline and stylized W center mark.</desc>
<defs>
<linearGradient id="bg" x1="64" y1="64" x2="448" y2="448" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#141412"/>
<stop offset="1" stop-color="#0A0A09"/>
</linearGradient>
<linearGradient id="accent" x1="152" y1="156" x2="360" y2="356" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" stop-color="#CFCFCB"/>
</linearGradient>
</defs>
<rect x="24" y="24" width="464" height="464" rx="112" fill="url(#bg)"/>
<path d="M161 318C131.7 318 108 294.3 108 265C108 240.5 124.7 219.8 147.3 213.7C152.8 170.8 189.4 138 234 138C266.6 138 295.2 155.3 311.2 181.3C316 180.1 321 179.5 326 179.5C361.6 179.5 390.5 208.4 390.5 244C390.5 279.6 361.6 308.5 326 308.5H161Z" stroke="url(#accent)" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M183 230L214 306L256 230L298 306L329 230" stroke="url(#accent)" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB