0xmetaschool/
SmartSignGPT
SmartSignGPT is an innovative AI-powered contract management platform that simplifies the process of reviewing, creating, and signing contracts. Using GPT-4 technology, this application breaks down complex legal documents into easy-to-understand summaries, highlights key points, and provides risk analysis. Built with Next.js and OpenAI's API, this open-source template provides developers with a foundation to create intelligent document management solutions that make contract handling accessible to everyone, regardless of legal expertise.
Readme
Source Codeapp
api
components
data
lib
routes
globals.css
layout.js
page.js
public
.eslintrc.json
.gitignore
jsconfig.json
LICENSE
middleware.js
next.config.js
next.config.mjs
package.json
postcss.config.mjs
README.md
tailwind.config.js
app
page.js
page.jspage.js
1'use client'
2
3import Link from 'next/link'
4import { FileText, Shield, Sparkles, Crown, CheckCircle, ArrowRight, Star } from 'lucide-react'
5import { useState, useRef, useEffect } from 'react'
6import Footer from '../app/components/dashboard/Footer'
7
8// Animation hook for scroll reveal
9function useScrollAnimation() {
10 const ref = useRef(null);
11 const [isVisible, setIsVisible] = useState(false);
12
13 useEffect(() => {
14 const observer = new IntersectionObserver(
15 ([entry]) => {
16 if (entry.isIntersecting) {
17 setIsVisible(true);
18 observer.unobserve(entry.target);
19 }
20 },
21 { threshold: 0.1 }
22 );
23
24 if (ref.current) {
25 observer.observe(ref.current);
26 }
27
28 return () => {
29 if (ref.current) {
30 observer.unobserve(ref.current);
31 }
32 };
33 }, []);
34
35 return [ref, isVisible];
36}
37
38// Document SVG Component
39const DocumentSVG = () => (
40 <svg className="w-full h-full" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg">
41 <rect
42 x="20"
43 y="20"
44 width="200"
45 height="260"
46 rx="10"
47 fill="white"
48 stroke="currentColor"
49 strokeWidth="2"
50 className="transition-all duration-300"
51 />
52
53 <g className="animate-fade-in" style={{ animationDelay: "200ms" }}>
54 <rect x="45" y="60" width="150" height="4" rx="2" fill="#333333" opacity="0.7"/>
55 <rect x="45" y="80" width="130" height="4" rx="2" fill="#333333" opacity="0.5"/>
56 <rect x="45" y="100" width="140" height="4" rx="2" fill="#333333" opacity="0.7"/>
57 </g>
58
59 <g className="animate-signature">
60 <path
61 d="M45 140 C60 120, 80 160, 100 140 S120 120, 140 140 S160 160, 180 140"
62 stroke="url(#signatureGradient)"
63 strokeWidth="3"
64 fill="none"
65 className="animate-draw"
66 />
67 <defs>
68 <linearGradient id="signatureGradient" x1="0%" y1="0%" x2="100%" y2="0%">
69 <stop offset="0%" stopColor="#333333" />
70 <stop offset="100%" stopColor="#666666" />
71 </linearGradient>
72 </defs>
73 </g>
74
75 <g className="animate-fade-in" style={{ animationDelay: "600ms" }}>
76 <rect x="45" y="180" width="90" height="4" rx="2" fill="#333333" opacity="0.5"/>
77 <rect x="45" y="200" width="120" height="4" rx="2" fill="#333333" opacity="0.7"/>
78 <circle cx="45" cy="240" r="4" fill="#333333"/>
79 <circle cx="65" cy="240" r="4" fill="#666666"/>
80 <circle cx="85" cy="240" r="4" fill="#333333"/>
81 </g>
82
83 <g className="animate-pen-move" transform="rotate(-45)">
84 <rect x="160" y="100" width="40" height="8" rx="2" fill="#333333"/>
85 <path d="M200 100 L210 104 L200 108 Z" fill="#333333"/>
86 </g>
87 </svg>
88)
89// Feature Card Component
90const FeatureCard = ({ icon: Icon, title, description, delay }) => {
91 const [ref, isVisible] = useScrollAnimation();
92
93 return (
94 <div
95 ref={ref}
96 className={`p-8 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-gray-200 transition-all duration-500
97 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
98 hover:-translate-y-2 hover:shadow-xl hover:bg-white`}
99 style={{ transitionDelay: `${delay}ms` }}
100 >
101 <div className="w-14 h-14 bg-black rounded-xl flex items-center justify-center mb-6 transform hover:rotate-6 transition-transform duration-300 hover:shadow-lg group">
102 <Icon className="h-7 w-7 text-white transform group-hover:scale-110 transition-transform" />
103 </div>
104 <h3 className="text-xl font-semibold mb-3 text-gray-800">{title}</h3>
105 <p className="text-gray-600 leading-relaxed">{description}</p>
106 </div>
107 )
108}
109
110// Testimonial Card Component
111const TestimonialCard = ({ name, role, content, rating, delay }) => {
112 const [ref, isVisible] = useScrollAnimation();
113
114 return (
115 <div
116 ref={ref}
117 className={`p-8 bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-200 transition-all duration-500
118 ${isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-20'}
119 hover:bg-white hover:shadow-xl`}
120 style={{ transitionDelay: `${delay}ms` }}
121 >
122 <div className="flex mb-4">
123 {[...Array(rating)].map((_, i) => (
124 <Star key={i} className="w-5 h-5 text-gray-800 fill-current" />
125 ))}
126 </div>
127 <p className="text-gray-600 italic mb-6">"{content}"</p>
128 <div className="flex items-center space-x-3">
129 <div className="w-10 h-10 bg-black rounded-full flex items-center justify-center shadow-lg">
130 <span className="text-white font-semibold">{name.charAt(0)}</span>
131 </div>
132 <div>
133 <p className="font-medium text-gray-800">{name}</p>
134 <p className="text-sm text-gray-500">{role}</p>
135 </div>
136 </div>
137 </div>
138 )
139}
140
141// Stats Card Component
142const StatsCard = ({ number, label, delay }) => {
143 const [ref, isVisible] = useScrollAnimation();
144
145 return (
146 <div
147 ref={ref}
148 className={`p-8 bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-200 transition-all duration-500 group
149 ${isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}
150 hover:-translate-y-2 hover:shadow-xl hover:bg-white`}
151 style={{ transitionDelay: `${delay}ms` }}
152 >
153 <div className="text-4xl font-bold text-black group-hover:text-gray-800 transition-colors duration-300">
154 {number}
155 </div>
156 <div className="text-gray-600">{label}</div>
157 </div>
158 )
159}
160
161// Background Components
162const ParticlesBackground = () => {
163 const [bubbles, setBubbles] = useState([]);
164
165 useEffect(() => {
166 const generateBubbles = () => {
167 const newBubbles = [];
168 for (let i = 0; i < 10; i++) {
169 newBubbles.push({
170 id: i,
171 size: Math.random() * 100 + 50,
172 left: Math.random() * 100,
173 animationDelay: Math.random() * 20,
174 animationDuration: Math.random() * 10 + 20
175 });
176 }
177 setBubbles(newBubbles);
178 };
179
180 generateBubbles();
181 }, []);
182
183 return (
184 <div className="absolute inset-0 overflow-hidden pointer-events-none">
185 {bubbles.map((bubble) => (
186 <div
187 key={bubble.id}
188 className="bubble"
189 style={{
190 width: `${bubble.size}px`,
191 height: `${bubble.size}px`,
192 left: `${bubble.left}vw`,
193 animationDelay: `${bubble.animationDelay}s`,
194 animationDuration: `${bubble.animationDuration}s`
195 }}
196 />
197 ))}
198 </div>
199 );
200};
201
202const WaveBackground = () => (
203 <div className="absolute inset-0 overflow-hidden pointer-events-none">
204 <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-gray-50/20 to-transparent" />
205 <div className="wave" />
206 <div className="wave" style={{ animationDelay: '-2s', opacity: 0.5 }} />
207 <div className="wave" style={{ animationDelay: '-4s', opacity: 0.3 }} />
208 </div>
209);
210export default function Page() {
211 const [isClient, setIsClient] = useState(false);
212
213 useEffect(() => {
214 setIsClient(true);
215 }, []);
216
217 return (
218 <div className="min-h-screen relative overflow-hidden bg-gradient-to-b from-white to-gray-50">
219 {isClient && <ParticlesBackground />}
220 <WaveBackground />
221
222 {/* Navigation */}
223 <nav className="fixed w-full backdrop-blur-xl bg-white/90 z-50 border-b border-gray-200">
224 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
225 <div className="flex justify-between h-20 items-center">
226 <div className="flex items-center space-x-2 group">
227 <Crown className="h-8 w-8 text-black transform group-hover:rotate-12 transition-transform duration-300" />
228 <span className="text-2xl font-semibold text-black">
229 SmartSignGPT
230 </span>
231 </div>
232 <div className="hidden md:flex items-center space-x-8">
233 <Link href="#features" className="text-gray-600 hover:text-black transition-colors">Features</Link>
234 <Link href="#pricing" className="text-gray-600 hover:text-black transition-colors">Pricing</Link>
235 <Link href="#about" className="text-gray-600 hover:text-black transition-colors">About</Link>
236 <Link
237 href="/routes/dashboard"
238 className="px-6 py-2.5 bg-black text-white rounded-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5"
239 >
240 Open Dashboard
241 </Link>
242 </div>
243 </div>
244 </div>
245 </nav>
246
247 <main className="pt-32 pb-20">
248 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
249 {/* Hero Section */}
250 <div className="flex flex-col lg:flex-row items-center justify-between gap-16 mb-24">
251 <div className="flex-1 text-left">
252 <div className="inline-flex items-center space-x-2 bg-gray-50 rounded-full px-4 py-2 mb-8 hover:bg-gray-100 transition-colors border border-gray-200">
253 <Sparkles className="w-4 h-4 text-gray-600 animate-pulse" />
254 <span className="text-sm font-medium text-gray-800">Powered by Advanced AI</span>
255 </div>
256
257 <h1 className="text-6xl font-bold tracking-tight mb-6 text-gray-900 animate-fade-in">
258 Transform Your
259 <span className="block mt-2">Documents with</span>
260 <span className="text-5xl text-black animate-gradient">
261 Smart Automation
262 </span>
263 </h1>
264
265 <p className="text-xl text-gray-600 mb-12 max-w-xl leading-relaxed animate-fade-in">
266 Experience the future of document management with AI-powered analysis,
267 intelligent insights, and unmatched security.
268 </p>
269
270 <Link
271 href="/routes/dashboard"
272 className="inline-flex relative items-center px-8 py-4 bg-black text-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 group animate-slide-up"
273 >
274 Get Started & Try Demo
275 <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
276 </Link>
277 </div>
278
279 {/* Right Illustration */}
280 <div className="flex-1 relative">
281 <div className="relative w-full max-w-lg mx-auto transform hover:scale-105 transition-transform duration-500">
282 <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-gray-400/20 to-gray-400/20 rounded-3xl transform rotate-6 opacity-30 animate-pulse"></div>
283 <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-l from-gray-400/20 to-gray-400/20 rounded-3xl transform -rotate-3 opacity-30 animate-pulse delay-100"></div>
284 <div className="relative bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl p-8 border border-gray-200">
285 <DocumentSVG />
286 </div>
287 </div>
288 </div>
289 </div>
290
291 {/* Stats Section */}
292 <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-24">
293 <StatsCard number="10M+" label="Documents Processed" delay={0} />
294 <StatsCard number="99.9%" label="Accuracy Rate" delay={200} />
295 <StatsCard number="5000+" label="Enterprise Users" delay={400} />
296 </div>
297
298 {/* Features Grid */}
299 <div id="features" className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-24">
300 <FeatureCard
301 icon={FileText}
302 title="Smart Processing"
303 description="Advanced AI technology analyzes and processes your documents with incredible speed and accuracy."
304 delay={0}
305 />
306 <FeatureCard
307 icon={Shield}
308 title="Bank-Grade Security"
309 description="Enterprise-level encryption and security protocols keep your sensitive documents protected."
310 delay={200}
311 />
312 <FeatureCard
313 icon={CheckCircle}
314 title="Automated Workflow"
315 description="Streamline your document workflow with intelligent automation and real-time collaboration."
316 delay={400}
317 />
318 </div>
319
320 {/* Testimonials */}
321 <div id="about" className="max-w-5xl mx-auto">
322 <h2 className="text-3xl font-semibold text-gray-900 mb-12 text-center">
323 Trusted by Industry Leaders
324 </h2>
325 <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
326 <TestimonialCard
327 name="Sarah Johnson"
328 role="Legal Director, TechCorp"
329 content="SmartSignGPT has revolutionized our document workflow. The AI analysis is incredibly accurate and has saved us countless hours."
330 rating={5}
331 delay={0}
332 />
333 <TestimonialCard
334 name="Michael Chen"
335 role="CEO, Innovation Labs"
336 content="The security and automation capabilities are unmatched. It's become an indispensable tool for our operations."
337 rating={5}
338 delay={200}
339 />
340 </div>
341 </div>
342 </div>
343 </main>
344
345 <Footer />
346
347 {/* Global Styles */}
348 <style jsx global>{`
349 @keyframes gradient-move {
350 0% { background-position: 0 0, 30px 30px; }
351 100% { background-position: 60px 60px, 90px 90px; }
352 }
353
354 @keyframes fade-in {
355 from { opacity: 0; }
356 to { opacity: 1; }
357 }
358
359 @keyframes slide-up {
360 from { transform: translateY(20px); opacity: 0; }
361 to { transform: translateY(0); opacity: 1; }
362 }
363
364 @keyframes gradient {
365 0% { background-position: 0% 50%; }
366 50% { background-position: 100% 50%; }
367 100% { background-position: 0% 50%; }
368 }
369
370 @keyframes pen-move {
371 0% { transform: translate(-50px, -50px) rotate(-45deg); }
372 20% { transform: translate(0px, 0px) rotate(-45deg); }
373 80% { transform: translate(150px, 0px) rotate(-45deg); }
374 100% { transform: translate(200px, -50px) rotate(-45deg); }
375 }
376
377 @keyframes float {
378 0% {
379 transform: translateY(100vh) scale(0);
380 opacity: 0;
381 }
382 50% {
383 opacity: 0.8;
384 }
385 100% {
386 transform: translateY(-100vh) scale(2);
387 opacity: 0;
388 }
389 }
390
391 @keyframes wave {
392 0% { transform: translateX(0) translateZ(0) scaleY(1); }
393 50% { transform: translateX(-25%) translateZ(0) scaleY(0.8); }
394 100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
395 }
396
397 .wave {
398 position: absolute;
399 bottom: 0;
400 left: 0;
401 width: 200%;
402 height: 100px;
403 background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.03));
404 transform-origin: bottom center;
405 animation: wave 12s linear infinite;
406 }
407
408 .bubble {
409 position: absolute;
410 border-radius: 50%;
411 background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
412 animation: float 20s linear infinite;
413 }
414
415 .animate-fade-in {
416 animation: fade-in 1s ease-out;
417 }
418
419 .animate-slide-up {
420 animation: slide-up 0.5s ease-out;
421 }
422
423 .animate-gradient {
424 animation: gradient 3s ease infinite;
425 background-size: 200% 200%;
426 }
427
428 .animate-signature path {
429 stroke-dasharray: 1000;
430 stroke-dashoffset: 1000;
431 animation: signature 4s ease-in-out forwards;
432 }
433
434 .animate-pen-move {
435 animation: pen-move 4s ease-in-out infinite;
436 }
437
438 @keyframes signature {
439 to {
440 stroke-dashoffset: 0;
441 }
442 }
443 `}</style>
444 </div>
445 );
446}
447Downloads
0
Version
1.0.0
License
MIT
Platform
OpenAI GPT-4
Contributors 2
Open in
Last updated 3 months ago
We are a open source platform and encourage community to contribute to these templates!