feat: implement dark theme with white logo and updated text effects

- Added white logo variant and updated header to use dark theme styling - Split text hover effect component into two variants (cursor-following and auto-animated) - Updated button and dropdown components to support transparent backgrounds and white text styling
2025-11-12 17:59:54 +01:00
parent 954d51dcaa
commit f015a0d892
16 changed files with 696 additions and 138 deletions
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -18,7 +18,7 @@ const variantStyles = {
  },
  outline: {
    cyan: 'border-cyan-500 text-cyan-500',
-    gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',
+    gray: 'border-gray-300 text-white hover:text-cyan-500 hover:border-cyan-500 active:border-cyan-500',
    white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
  },
 }
--- a/src/components/HeaderDark.tsx
+++ b/src/components/HeaderDark.tsx
@@ -4,7 +4,7 @@ import { Dropdown } from './ui/Dropdown'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Container } from './Container'
 import { Button } from './Button'
-import pmyceliumLogo from '../images/logos/logo_1.png'
+import pmyceliumLogo from '../images/logos/logowhite.png'
 import { Dialog } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'

@@ -29,7 +29,7 @@ export function HeaderDark() {

  return (
    <header className="bg-[#111111]">
-      <nav className="border-b border-gray-800">
+      <nav className="">
        <Container className="flex bg-transparent justify-between py-4">
          <div className="relative z-10 flex items-center gap-16">
            <Link to="/" aria-label="Home">
@@ -37,12 +37,13 @@ export function HeaderDark() {
            </Link>
            <div className="hidden lg:flex lg:gap-10">
              <Dropdown
+                buttonClassName="bg-transparent"
                buttonContent={
                  <>
                    {['Compute', 'Storage', 'GPU'].includes(getCurrentPageName()) ? (
                      <>
-                        <span className="text-gray-400">Cloud {' >'} </span>
-                        <span className="text-white">{getCurrentPageName()}</span>
+                        <span className="text-white bg-[#111111]">Cloud {' >'} </span>
+                        <span className="text-white bg-[#111111]">{getCurrentPageName()}</span>
                      </>
                    ) : (
                      <span className="text-white">Cloud</span>
--- a/src/components/HomeHeadline.tsx
+++ b/src/components/HomeHeadline.tsx
@@ -1,9 +1,9 @@
-import { TextHoverEffect } from "@/components/ui/text-hover-effect";
+import { TextHoverEffects } from "@/components/ui/text-hover-effects";
 
 export function HomeHeadline() {
  return (
    <div className="flex items-center justify-center  h-auto max-h-[200px]">
-      <TextHoverEffect text="MYCELIUM" />
+      <TextHoverEffects text="MYCELIUM" />
    </div>
  );
 }
--- a/src/components/HomeHeadlineDark.tsx
+++ b/src/components/HomeHeadlineDark.tsx
@@ -0,0 +1,9 @@
+import { TextHoverEffect } from "@/components/ui/text-hover-effect";
+ 
+export function HomeHeadlineDark() {
+  return (
+    <div className="flex items-center justify-center  h-auto max-h-[200px]">
+      <TextHoverEffect text="MYCELIUM" />
+    </div>
+  );
+}
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,13 +1,13 @@
 import { Outlet } from 'react-router-dom'
 import { Footer } from './Footer'
-import { Header } from './Header'
+import { HeaderDark } from './HeaderDark'

 export function Layout() {

  return (
    <div className="bg-[#fdfdfd] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>
      <div className="relative z-10">
-        <Header />
+        <HeaderDark />
        <main>
          <Outlet />
        </main>
--- a/src/components/ui/Dropdown.tsx
+++ b/src/components/ui/Dropdown.tsx
@@ -10,13 +10,14 @@ interface DropdownItem {
 interface DropdownProps {
  buttonContent: React.ReactNode
  items: DropdownItem[]
+  buttonClassName?: string
 }

-export function Dropdown({ buttonContent, items }: DropdownProps) {
+export function Dropdown({ buttonContent, items, buttonClassName }: DropdownProps) {
  return (
    <Menu as="div" className="relative inline-block text-left">
      <div>
-        <Menu.Button className="inline-flex w-full justify-center items-center gap-x-1.5 rounded-md bg-white text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors">
+        <Menu.Button className={`inline-flex w-full justify-center items-center gap-x-1.5 rounded-md text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors ${buttonClassName}`}>
          {buttonContent}
        </Menu.Button>
      </div>
--- a/src/components/ui/text-hover-effect.tsx
+++ b/src/components/ui/text-hover-effect.tsx
@@ -1,35 +1,31 @@
 "use client";
-import { useRef, useEffect, useState } from "react";
-import { motion, useAnimation } from "motion/react";
+import React, { useRef, useEffect, useState } from "react";
+import { motion } from "motion/react";

 export const TextHoverEffect = ({
  text,
-  duration = 6, // loop duration
+  duration,
 }: {
  text: string;
  duration?: number;
+  automatic?: boolean;
 }) => {
  const svgRef = useRef<SVGSVGElement>(null);
-  const controls = useAnimation();
-    const [hovered, setHovered] = useState(false);
+  const [cursor, setCursor] = useState({ x: 0, y: 0 });
+  const [hovered, setHovered] = useState(false);
+  const [maskPosition, setMaskPosition] = useState({ cx: "50%", cy: "50%" });

-  // ✅ Animate mask looping automatically
  useEffect(() => {
-    const loop = async () => {
-      while (true) {
-        await controls.start({
-          cx: ["20%", "80%", "50%"],
-          cy: ["20%", "80%", "50%"],
-          transition: {
-            duration,
-            ease: "easeInOut",
-            repeat: 0,
-          },
-        });
-      }
-    };
-    loop();
-  }, [controls, duration]);
+    if (svgRef.current && cursor.x !== null && cursor.y !== null) {
+      const svgRect = svgRef.current.getBoundingClientRect();
+      const cxPercentage = ((cursor.x - svgRect.left) / svgRect.width) * 100;
+      const cyPercentage = ((cursor.y - svgRect.top) / svgRect.height) * 100;
+      setMaskPosition({
+        cx: `${cxPercentage}%`,
+        cy: `${cyPercentage}%`,
+      });
+    }
+  }, [cursor]);

  return (
    <svg
@@ -40,97 +36,96 @@ export const TextHoverEffect = ({
      xmlns="http://www.w3.org/2000/svg"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
-            className="select-none"
+      onMouseMove={(e) => setCursor({ x: e.clientX, y: e.clientY })}
+      className="select-none"
    >
      <defs>
-        {/* ✅ Softer cyan gradient */}
-        <linearGradient id="textGradient" gradientUnits="userSpaceOnUse">
-          {hovered ? (
+        <linearGradient
+          id="textGradient"
+          gradientUnits="userSpaceOnUse"
+          cx="50%"
+          cy="50%"
+          r="25%"
+        >
+          {hovered && (
            <>
-              <stop offset="0%" stopColor="#7df3ff" />
-              <stop offset="40%" stopColor="#4adffa" />
-              <stop offset="70%" stopColor="#18c5e8" />
-              <stop offset="100%" stopColor="#0aaecb" />
-            </>
-          ) : (
-            <>
-              <stop offset="0%" stopColor="#7df3ff33" />
-              <stop offset="100%" stopColor="#0aaecb33" />
+              <stop offset="0%" stopColor="#eab308" />
+              <stop offset="25%" stopColor="#ef4444" />
+              <stop offset="50%" stopColor="#3b82f6" />
+              <stop offset="75%" stopColor="#06b6d4" />
+              <stop offset="100%" stopColor="#8b5cf6" />
            </>
          )}
        </linearGradient>

-        {/* ✅ Mask with autoplay motion */}
        <motion.radialGradient
          id="revealMask"
          gradientUnits="userSpaceOnUse"
-          r="45%"
-          animate={controls}
+          r="20%"
          initial={{ cx: "50%", cy: "50%" }}
+          animate={maskPosition}
+          transition={{ duration: duration ?? 0, ease: "easeOut" }}
+
+          // example for a smoother animation below
+
+          //   transition={{
+          //     type: "spring",
+          //     stiffness: 300,
+          //     damping: 50,
+          //   }}
        >
          <stop offset="0%" stopColor="white" />
          <stop offset="100%" stopColor="black" />
        </motion.radialGradient>
-
-        {/* ✅ Glow */}
-        <filter id="glow">
-          <feGaussianBlur stdDeviation="3.2" result="blur" />
-          <feMerge>
-            <feMergeNode in="blur" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-
        <mask id="textMask">
-          <rect x="0" y="0" width="100%" height="100%" fill="url(#revealMask)" />
+          <rect
+            x="0"
+            y="0"
+            width="100%"
+            height="100%"
+            fill="url(#revealMask)"
+          />
        </mask>
      </defs>
-
-      {/* ✅ Background faint stroke */}
      <text
        x="50%"
        y="50%"
        textAnchor="middle"
        dominantBaseline="middle"
-        strokeWidth="0.15"
-        className="fill-transparent stroke-neutral-300 dark:stroke-neutral-800 font-[helvetica] text-7xl font-bold"
-        style={{ opacity: hovered ? 0.25 : 0.1 }}
+        strokeWidth="0.3"
+        className="fill-transparent stroke-neutral-200 font-[helvetica] text-7xl font-bold dark:stroke-neutral-800"
+        style={{ opacity: hovered ? 0.7 : 0 }}
      >
        {text}
      </text>
-
-      {/* ✅ Line drawing animation always plays too */}
      <motion.text
        x="50%"
        y="50%"
        textAnchor="middle"
        dominantBaseline="middle"
-        strokeWidth="0.25"
-        className="fill-transparent stroke-cyan-300 font-[helvetica] text-7xl font-bold"
-        initial={{ strokeDashoffset: 600, strokeDasharray: 600 }}
+        strokeWidth="0.3"
+        className="fill-transparent stroke-neutral-200 font-[helvetica] text-7xl font-bold dark:stroke-neutral-800"
+        initial={{ strokeDashoffset: 1000, strokeDasharray: 1000 }}
        animate={{
          strokeDashoffset: 0,
-          strokeDasharray: 600,
+          strokeDasharray: 1000,
        }}
        transition={{
-          duration: 2.2,
+          duration: 4,
          ease: "easeInOut",
        }}
      >
        {text}
      </motion.text>
-
-      {/* ✅ Final filled glowing cyan text (mask reveals it) */}
      <text
        x="50%"
        y="50%"
        textAnchor="middle"
        dominantBaseline="middle"
        stroke="url(#textGradient)"
-        strokeWidth="1.1"
+        strokeWidth="0.3"
        mask="url(#textMask)"
-        filter="url(#glow)"
-        className="font-[helvetica] text-7xl font-bold fill-[url(#textGradient)]"
+        className="fill-transparent font-[helvetica] text-7xl font-bold"
      >
        {text}
      </text>
--- a/src/components/ui/text-hover-effects.tsx
+++ b/src/components/ui/text-hover-effects.tsx
@@ -0,0 +1,139 @@
+"use client";
+import { useRef, useEffect, useState } from "react";
+import { motion, useAnimation } from "motion/react";
+
+export const TextHoverEffects = ({
+  text,
+  duration = 6, // loop duration
+}: {
+  text: string;
+  duration?: number;
+}) => {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const controls = useAnimation();
+    const [hovered, setHovered] = useState(false);
+
+  // ✅ Animate mask looping automatically
+  useEffect(() => {
+    const loop = async () => {
+      while (true) {
+        await controls.start({
+          cx: ["20%", "80%", "50%"],
+          cy: ["20%", "80%", "50%"],
+          transition: {
+            duration,
+            ease: "easeInOut",
+            repeat: 0,
+          },
+        });
+      }
+    };
+    loop();
+  }, [controls, duration]);
+
+  return (
+    <svg
+      ref={svgRef}
+      width="100%"
+      height="100%"
+      viewBox="0 0 300 100"
+      xmlns="http://www.w3.org/2000/svg"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+            className="select-none"
+    >
+      <defs>
+        {/* ✅ Softer cyan gradient */}
+        <linearGradient id="textGradient" gradientUnits="userSpaceOnUse">
+          {hovered ? (
+            <>
+              <stop offset="0%" stopColor="#7df3ff" />
+              <stop offset="40%" stopColor="#4adffa" />
+              <stop offset="70%" stopColor="#18c5e8" />
+              <stop offset="100%" stopColor="#0aaecb" />
+            </>
+          ) : (
+            <>
+              <stop offset="0%" stopColor="#7df3ff33" />
+              <stop offset="100%" stopColor="#0aaecb33" />
+            </>
+          )}
+        </linearGradient>
+
+        {/* ✅ Mask with autoplay motion */}
+        <motion.radialGradient
+          id="revealMask"
+          gradientUnits="userSpaceOnUse"
+          r="45%"
+          animate={controls}
+          initial={{ cx: "50%", cy: "50%" }}
+        >
+          <stop offset="0%" stopColor="white" />
+          <stop offset="100%" stopColor="black" />
+        </motion.radialGradient>
+
+        {/* ✅ Glow */}
+        <filter id="glow">
+          <feGaussianBlur stdDeviation="3.2" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+
+        <mask id="textMask">
+          <rect x="0" y="0" width="100%" height="100%" fill="url(#revealMask)" />
+        </mask>
+      </defs>
+
+      {/* ✅ Background faint stroke */}
+      <text
+        x="50%"
+        y="50%"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        strokeWidth="0.15"
+        className="fill-transparent stroke-neutral-300 dark:stroke-neutral-800 font-[helvetica] text-7xl font-bold"
+        style={{ opacity: hovered ? 0.25 : 0.1 }}
+      >
+        {text}
+      </text>
+
+      {/* ✅ Line drawing animation always plays too */}
+      <motion.text
+        x="50%"
+        y="50%"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        strokeWidth="0.25"
+        className="fill-transparent stroke-cyan-300 font-[helvetica] text-7xl font-bold"
+        initial={{ strokeDashoffset: 600, strokeDasharray: 600 }}
+        animate={{
+          strokeDashoffset: 0,
+          strokeDasharray: 600,
+        }}
+        transition={{
+          duration: 2.2,
+          ease: "easeInOut",
+        }}
+      >
+        {text}
+      </motion.text>
+
+      {/* ✅ Final filled glowing cyan text (mask reveals it) */}
+      <text
+        x="50%"
+        y="50%"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        stroke="url(#textGradient)"
+        strokeWidth="1.1"
+        mask="url(#textMask)"
+        filter="url(#glow)"
+        className="font-[helvetica] text-7xl font-bold fill-[url(#textGradient)]"
+      >
+        {text}
+      </text>
+    </svg>
+  );
+};