Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Semantix • Legal Semantic Intelligence</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> | |
| <style> | |
| :root { | |
| --navy: #0f172a; | |
| } | |
| .tail-container { | |
| font-family: "Inter", system-ui, sans-serif; | |
| } | |
| .heading-font { | |
| font-family: "Space Grotesk", sans-serif; | |
| } | |
| .hero-bg { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| } | |
| .card { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1); | |
| } | |
| .document-3d { | |
| perspective: 1200px; | |
| transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); | |
| } | |
| .document-3d:hover { | |
| transform: rotateX(12deg) rotateY(12deg) scale(1.03); | |
| } | |
| .document-inner { | |
| box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4), 0 0 80px -20px rgb(129 140 248 / 0.6), inset 0 4px 12px rgba(255, 255, 255, 0.3); | |
| } | |
| .scan-line { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, transparent, #a5b4fc, transparent); | |
| animation: scan 4s linear infinite; | |
| opacity: 0.6; | |
| } | |
| .switcher button.active { | |
| background: #ffffff; | |
| color: #111827; | |
| box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); | |
| } | |
| @keyframes scan { | |
| 0% { | |
| transform: translateY(-100%); | |
| } | |
| 100% { | |
| transform: translateY(380px); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-mobile-hide { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="tail-container bg-zinc-50 text-slate-900"> | |
| <header class="bg-white border-b border-slate-200 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-6 md:px-8 py-5 flex items-center justify-between gap-4"> | |
| <div class="flex items-center gap-x-3"> | |
| <div class="w-9 h-9 bg-gradient-to-br from-indigo-600 to-violet-600 rounded-2xl flex items-center justify-center text-white font-bold text-2xl leading-none pt-0.5">S</div> | |
| <a href="#home" class="heading-font text-3xl font-semibold tracking-tighter text-slate-900">Semantix</a> | |
| </div> | |
| <nav class="nav-mobile-hide md:flex items-center gap-x-10 text-sm font-medium"> | |
| <a href="#home" class="hover:text-indigo-600 transition-colors">Home</a> | |
| <a href="#about" class="hover:text-indigo-600 transition-colors">About</a> | |
| <a href="#service" class="hover:text-indigo-600 transition-colors">Service</a> | |
| <a href="#contact" class="hover:text-indigo-600 transition-colors">Contact</a> | |
| </nav> | |
| <a href="#authView" class="px-5 py-2.5 text-sm font-semibold bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl transition-colors">Get Started</a> | |
| </div> | |
| </header> | |
| <main> | |
| <section id="home" class="hero-bg min-h-screen flex items-center relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[radial-gradient(at_50%_30%,rgba(129,140,248,0.15),transparent)]"></div> | |
| <div class="max-w-7xl mx-auto px-6 md:px-8 grid md:grid-cols-12 gap-14 items-center relative z-10 py-16"> | |
| <div class="md:col-span-7"> | |
| <div class="inline-flex items-center gap-x-2 bg-white/10 backdrop-blur-md border border-white/20 text-white text-xs font-medium px-4 py-2 rounded-3xl mb-6"> | |
| <span class="relative flex h-3 w-3"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span> | |
| </span> | |
| AI LEGAL INTELLIGENCE | |
| </div> | |
| <h1 class="heading-font text-5xl md:text-7xl leading-none font-semibold tracking-tighter text-white max-w-2xl"> | |
| Legal Document Analysis | |
| </h1> | |
| <div class="mt-12 flex justify-center md:justify-start"> | |
| <div class="document-3d relative inline-block"> | |
| <div class="document-inner w-[300px] md:w-[320px] h-[360px] md:h-[380px] bg-white rounded-3xl overflow-hidden border border-white/40 relative"> | |
| <div class="h-12 bg-gradient-to-r from-indigo-600 to-violet-600 flex items-center px-6 text-white text-sm font-medium"> | |
| CONTRACT • PAGE 1 | |
| </div> | |
| <div class="p-6 space-y-3 text-[10px] leading-tight text-slate-700 font-mono"> | |
| <div class="h-2.5 bg-slate-200 rounded w-3/4"></div> | |
| <div class="h-2.5 bg-slate-200 rounded w-11/12"></div> | |
| <div class="h-2.5 bg-slate-200 rounded w-5/6"></div> | |
| <div class="h-2.5 bg-slate-200 rounded w-full"></div> | |
| <div class="h-2.5 bg-slate-200 rounded w-3/4"></div> | |
| <div class="h-2.5 bg-slate-200 rounded w-10/12"></div> | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/10 to-violet-400/10 flex items-center justify-center"> | |
| <i class="fa-solid fa-wand-magic-sparkles text-white text-[120px] opacity-30"></i> | |
| </div> | |
| <div class="scan-line"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:col-span-5"> | |
| <section id="authView" class="bg-white rounded-3xl shadow-2xl p-8 md:p-10 card"> | |
| <div class="form-header mb-8"> | |
| <div class="switcher grid grid-cols-2 bg-slate-100 p-1 rounded-2xl mb-3" role="tablist" aria-label="Auth mode"> | |
| <button id="loginTab" class="active px-7 py-3 text-sm font-semibold rounded-[14px]" type="button">Login</button> | |
| <button id="signupTab" class="px-7 py-3 text-sm font-semibold rounded-[14px]" type="button">Sign Up</button> | |
| </div> | |
| <p id="formSubtitle" class="text-slate-500 text-sm">Enter your credentials to access your account.</p> | |
| </div> | |
| <form id="authForm" class="space-y-5" novalidate> | |
| <div id="nameField" class="hidden"> | |
| <label class="text-xs uppercase tracking-widest text-slate-500 block mb-1" for="fullName">Full Name</label> | |
| <input id="fullName" name="fullName" type="text" placeholder="Jayasree" class="w-full bg-zinc-50 border border-slate-200 focus:border-indigo-500 rounded-2xl px-5 py-4 outline-none" /> | |
| </div> | |
| <div> | |
| <label class="text-xs uppercase tracking-widest text-slate-500 block mb-1" for="email">Email</label> | |
| <input id="email" name="email" type="email" placeholder="you@lawfirm.in" autocomplete="email" required class="w-full bg-zinc-50 border border-slate-200 focus:border-indigo-500 rounded-2xl px-5 py-4 outline-none" /> | |
| </div> | |
| <div> | |
| <label class="text-xs uppercase tracking-widest text-slate-500 block mb-1" for="password">Password</label> | |
| <input id="password" name="password" type="password" placeholder="Minimum 6 characters" autocomplete="current-password" required class="w-full bg-zinc-50 border border-slate-200 focus:border-indigo-500 rounded-2xl px-5 py-4 outline-none" /> | |
| </div> | |
| <button id="submitBtn" type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 transition-colors text-white font-semibold py-4 rounded-3xl">Login</button> | |
| </form> | |
| <p id="message" class="text-center text-sm mt-6 text-slate-500"></p> | |
| </section> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="max-w-4xl mx-auto px-8 text-center"> | |
| <h2 class="heading-font text-4xl md:text-5xl font-semibold tracking-tighter mb-6">Reliable. Precise. Intelligent.</h2> | |
| <p class="text-lg text-slate-600 max-w-2xl mx-auto"> | |
| Semantix delivers clear, accurate semantic analysis of legal documents, helping you catch issues instantly and work with confidence. | |
| </p> | |
| </div> | |
| </section> | |
| <section id="service" class="py-24 bg-slate-50"> | |
| <div class="max-w-7xl mx-auto px-8"> | |
| <h2 class="heading-font text-center text-4xl md:text-5xl font-semibold tracking-tighter mb-16">Built for serious legal work</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-10 rounded-3xl card text-center"> | |
| <div class="text-5xl mb-6">🔐</div> | |
| <h3 class="font-semibold text-xl">Enterprise Security</h3> | |
| <p class="text-slate-500 mt-3">Your documents stay private and protected.</p> | |
| </div> | |
| <div class="bg-white p-10 rounded-3xl card text-center"> | |
| <div class="text-5xl mb-6">🧠</div> | |
| <h3 class="font-semibold text-xl">Smart Analysis</h3> | |
| <p class="text-slate-500 mt-3">Understands legal language like a senior counsel.</p> | |
| </div> | |
| <div class="bg-white p-10 rounded-3xl card text-center"> | |
| <div class="text-5xl mb-6">📈</div> | |
| <h3 class="font-semibold text-xl">Instant Insights</h3> | |
| <p class="text-slate-500 mt-3">Visual dashboard with line-level clarity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="py-20 bg-slate-900 text-white text-center"> | |
| <div class="max-w-7xl mx-auto px-8"> | |
| <p class="text-sm uppercase tracking-widest text-slate-400">Made for legal professionals</p> | |
| <h2 class="heading-font text-4xl mt-4">Ready for flawless contracts?</h2> | |
| <a href="mailto:hello@semantix.ai" class="inline-block mt-10 px-10 py-4 bg-white text-slate-900 font-semibold rounded-3xl hover:bg-indigo-50 transition-colors">Contact Us</a> | |
| <p class="mt-20 text-xs text-slate-500">© 2026 Semantix • Legal Semantic Intelligence</p> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |