From 7e2b30fbccaa194595ef899375724e1a96186ea3 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 8 Sep 2025 17:18:54 +0200
Subject: [PATCH] add

---
 src/components/Banner.tsx    | 28 ++++++++++++++++++++++++++++
 src/components/Dashboard.tsx |  2 +-
 src/components/Layout.tsx    |  2 ++
 src/components/Spotlight.tsx |  8 ++++----
 src/styles/tailwind.css      | 28 ++++++++++++++++++++++++++++
 5 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Banner.tsx

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
new file mode 100644
index 0000000..8dfc69f
--- /dev/null
+++ b/src/components/Banner.tsx
@@ -0,0 +1,28 @@
+import { XMarkIcon } from '@heroicons/react/20/solid'
+
+export function Banner() {
+  return (
+    <div className="relative flex items-center gap-x-6 bg-gray-200 px-6 py-2.5 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10 sm:px-3.5 sm:before:flex-1">
+      <p className="text-sm/6 text-white">
+        <strong className="font-semibold">ThreeFold is going commercial!</strong>
+        <svg viewBox="0 0 2 2" aria-hidden="true" className="mx-2 inline size-0.5 fill-current">
+          <circle r={1} cx={1} cy={1} />
+        </svg>
+        Read our <a
+          href="https://www.threefold.io/newsroom/summer-2025-roundup/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline hover:text-white hover:font-semibold"
+        >
+          2025 Summer Round Up →
+        </a>
+      </p>
+      <div className="flex flex-1 justify-end">
+        <button type="button" className="-m-3 p-3 focus-visible:-outline-offset-4">
+          <span className="sr-only">Dismiss</span>
+          <XMarkIcon aria-hidden="true" className="size-5 text-white" />
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 42ea41c..ba3238d 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -98,7 +98,7 @@ function StatCard({
         e.currentTarget.style.filter = 'brightness(1)';
       }}
     >
-      <h3 className="text-lg font-semibold text-gradient-neutral-vertical">{label}</h3>
+      <h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.3), 0 0 24px rgba(255, 255, 255, 0.1)' }}>{label}</h3>
       <p className="mt-2 text-sm font-light text-pretty text-white lg:text-base">
         {description}
       </p>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index d2756bb..a567811 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,10 +1,12 @@
 import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
+import { Banner } from '@/components/Banner'
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Header />
+      <Banner />
       <main className="flex-auto">{children}</main>
       <Footer />
     </>
diff --git a/src/components/Spotlight.tsx b/src/components/Spotlight.tsx
index 8b6c866..d929ff7 100644
--- a/src/components/Spotlight.tsx
+++ b/src/components/Spotlight.tsx
@@ -22,7 +22,7 @@ export function SpotlightPreview() {
       />
       <div className="relative z-10 mx-auto w-full max-w-7xl p-4 pt-20 md:pt-0">
         <div className="flex justify-center mb-6">
-           <div className="mb-4 relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+           <div className="mb-4 relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20 animate-fade-in-delay-1">
               Announcing The New TF Marketplace.{' '}
               <a href="#" className="font-semibold text-white hover:text-gray-200">
                 <span aria-hidden="true" className="absolute inset-0" />
@@ -31,13 +31,13 @@ export function SpotlightPreview() {
             </div>
         </div>
 
-        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl">
+        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl animate-fade-in-delay-2">
           Built by Everyone <br /> for Everyone.
         </h1>
-        <p className="mx-auto mt-8 max-w-lg text-center text-base lg:text-xl font-light text-neutral-300">
+        <p className="mx-auto mt-8 max-w-lg text-center text-base lg:text-xl font-light text-neutral-300 animate-fade-in-delay-3">
           ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.
         </p>
-        <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
+        <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4 animate-fade-in-delay-4">
           <Button href="/login" variant="glass">
             Start Building
           </Button>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 1834f99..fcbfcbc 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -302,4 +302,32 @@
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
+
+  /* Reusable animation effects */
+  .animate-fade-in-delay-1 {
+    animation: fadeInUp 0.8s ease-out 0.2s both;
+  }
+
+  .animate-fade-in-delay-2 {
+    animation: fadeInUp 0.8s ease-out 0.4s both;
+  }
+
+  .animate-fade-in-delay-3 {
+    animation: fadeInUp 0.8s ease-out 0.6s both;
+  }
+
+  .animate-fade-in-delay-4 {
+    animation: fadeInUp 0.8s ease-out 0.8s both;
+  }
+
+  @keyframes fadeInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }