Cool showcase

src/app/globals.css

@@ -173,3 +173,44 @@
 ::-webkit-scrollbar-thumb:hover {
   background-color: #4b5563;
 }
+
+.ss-light2 {
+  filter: blur(24.5px);
+  mix-blend-mode: lighten;
+  opacity: 0.3;
+  background: radial-gradient(50% 50%, #7d7d7d 0%, #ff961f66 100%);
+}
+
+.ss-light3 {
+  filter: blur(40.5px);
+  mix-blend-mode: lighten;
+  opacity: 0.8;
+  background: radial-gradient(50% 50%, #7d7d7d 0%, #ff961f66 100%);
+}
+
+.ss-light4 {
+  filter: blur(7px);
+  mix-blend-mode: lighten;
+  opacity: 0.2;
+  background: radial-gradient(50% 50%, #fff 0%, #fff6 100%);
+}
+
+.ss-light5 {
+  filter: blur(12px);
+  mix-blend-mode: lighten;
+  opacity: 0.8;
+  background: radial-gradient(50% 50%, #fff 0%, #fff6 100%);
+}
+
+.ss-light6 {
+  filter: blur(); /* missing value in original, keep as-is or add value */
+  mix-blend-mode: lighten;
+  background: radial-gradient(50% 50%, #fff 0%, #c7ffee00 100%);
+}
+
+.ss-light7 {
+  filter: blur(135px);
+  mix-blend-mode: lighten;
+  opacity: 0.1;
+  background-color: #b8b8b8;
+}

src/app/page.tsx

@@ -62,7 +62,7 @@ export default function LandingPage() {
       </main>
 
       {/* Features */}
-      <section className="grid md:grid-cols-3 gap-6 px-6 py-16 max-w-6xl mx-auto">
+      {/* <section className="grid md:grid-cols-3 gap-6 px-6 py-16 max-w-6xl mx-auto">
         <FeatureCard
           icon={<MessageCircle className="h-10 w-10 text-primary" />}
           title="Real-Time Chat"
@@ -78,6 +78,24 @@ export default function LandingPage() {
           title="Secure & Private"
           description="Your messages are managed by your chosen node server, including your own self hosted node."
         />
+      </section> */}
+
+      <section className="w-full">
+        <div className="w-3xl h-1 mx-auto relative">
+          <div className="ss-light2 absolute left-1/2 -translate-x-1/2 w-[760px] h-[29px] rounded-full"></div>
+          <div className="ss-light3 absolute left-1/2 -translate-x-1/2 w-[491px] h-[17px] rounded-full"></div>
+          <div className="ss-light4 absolute left-1/2 -translate-x-1/2 w-[467px] h-[17px] rounded-full"></div>
+          <div className="ss-light5 absolute left-1/2 -translate-x-1/2 w-[334px] h-[5px] rounded-full"></div>
+          <div className="ss-light6 absolute left-1/2 -translate-x-1/2 w-[760px] h-[2px] rounded-full"></div>
+          <div className="ss-light7 absolute left-1/2 -translate-x-1/2 w-[768px] h-[398px] rounded-full"></div>
+        </div>
+
+        {/* <img src="/ss.png" alt="Showcase" className="max-w-6xl mx-auto" /> */}
+        <img
+          src="/ss.png"
+          alt="Showcase"
+          className="max-w-6xl mx-auto relative z-10"
+        />
       </section>
 
       {/* Call to Action */}