Add Woiken SVG icon and wire it as site icon

2026-02-18 16:50:09 +01:00
parent c7caed0c36
commit 831a8e88f4
3 changed files with 56 additions and 35 deletions
@@ -1,10 +1,9 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import {ThemeProvider} from "next-themes";
+import { ThemeProvider } from "next-themes";

 const geistSans = Geist({
-  variable: "--font-geist-sans",
  subsets: ["latin"],
 });

@@ -14,8 +13,11 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Woiken",
+  description: "Woiken coming soon",
+  icons: {
+    icon: "/woiken-icon.svg",
+  },
 };

 export default function RootLayout({
@@ -25,12 +27,8 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-      <ThemeProvider defaultTheme="dark">
-        {children}
-      </ThemeProvider>
+      <body className={`${geistSans.className} ${geistMono.variable} antialiased`}>
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
      </body>
    </html>
  );
@@ -1,29 +1,31 @@
 "use client";

 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 (
-        <AuroraBackground>
-            <motion.div
-                initial={{ opacity: 0.0, y: 40 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{
-                    delay: 0.3,
-                    duration: 0.8,
-                    ease: "easeInOut",
-                }}
-                className="relative flex flex-col gap-4 items-center justify-center px-4"
+    <div className="min-h-screen bg-[#0b0b08] text-white">
+      <header className="mx-auto flex w-full max-w-6xl items-center justify-center px-6 py-6 md:px-10">
+        <div className="text-lg font-semibold tracking-wide">Woiken</div>
+      </header>
+
+      <motion.main
+        initial={{ opacity: 0, y: 18 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.55, ease: "easeOut" }}
+        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">
-                    woiken.cloud
+        <section className="max-w-3xl">
+          <p className="mb-3 text-xs uppercase tracking-[0.25em] text-white/60">
+            Coming soon
+          </p>
+          <h1 className="text-4xl font-medium leading-tight tracking-tight md:text-6xl">
+            A cloud platform who developers who want to ship. Ship fast and ship
+            clean.
+          </h1>
+          <p className="mt-6 text-lg text-white/75">Built for teams that move fast.</p>
+        </section>
+      </motion.main>
    </div>
-                <div className="font-extralight text-base md:text-4xl dark:text-neutral-200 py-4">
-                    Coming soon.
-                </div>
-            </motion.div>
-        </AuroraBackground>
  );
 }
@@ -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>