Hugging Face's logo

Spaces:
JAYASREESS
/
final_year
Running

App Files Community
final_year
File size: 10,929 Bytes
414e495
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<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>