wip not logged page

components/editor/header/index.tsx

@@ -76,7 +76,7 @@ export function Header() {
           <UserMenu className="!pl-1 !pr-3 !py-1 !h-auto" />
         ) : (
           <Button size="sm" onClick={openLoginWindow}>
-            Access to my Account
+            Start Vibe Coding
             <ArrowRight className="size-4" />
           </Button>
         )}

components/my-projects/index.tsx

@@ -34,7 +34,7 @@ export function MyProjects() {
   };
   return (
     <>
-      <section className="max-w-[86rem] py-12 px-4 mx-auto">
+      <section className="max-w-[86rem] py-12 px-4 mx-auto overflow-x-hidden">
         <header className="flex items-center justify-between max-lg:flex-col gap-4">
           <div className="text-left">
             <h1 className="text-3xl font-bold text-white">

components/not-logged/not-logged.tsx

@@ -3,26 +3,192 @@
 import { useUser } from "@/hooks/useUser";
 import { Button } from "@/components/ui/button";
 import { AnimatedBlobs } from "../animated-blobs";
+import { AnimatedText } from "../animated-text";
 
 export const NotLogged = () => {
   const { openLoginWindow } = useUser();
   return (
-    <section className="relative max-w-[86rem] py-12 px-4 mx-auto">
-      <div className="mt-8 text-center max-w-xl mx-auto">
-        <div className="space-y-4 mb-8 text-center mx-auto">
-          <h2 className="text-4xl font-bold text-white">
-            Oops! You must be logged to continue.
-          </h2>
-          <p className="text-muted-foreground text-lg mt-1">
-            Unfortunately you cannot access DeepSite without being logged
-            through your Hugging Face account.
-          </p>
+    <section className="relative max-w-[86rem] mx-auto">
+      <header className="container mx-auto pt-20 px-6 relative flex flex-col items-center justify-center text-center">
+        <div className="rounded-full border border-sky-100/10 bg-gradient-to-r from-sky-500/15 to-sky-sky-500/5 text-sm text-sky-300 px-3 py-1 max-w-max mx-auto mb-2">
+          ✨ DeepSite v3 is out!
         </div>
-        <Button size="lg" variant="default" onClick={openLoginWindow}>
+        <h1 className="text-5xl lg:text-6xl font-semibold text-white font-mono max-w-4xl">
+          Welcome to DeepSite
+        </h1>
+        <p className="text-white/70 text-xl mt-3 mb-8">
+          Code your website with AI in seconds. <br />
+          Access the most simple and powerful AI Vibe Code Editor to create your
+          next project.
+        </p>
+        <Button size="xl" variant="default" onClick={openLoginWindow}>
           Log In to Continue
         </Button>
+        <div className="mt-14 max-w-2xl w-full mx-auto">{/* <AskAi /> */}</div>
+        <AnimatedBlobs />
+      </header>
+      <div id="features" className="min-h-screen py-20 px-6 relative">
+        <div className="container mx-auto"></div>
+        <div className="text-center mb-16">
+          <div className="rounded-full border border-neutral-100/10 bg-neutral-100/5 text-sm text-neutral-300 px-3 py-1 max-w-max mx-auto mb-4">
+            🚀 Powerful Features
+          </div>
+          <h2 className="text-4xl lg:text-5xl font-extrabold text-white font-mono mb-4">
+            Everything you need
+          </h2>
+          <p className="text-base lg:text-lg text-neutral-300/80 max-w-2xl mx-auto">
+            Build, deploy, and scale your websites with cutting-edge features
+          </p>
+        </div>
+
+        {/* Bento Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
+          {/* Multi Pages */}
+          <div
+            className="lg:row-span-2 relative p-8 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-105 hover:rotate-1 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/20"
+            style={{ transformStyle: "preserve-3d" }}
+          >
+            <div className="relative z-10">
+              <div className="text-3xl lg:text-4xl mb-4">📄</div>
+              <h3 className="text-2xl lg:text-3xl font-bold text-white font-mono mb-3">
+                Multi Pages
+              </h3>
+              <p className="text-neutral-300/80 lg:text-lg mb-6">
+                Create complex websites with multiple interconnected pages.
+                Build everything from simple landing pages to full-featured web
+                applications with dynamic routing and navigation.
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <span className="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm">
+                  Dynamic Routing
+                </span>
+                <span className="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm">
+                  Navigation
+                </span>
+                <span className="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-sm">
+                  SEO Ready
+                </span>
+              </div>
+            </div>
+            <div className="absolute -top-20 -right-20 w-40 h-40 bg-gradient-to-r from-purple-500 to-pink-500 opacity-20 blur-3xl rounded-full transition-all duration-700 ease-out group-hover:scale-[4] group-hover:opacity-30" />
+          </div>
+
+          {/* Auto Deploy */}
+          <div
+            className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-110 hover:-translate-y-4 hover:-rotate-3 hover:shadow-2xl hover:shadow-yellow-500/25"
+            style={{ perspective: "1000px", transformStyle: "preserve-3d" }}
+          >
+            <div className="relative z-10">
+              <div className="text-3xl mb-4">⚡</div>
+              <h3 className="text-2xl font-bold text-white font-mono mb-3">
+                Auto Deploy
+              </h3>
+              <p className="text-neutral-300/80 mb-4">
+                Push your changes and watch them go live instantly. No complex
+                CI/CD setup required.
+              </p>
+            </div>
+            <div className="absolute -bottom-10 -right-10 w-32 h-32 bg-gradient-to-r from-yellow-500 to-orange-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+          </div>
+
+          {/* Free Hosting */}
+          <div className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-105 hover:rotate-2 hover:-translate-y-3 hover:shadow-xl hover:shadow-green-500/20">
+            <div className="relative z-10">
+              <div className="text-3xl mb-4">🌐</div>
+              <h3 className="text-2xl font-bold text-white font-mono mb-3">
+                Free Hosting
+              </h3>
+              <p className="text-neutral-300/80 mb-4">
+                Host your websites for free with global CDN and lightning-fast
+                performance.
+              </p>
+            </div>
+            <div className="absolute -top-10 -left-10 w-32 h-32 bg-gradient-to-r from-green-500 to-emerald-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+          </div>
+
+          {/* Open Source Models */}
+          <div
+            className="lg:col-span-2 md:col-span-2 relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-600 hover:scale-[1.02] hover:rotate-y-6 hover:-translate-y-1 hover:shadow-2xl hover:shadow-cyan-500/20"
+            style={{ perspective: "1200px", transformStyle: "preserve-3d" }}
+          >
+            <div className="relative z-10">
+              <div className="text-3xl mb-4">🔓</div>
+              <h3 className="text-2xl font-bold text-white font-mono mb-3">
+                Open Source Models
+              </h3>
+              <p className="text-neutral-300/80 mb-4">
+                Powered by cutting-edge open source AI models. Transparent,
+                customizable, and community-driven development.
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <span className="px-3 py-1 bg-cyan-500/20 text-cyan-300 rounded-full text-sm">
+                  Llama
+                </span>
+                <span className="px-3 py-1 bg-indigo-500/20 text-indigo-300 rounded-full text-sm">
+                  Mistral
+                </span>
+                <span className="px-3 py-1 bg-pink-500/20 text-pink-300 rounded-full text-sm">
+                  CodeLlama
+                </span>
+              </div>
+            </div>
+            <div className="absolute -bottom-10 right-10 w-32 h-32 bg-gradient-to-r from-cyan-500 to-indigo-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+          </div>
+
+          {/* UX Focus */}
+          <div
+            className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-110 hover:rotate-3 hover:-translate-y-2 hover:rotate-x-6 hover:shadow-xl hover:shadow-rose-500/25"
+            style={{ transformStyle: "preserve-3d" }}
+          >
+            <div className="relative z-10">
+              <div className="text-3xl mb-4">✨</div>
+              <h3 className="text-2xl font-bold text-white font-mono mb-3">
+                Perfect UX
+              </h3>
+              <p className="text-neutral-300/80 mb-4">
+                Intuitive interface designed for developers and non-developers
+                alike.
+              </p>
+            </div>
+            <div className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-r from-rose-500 to-pink-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+          </div>
+
+          {/* Hugging Face Integration */}
+          <div
+            className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-[1.08] hover:-rotate-2 hover:-translate-y-3 hover:rotate-y-8 hover:shadow-xl hover:shadow-amber-500/20"
+            style={{ perspective: "800px" }}
+          >
+            <div className="relative z-10">
+              <div className="text-3xl mb-4">🤗</div>
+              <h3 className="text-2xl font-bold text-white font-mono mb-3">
+                Hugging Face
+              </h3>
+              <p className="text-neutral-300/80 mb-4">
+                Seamless integration with Hugging Face models and datasets for
+                cutting-edge AI capabilities.
+              </p>
+            </div>
+            <div className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-r from-yellow-500 to-amber-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+          </div>
+
+          {/* Performance */}
+          <div
+            className="relative p-6 rounded-2xl border border-neutral-100/10 bg-neutral-900/50 backdrop-blur-sm overflow-hidden group hover:border-neutral-100/20 transition-all duration-500 hover:scale-105 hover:rotate-1 hover:-translate-y-4 hover:rotate-x-8 hover:shadow-2xl hover:shadow-blue-500/25"
+            style={{ transformStyle: "preserve-3d" }}
+          >
+            <div className="relative z-10">
+              <div className="text-3xl mb-4">🚀</div>
+              <h3 className="text-2xl font-bold text-white font-mono mb-3">
+                Blazing Fast
+              </h3>
+              <p className="text-neutral-300/80 mb-4">
+                Optimized performance with edge computing and smart caching.
+              </p>
+            </div>
+            <div className="absolute -bottom-10 -right-10 w-32 h-32 bg-gradient-to-r from-blue-500 to-cyan-500 opacity-20 blur-2xl rounded-full transition-all duration-700 ease-out group-hover:scale-[5] group-hover:opacity-35" />
+          </div>
+        </div>
       </div>
-      <AnimatedBlobs />
     </section>
   );
 };

components/public/navigation/index.tsx

@@ -156,7 +156,7 @@ export default function Navigation() {
           ) : (
             <>
               <Button className="!px-6 !py-3 !h-auto" onClick={openLoginWindow}>
-                Access to my Account
+                Start Vibe Coding
                 <ArrowRight className="size-4" />
               </Button>
             </>

components/ui/button.tsx

@@ -33,6 +33,7 @@ const buttonVariants = cva(
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
         sm: "h-8 rounded-full text-[13px] gap-1.5 px-3",
         lg: "h-10 rounded-full px-6 has-[>svg]:px-4",
+        xl: "h-12 rounded-full px-8 has-[>svg]:px-5",
         icon: "size-9",
         iconXs: "size-7",
         iconXss: "size-6",