Hugging Face's logo

Spaces:
shazzar00ni
/
paperlyte-landing
Running

App Files Community
shazzar00ni commited on
Commit
c531ef8
·
verified ·
1 Parent(s): 7eb2f21

Paperlyte Landing Page Hero Section Headline: “Note-taking, Lighter Than Ever” Subtext: Capture your thoughts instantly in a space that’s lightning-fast, beautifully clean, and utterly distraction-free. Call-to-Action (CTA): [Get Started Free] or [Try Paperlyte Now] Visual: Soft, abstract background with dynamic paper illustrations or “fluttering note” animation. Key Features (Three or Four Columns) Lightning Fast & Lightweight: Your ideas, saved instantly—never lose your spark. Zero Distractions: No clutter—just a serene, focused canvas. Accessible Anywhere: Works seamlessly on web, tablet, and mobile. Organize Effortlessly: Tag, search, and group notes with ease. Why Paperlyte? Minimal by Design: Only the tools that matter. No bloat, no learning curve. Private & Secure: Your thoughts stay yours. End-to-end encrypted and ad-free! Perfect for Creators, Students, & Professionals Screenshots / App Demo Carousel Light, airy UI mockups with playful accent colors Optional animated demo (ex: jotting a note in under 2 seconds!) Testimonials “Paperlyte lets me think big with zero friction.” “So clean, so fast—I actually want to write every day!” Simple Pricing (if needed) Free Forever (core features), plus Paperlyte+ for power users (early bird/coming soon!) Footer Quick links: FAQ | About | Privacy | Contact Social icons or light community shoutout (“Join the Paperlyte movement!”) Energizing Next Steps! Accent branding with floating paper planes, gentle sparkles, or a soft “glow” around input boxes. Fun micro-interactions: “Light up” effect on buttons, gentle animation on checkmarks, or a Paperlyte mascot waving hello. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +509 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Paperlyte Landing
3
- emoji: 🔥
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: paperlyte-landing
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,509 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Paperlyte - Note-taking, Lighter Than Ever</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% {
12
+ transform: translateY(0);
13
+ }
14
+ 50% {
15
+ transform: translateY(-15px);
16
+ }
17
+ }
18
+ @keyframes flutter {
19
+ 0%, 100% {
20
+ transform: rotate(-2deg) translateY(0);
21
+ }
22
+ 50% {
23
+ transform: rotate(2deg) translateY(-5px);
24
+ }
25
+ }
26
+ .floating {
27
+ animation: float 6s ease-in-out infinite;
28
+ }
29
+ .fluttering {
30
+ animation: flutter 4s ease-in-out infinite;
31
+ }
32
+ .glow-on-hover {
33
+ transition: all 0.3s ease;
34
+ }
35
+ .glow-on-hover:hover {
36
+ box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
37
+ }
38
+ .note-card {
39
+ transition: all 0.3s ease;
40
+ }
41
+ .note-card:hover {
42
+ transform: translateY(-5px);
43
+ }
44
+ .checkmark {
45
+ transition: all 0.3s ease;
46
+ }
47
+ .checkmark:hover {
48
+ transform: scale(1.2);
49
+ }
50
+ .mascot-wave {
51
+ animation: wave 2s ease-in-out infinite;
52
+ transform-origin: 70% 70%;
53
+ }
54
+ @keyframes wave {
55
+ 0%, 100% {
56
+ transform: rotate(0deg);
57
+ }
58
+ 25% {
59
+ transform: rotate(10deg);
60
+ }
61
+ 75% {
62
+ transform: rotate(-10deg);
63
+ }
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="font-sans bg-gray-50">
68
+ <!-- Header -->
69
+ <header class="bg-white shadow-sm">
70
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
71
+ <div class="flex items-center">
72
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
73
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
74
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
75
+ </svg>
76
+ </div>
77
+ <h1 class="text-xl font-bold text-gray-800">Paperlyte</h1>
78
+ </div>
79
+ <nav class="hidden md:flex space-x-8">
80
+ <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Features</a>
81
+ <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Why Paperlyte</a>
82
+ <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Testimonials</a>
83
+ <a href="#" class="text-gray-600 hover:text-indigo-500 transition">Pricing</a>
84
+ </nav>
85
+ <button class="md:hidden text-gray-600">
86
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
87
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
88
+ </svg>
89
+ </button>
90
+ </div>
91
+ </header>
92
+
93
+ <!-- Hero Section -->
94
+ <section class="relative overflow-hidden">
95
+ <div class="absolute inset-0 z-0">
96
+ <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-50 to-purple-50 opacity-90"></div>
97
+ <div class="absolute top-20 left-20 w-16 h-16 rounded-full bg-indigo-200 opacity-30 floating"></div>
98
+ <div class="absolute top-1/3 right-1/4 w-24 h-24 rounded-full bg-purple-200 opacity-30 floating" style="animation-delay: 1s;"></div>
99
+ <div class="absolute bottom-20 right-20 w-20 h-20 rounded-full bg-blue-200 opacity-30 floating" style="animation-delay: 2s;"></div>
100
+
101
+ <!-- Paper illustrations -->
102
+ <div class="absolute top-1/4 left-1/4 w-16 h-16 bg-white rounded-md shadow-sm transform rotate-6 fluttering" style="animation-delay: 0.5s;"></div>
103
+ <div class="absolute top-1/3 right-1/3 w-20 h-20 bg-white rounded-md shadow-sm transform -rotate-3 fluttering" style="animation-delay: 1.5s;"></div>
104
+ <div class="absolute bottom-1/4 left-1/3 w-24 h-24 bg-white rounded-md shadow-sm transform rotate-12 fluttering" style="animation-delay: 1s;"></div>
105
+ </div>
106
+
107
+ <div class="container mx-auto px-4 py-20 md:py-32 relative z-10">
108
+ <div class="max-w-3xl mx-auto text-center">
109
+ <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6">Note-taking, <span class="text-indigo-600">Lighter Than Ever</span></h1>
110
+ <p class="text-xl md:text-2xl text-gray-600 mb-10">Capture your thoughts instantly in a space that's lightning-fast, beautifully clean, and utterly distraction-free.</p>
111
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
112
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-8 rounded-lg transition transform hover:scale-105 glow-on-hover">
113
+ Get Started Free
114
+ </button>
115
+ <button class="bg-white hover:bg-gray-100 text-indigo-600 font-medium py-3 px-8 rounded-lg border border-indigo-200 transition transform hover:scale-105 glow-on-hover">
116
+ Try Paperlyte Now
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- Features Section -->
124
+ <section class="py-16 bg-white">
125
+ <div class="container mx-auto px-4">
126
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Designed for Thoughtful Creation</h2>
127
+
128
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
129
+ <!-- Feature 1 -->
130
+ <div class="bg-gray-50 p-6 rounded-xl note-card">
131
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
132
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
133
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
134
+ </svg>
135
+ </div>
136
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Lightning Fast & Lightweight</h3>
137
+ <p class="text-gray-600">Your ideas, saved instantly—never lose your spark.</p>
138
+ </div>
139
+
140
+ <!-- Feature 2 -->
141
+ <div class="bg-gray-50 p-6 rounded-xl note-card">
142
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
143
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
144
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
145
+ </svg>
146
+ </div>
147
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Zero Distractions</h3>
148
+ <p class="text-gray-600">No clutter—just a serene, focused canvas.</p>
149
+ </div>
150
+
151
+ <!-- Feature 3 -->
152
+ <div class="bg-gray-50 p-6 rounded-xl note-card">
153
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
154
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
155
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
156
+ </svg>
157
+ </div>
158
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Accessible Anywhere</h3>
159
+ <p class="text-gray-600">Works seamlessly on web, tablet, and mobile.</p>
160
+ </div>
161
+
162
+ <!-- Feature 4 -->
163
+ <div class="bg-gray-50 p-6 rounded-xl note-card">
164
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
165
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
166
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
167
+ </svg>
168
+ </div>
169
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Organize Effortlessly</h3>
170
+ <p class="text-gray-600">Tag, search, and group notes with ease.</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </section>
175
+
176
+ <!-- Why Paperlyte Section -->
177
+ <section class="py-16 bg-gray-50">
178
+ <div class="container mx-auto px-4">
179
+ <div class="flex flex-col lg:flex-row items-center">
180
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10 relative">
181
+ <div class="bg-white p-6 rounded-xl shadow-sm">
182
+ <div class="flex items-center mb-4">
183
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
184
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
185
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
186
+ </svg>
187
+ </div>
188
+ <h3 class="text-lg font-medium text-gray-800">Minimal by Design</h3>
189
+ </div>
190
+ <p class="text-gray-600 mb-6">Only the tools that matter. No bloat, no learning curve.</p>
191
+
192
+ <div class="flex items-center mb-4">
193
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
194
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
195
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
196
+ </svg>
197
+ </div>
198
+ <h3 class="text-lg font-medium text-gray-800">Private & Secure</h3>
199
+ </div>
200
+ <p class="text-gray-600">Your thoughts stay yours. End-to-end encrypted and ad-free!</p>
201
+ </div>
202
+
203
+ <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-20"></div>
204
+ <div class="absolute -top-6 -left-6 w-20 h-20 bg-purple-100 rounded-full opacity-20"></div>
205
+ </div>
206
+
207
+ <div class="lg:w-1/2">
208
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Perfect for <span class="text-indigo-600">Creators, Students, & Professionals</span></h2>
209
+ <p class="text-gray-600 mb-8">Paperlyte is designed to adapt to your workflow, whether you're brainstorming ideas, taking lecture notes, or organizing your professional life.</p>
210
+
211
+ <div class="grid grid-cols-2 gap-4">
212
+ <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
213
+ <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
214
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
215
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
216
+ </svg>
217
+ </div>
218
+ <span class="text-gray-700">Creators</span>
219
+ </div>
220
+ <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
221
+ <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
222
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
223
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
224
+ </svg>
225
+ </div>
226
+ <span class="text-gray-700">Students</span>
227
+ </div>
228
+ <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
229
+ <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
230
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
231
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
232
+ </svg>
233
+ </div>
234
+ <span class="text-gray-700">Professionals</span>
235
+ </div>
236
+ <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
237
+ <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
238
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
239
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
240
+ </svg>
241
+ </div>
242
+ <span class="text-gray-700">Everyone</span>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- App Demo Section -->
251
+ <section class="py-16 bg-white">
252
+ <div class="container mx-auto px-4">
253
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Experience the Paperlyte Difference</h2>
254
+
255
+ <div class="relative max-w-4xl mx-auto">
256
+ <div class="bg-gray-50 rounded-xl p-2 shadow-lg">
257
+ <div class="bg-white rounded-lg overflow-hidden">
258
+ <!-- Mock app UI -->
259
+ <div class="flex items-center p-4 border-b">
260
+ <div class="flex space-x-2">
261
+ <div class="w-3 h-3 rounded-full bg-red-400"></div>
262
+ <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
263
+ <div class="w-3 h-3 rounded-full bg-green-400"></div>
264
+ </div>
265
+ <div class="mx-auto text-sm text-gray-500">Paperlyte</div>
266
+ </div>
267
+ <div class="p-4">
268
+ <div class="flex items-center mb-4">
269
+ <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
270
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
271
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
272
+ </svg>
273
+ </div>
274
+ <input type="text" placeholder="Title your note..." class="flex-1 bg-transparent outline-none text-lg font-medium text-gray-800 placeholder-gray-400">
275
+ </div>
276
+ <textarea class="w-full h-64 bg-transparent outline-none resize-none text-gray-700 placeholder-gray-400" placeholder="Start writing your thoughts here..."></textarea>
277
+ <div class="flex justify-between items-center pt-4 border-t">
278
+ <div class="flex space-x-2">
279
+ <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition">
280
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
281
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
282
+ </svg>
283
+ </button>
284
+ <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition">
285
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
286
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
287
+ </svg>
288
+ </button>
289
+ </div>
290
+ <button class="px-4 py-1 bg-indigo-600 text-white rounded-full text-sm font-medium hover:bg-indigo-700 transition">
291
+ Save
292
+ </button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <!-- Floating elements around the mockup -->
299
+ <div class="absolute -top-6 -left-6 w-16 h-16 bg-white rounded-lg shadow-sm transform rotate-12 fluttering" style="animation-delay: 0.5s;"></div>
300
+ <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-white rounded-lg shadow-sm transform -rotate-6 fluttering" style="animation-delay: 1s;"></div>
301
+
302
+ <!-- Mascot waving hello -->
303
+ <div class="absolute -right-10 -bottom-10 w-24 h-24 hidden lg:block">
304
+ <div class="relative">
305
+ <div class="w-24 h-24 bg-indigo-100 rounded-full flex items-center justify-center">
306
+ <div class="w-20 h-20 bg-indigo-200 rounded-full flex items-center justify-center">
307
+ <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center overflow-hidden">
308
+ <div class="text-center">
309
+ <div class="flex justify-center mb-1">
310
+ <div class="w-2 h-2 bg-gray-800 rounded-full mx-1"></div>
311
+ <div class="w-2 h-2 bg-gray-800 rounded-full mx-1"></div>
312
+ </div>
313
+ <div class="w-8 h-4 bg-gray-800 rounded-full mx-auto relative mascot-wave">
314
+ <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-gray-300 rounded-full"></div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ <div class="absolute -top-2 -right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-sm">
321
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
322
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
323
+ </svg>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- Testimonials Section -->
332
+ <section class="py-16 bg-gray-50">
333
+ <div class="container mx-auto px-4">
334
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Users Say</h2>
335
+
336
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
337
+ <!-- Testimonial 1 -->
338
+ <div class="bg-white p-6 rounded-xl shadow-sm">
339
+ <div class="flex items-center mb-4">
340
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold mr-3">J</div>
341
+ <div>
342
+ <h4 class="font-medium text-gray-800">Jamie L.</h4>
343
+ <div class="flex text-yellow-400">
344
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
345
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
346
+ </svg>
347
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
348
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
349
+ </svg>
350
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
351
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
352
+ </svg>
353
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
354
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
355
+ </svg>
356
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
357
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
358
+ </svg>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ <p class="text-gray-600 italic">"Paperlyte lets me think big with zero friction. I've tried dozens of note apps, but none stay out of my way like this one."</p>
363
+ </div>
364
+
365
+ <!-- Testimonial 2 -->
366
+ <div class="bg-white p-6 rounded-xl shadow-sm">
367
+ <div class="flex items-center mb-4">
368
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold mr-3">M</div>
369
+ <div>
370
+ <h4 class="font-medium text-gray-800">Marcus T.</h4>
371
+ <div class="flex text-yellow-400">
372
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
373
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
374
+ </svg>
375
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
376
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
377
+ </svg>
378
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
379
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
380
+ </svg>
381
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
382
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
383
+ </svg>
384
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
385
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
386
+ </svg>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ <p class="text-gray-600 italic">"So clean, so fast—I actually want to write every day! As a student, this has completely changed how I take and organize notes."</p>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- CTA Section -->
397
+ <section class="py-16 bg-indigo-600 text-white">
398
+ <div class="container mx-auto px-4 text-center">
399
+ <h2 class="text-3xl font-bold mb-6">Ready to Lighten Your Note-Taking?</h2>
400
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of happy users who've found their perfect note-taking companion.</p>
401
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
402
+ <button class="bg-white hover:bg-gray-100 text-indigo-600 font-medium py-3 px-8 rounded-lg transition transform hover:scale-105 glow-on-hover">
403
+ Get Started Free
404
+ </button>
405
+ <button class="bg-indigo-700 hover:bg-indigo-800 text-white font-medium py-3 px-8 rounded-lg border border-indigo-500 transition transform hover:scale-105 glow-on-hover">
406
+ Learn More
407
+ </button>
408
+ </div>
409
+ </div>
410
+ </section>
411
+
412
+ <!-- Footer -->
413
+ <footer class="bg-gray-900 text-gray-400 py-12">
414
+ <div class="container mx-auto px-4">
415
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
416
+ <div class="md:col-span-2">
417
+ <div class="flex items-center mb-4">
418
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
419
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
420
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
421
+ </svg>
422
+ </div>
423
+ <h2 class="text-xl font-bold text-white">Paperlyte</h2>
424
+ </div>
425
+ <p class="mb-4">Note-taking, lighter than ever.</p>
426
+ <div class="flex space-x-4">
427
+ <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition">
428
+ <i class="fab fa-twitter"></i>
429
+ </a>
430
+ <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition">
431
+ <i class="fab fa-instagram"></i>
432
+ </a>
433
+ <a href="#" class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition">
434
+ <i class="fab fa-linkedin-in"></i>
435
+ </a>
436
+ </div>
437
+ </div>
438
+
439
+ <div>
440
+ <h3 class="text-white font-medium mb-4">Product</h3>
441
+ <ul class="space-y-2">
442
+ <li><a href="#" class="hover:text-white transition">Features</a></li>
443
+ <li><a href="#" class="hover:text-white transition">Pricing</a></li>
444
+ <li><a href="#" class="hover:text-white transition">Testimonials</a></li>
445
+ <li><a href="#" class="hover:text-white transition">FAQ</a></li>
446
+ </ul>
447
+ </div>
448
+
449
+ <div>
450
+ <h3 class="text-white font-medium mb-4">Company</h3>
451
+ <ul class="space-y-2">
452
+ <li><a href="#" class="hover:text-white transition">About</a></li>
453
+ <li><a href="#" class="hover:text-white transition">Privacy</a></li>
454
+ <li><a href="#" class="hover:text-white transition">Terms</a></li>
455
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
456
+ </ul>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="border-t border-gray-800 mt-12 pt-8 text-sm text-center">
461
+ <p>© 2023 Paperlyte. All rights reserved.</p>
462
+ <p class="mt-2">Join the Paperlyte movement!</p>
463
+ </div>
464
+ </div>
465
+ </footer>
466
+
467
+ <script>
468
+ // Simple micro-interactions
469
+ document.addEventListener('DOMContentLoaded', function() {
470
+ // Button hover effects
471
+ const buttons = document.querySelectorAll('button');
472
+ buttons.forEach(button => {
473
+ button.addEventListener('mouseenter', function() {
474
+ if (this.classList.contains('glow-on-hover')) {
475
+ this.classList.add('transform', 'scale-105');
476
+ }
477
+ });
478
+ button.addEventListener('mouseleave', function() {
479
+ if (this.classList.contains('glow-on-hover')) {
480
+ this.classList.remove('transform', 'scale-105');
481
+ }
482
+ });
483
+ });
484
+
485
+ // Checkmark animation
486
+ const checkmarks = document.querySelectorAll('.checkmark');
487
+ checkmarks.forEach(checkmark => {
488
+ checkmark.addEventListener('mouseenter', function() {
489
+ this.classList.add('transform', 'scale-110');
490
+ });
491
+ checkmark.addEventListener('mouseleave', function() {
492
+ this.classList.remove('transform', 'scale-110');
493
+ });
494
+ });
495
+
496
+ // Note card hover effects
497
+ const noteCards = document.querySelectorAll('.note-card');
498
+ noteCards.forEach(card => {
499
+ card.addEventListener('mouseenter', function() {
500
+ this.classList.add('shadow-md');
501
+ });
502
+ card.addEventListener('mouseleave', function() {
503
+ this.classList.remove('shadow-md');
504
+ });
505
+ });
506
+ });
507
+ </script>
508
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shazzar00ni/paperlyte-landing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
509
+ </html>