Small improvements showcase

src/app/Shine.tsx

@@ -0,0 +1,61 @@
+export default function Shine() {
+  return (
+    <div className="px-10 md:px-0">
+      <div className="w-full h-[2px] mx-auto lg:w-3xl relative">
+        <div
+          className="
+          absolute left-1/2 -translate-x-1/2
+          w-[99%] h-[29px] rounded-full
+          filter blur-[24.5px] mix-blend-lighten opacity-30
+          bg-[radial-gradient(50%_50%,_#7d7d7d_0%,_#ff961f66_100%)]
+          "
+        ></div>
+
+        <div
+          className="
+          absolute left-1/2 -translate-x-1/2
+          w-[64%] h-[17px] rounded-full
+          filter blur-[40.5px] mix-blend-lighten opacity-80
+          bg-[radial-gradient(50%_50%,_#7d7d7d_0%,_#ff961f66_100%)]
+        "
+        ></div>
+
+        <div
+          className="
+          absolute left-1/2 -translate-x-1/2
+          w-[60.8%] h-[17px] rounded-full
+          filter blur-[7px] mix-blend-lighten opacity-20
+          bg-[radial-gradient(50%_50%,_#fff_0%,_#fff6_100%)]
+        "
+        ></div>
+
+        <div
+          className="
+          absolute left-1/2 -translate-x-1/2
+          w-[43.5%] h-[5px] rounded-full
+          filter blur-md mix-blend-lighten opacity-80
+          bg-[radial-gradient(50%_50%,_#fff_0%,_#fff6_100%)]
+        "
+        ></div>
+
+        <div
+          className="
+          absolute left-1/2 -translate-x-1/2
+          w-[99%] h-[2px] rounded-full
+          filter
+          bg-[radial-gradient(50%_50%,_#fff_0%,_#c7ffee00_100%)]
+        "
+        ></div>
+
+        <div
+          className="
+          absolute left-1/2 -translate-x-1/2
+          w-full h-[398px] rounded-full
+          filter blur-[135px] mix-blend-lighten opacity-10
+          bg-[#b8b8b8]
+        "
+        ></div>
+      </div>
+    </div>
+  );
+}

src/app/globals.css

@@ -173,44 +173,3 @@
 ::-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

@@ -1,12 +1,10 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { MessageCircle, Users, Shield } from "lucide-react";
 import { motion } from "framer-motion";
 import { useRouter } from "next/navigation";
 import Logo from "@/components/Logo";
+import Shine from "./Shine";
 
 export default function LandingPage() {
   const router = useRouter();
@@ -80,38 +78,17 @@ export default function LandingPage() {
         />
       </section> */}
 
-      <section className="w-full">
+      {/* Showcase */}
-        <div className="w-3xl h-1 mx-auto relative">
+      <section className="w-full lg:w-6xl mx-auto px-8 pb-10">
-          <div className="ss-light2 absolute left-1/2 -translate-x-1/2 w-[760px] h-[29px] rounded-full"></div>
+        <Shine />
-          <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"
+          className="w-full mx-auto relative z-10 border border-accent rounded-lg"
         />
       </section>
 
-      {/* Call to Action */}
-      {/* <section className="bg-muted py-20 px-6 text-center">
-        <h3 className="text-3xl font-semibold mb-4">
-          Ready to start chatting?
-        </h3>
-        <p className="text-muted-foreground mb-6">
-          Create your free account today and bring your conversations together.
-        </p>
-        <div className="max-w-md mx-auto flex gap-2">
-          <Input placeholder="Enter your email" />
-          <Button>Sign Up</Button>
-        </div>
-      </section> */}
-
       {/* Footer */}
       <footer className="px-6 py-8 border-t text-center text-sm text-muted-foreground">
         © {new Date().getFullYear()} Voxa. All rights reserved.
@@ -119,23 +96,3 @@ export default function LandingPage() {
     </div>
   );
 }
-
-function FeatureCard({
-  icon,
-  title,
-  description,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-}) {
-  return (
-    <Card className="shadow-sm">
-      <CardContent className="p-6 flex flex-col items-center text-center">
-        {icon}
-        <h4 className="mt-4 font-semibold text-xl">{title}</h4>
-        <p className="mt-2 text-muted-foreground">{description}</p>
-      </CardContent>
-    </Card>
-  );
-}