Merge pull request #28 from kleo-dev/ui-stuff

UI stuff

src/app/Shine.tsx

@@ -0,0 +1,59 @@
+export default function Shine() {
+  return (
+    <div className="w-full h-[2px] mx-auto lg:w-5xl relative z-10">
+      <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>
+  );
+}

src/app/chat/page.tsx

@@ -120,8 +120,8 @@ export default function ChatHub() {
           <Separator />
 
           {/* Quick Actions */}
-          <div>
-            <h2 className="text-xl font-semibold mb-4">Quick Actions</h2>
+          <div className="w-full h-full flex items-center justify-center">
+            {/* <h2 className="text-xl font-semibold mb-4">Quick Actions</h2> */}
             <div className="flex flex-wrap gap-3">
               <StartNewDM />
               <Button variant="outline" className="gap-2">

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();
@@ -62,7 +60,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,22 +76,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>
-
-      {/* 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> */}
 
+      {/* Showcase */}
+      <motion.section
+        className="w-full lg:w-6xl mx-auto px-8 pb-10"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+      >
+        <Shine />
+
+        <img
+          src="/ss.png"
+          alt="Showcase"
+          className="w-full mx-auto relative border border-accent rounded-lg"
+        />
+      </motion.section>
+
       {/* Footer */}
       <footer className="px-6 py-8 border-t text-center text-sm text-muted-foreground">
         © {new Date().getFullYear()} Voxa. All rights reserved.
@@ -101,23 +101,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>
-  );
-}

src/components/MessageBox.tsx

@@ -234,7 +234,13 @@ export default function MessageBox({
           </DropdownMenuContent>
         </DropdownMenu>
 
-        <Button variant="secondary">
+        <Button
+          variant="secondary"
+          onClick={() => {
+            sendMessage(text.trim());
+            setText("");
+          }}
+        >
           <SendIcon />
         </Button>
       </footer>