Hugging Face's logo

Spaces:
gaur3009
/
standalone_rrokuo
Running

App Files Community
gaur3009 commited on
Commit
3651f5b
·
verified ·
1 Parent(s): 404e0b2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +758 -19
index.html CHANGED
@@ -1,19 +1,758 @@
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>Rookus - AI Fashion Design Platform</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .hero-gradient {
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ }
16
+ .feature-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .mockup-selector {
21
+ transition: all 0.3s ease;
22
+ }
23
+ .mockup-selector:hover {
24
+ transform: scale(1.05);
25
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
26
+ }
27
+ .accordion-content {
28
+ max-height: 0;
29
+ overflow: hidden;
30
+ transition: max-height 0.3s ease;
31
+ }
32
+ .accordion.active .accordion-content {
33
+ max-height: 500px;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="font-sans antialiased text-gray-800">
38
+ <!-- Navigation -->
39
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
40
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41
+ <div class="flex justify-between h-16">
42
+ <div class="flex items-center">
43
+ <div class="flex-shrink-0 flex items-center">
44
+ <img class="h-8 w-auto" src="https://www.rookus.in/images/logo/logo.png" alt="Rookus Logo">
45
+ <span class="ml-2 text-xl font-bold text-indigo-600">Rookus</span>
46
+ </div>
47
+ </div>
48
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
49
+ <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium">Home</a>
50
+ <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Features</a>
51
+ <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Pricing</a>
52
+ <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">About</a>
53
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Try Demo</button>
54
+ </div>
55
+ <div class="-mr-2 flex items-center md:hidden">
56
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
57
+ <span class="sr-only">Open main menu</span>
58
+ <i class="fas fa-bars"></i>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </nav>
64
+
65
+ <!-- Hero Section -->
66
+ <div class="hero-gradient text-white">
67
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
68
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
69
+ <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
70
+ <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">
71
+ <span class="block">AI-powered Designing</span>
72
+ <span class="block text-indigo-200">Solution for Fashion</span>
73
+ </h1>
74
+ <p class="mt-3 text-base text-indigo-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
75
+ An all-in-one solution that simplifies and accelerates your entire designing process, empowering you to create stunning visuals and mockups with unmatched efficiency and ease.
76
+ </p>
77
+ <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
78
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
79
+ <div class="rounded-md shadow">
80
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
81
+ Get Started
82
+ </a>
83
+ </div>
84
+ <div class="mt-3 sm:mt-0 sm:ml-3">
85
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
86
+ Live Demo
87
+ </a>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
93
+ <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
94
+ <img class="w-full rounded-lg" src="https://www.rookus.in/_next/image?url=%2Fimages%2Fbanner%2Fbanner.png&w=2048&q=75" alt="Rookus AI Fashion Design">
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Trusted By Section -->
102
+ <div class="bg-white py-12">
103
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
104
+ <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide">Trusted by industry leaders</p>
105
+ <div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6">
106
+ <div class="col-span-1 flex justify-center">
107
+ <img class="h-12" src="https://www.rookus.in/images/companies/Denim.jpg" alt="Denim">
108
+ </div>
109
+ <div class="col-span-1 flex justify-center">
110
+ <img class="h-12" src="https://www.rookus.in/images/companies/Sport.jpg" alt="Sport">
111
+ </div>
112
+ <div class="col-span-1 flex justify-center">
113
+ <img class="h-12" src="https://www.rookus.in/images/companies/Fictional.jpeg" alt="Fictional">
114
+ </div>
115
+ <div class="col-span-1 flex justify-center">
116
+ <img class="h-12" src="https://www.rookus.in/images/companies/Jungle.jpg" alt="Jungle">
117
+ </div>
118
+ <div class="col-span-1 flex justify-center">
119
+ <img class="h-12" src="https://www.rookus.in/images/companies/Techy.jpeg" alt="Techy">
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Features Section -->
126
+ <div class="gradient-bg py-16">
127
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
128
+ <div class="lg:text-center">
129
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
130
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
131
+ Seamless Mockup Generation
132
+ </p>
133
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
134
+ Rookus Xpress is our cutting-edge, high-precision generation tool designed to revolutionize the fashion industry.
135
+ </p>
136
+ </div>
137
+
138
+ <div class="mt-20">
139
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
140
+ <!-- Feature 1 -->
141
+ <div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
142
+ <div class="absolute -top-6 left-6 bg-indigo-500 p-3 rounded-lg shadow-lg">
143
+ <img class="h-6 w-6" src="https://www.rookus.in/images/work/accuracy.png" alt="Accuracy">
144
+ </div>
145
+ <h3 class="mt-4 text-xl font-medium text-gray-900">Unmatched Accuracy</h3>
146
+ <p class="mt-2 text-base text-gray-600">
147
+ High Precision Tool trained on 1B parameters to provide the most accurate results.
148
+ </p>
149
+ <div class="mt-4">
150
+ <img class="h-8 w-auto" src="https://www.rookus.in/images/icons/bg-arrow.svg" alt="Arrow">
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Feature 2 -->
155
+ <div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
156
+ <div class="absolute -top-6 left-6 bg-indigo-500 p-3 rounded-lg shadow-lg">
157
+ <img class="h-6 w-6" src="https://www.rookus.in/images/work/icon-two.svg" alt="Speed">
158
+ </div>
159
+ <h3 class="mt-4 text-xl font-medium text-gray-900">Lightning-Fast Generation</h3>
160
+ <p class="mt-2 text-base text-gray-600">
161
+ Rookus Xpress enables lightning-fast mockup generation, streamlining your design process for maximum efficiency.
162
+ </p>
163
+ <div class="mt-4">
164
+ <img class="h-8 w-auto" src="https://www.rookus.in/images/icons/bg-arrow.svg" alt="Arrow">
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Feature 3 -->
169
+ <div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
170
+ <div class="absolute -top-6 left-6 bg-indigo-500 p-3 rounded-lg shadow-lg">
171
+ <img class="h-6 w-6" src="https://www.rookus.in/images/features/featureOne.svg" alt="Customization">
172
+ </div>
173
+ <h3 class="mt-4 text-xl font-medium text-gray-900">Customizable Outputs</h3>
174
+ <p class="mt-2 text-base text-gray-600">
175
+ Rookus Xpress offers highly customizable outputs, allowing you to tailor designs to your exact specifications.
176
+ </p>
177
+ <div class="mt-4">
178
+ <img class="h-8 w-auto" src="https://www.rookus.in/images/icons/bg-arrow.svg" alt="Arrow">
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Mockup Generator Section -->
187
+ <div class="bg-white py-16">
188
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
189
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
190
+ <div class="mb-12 lg:mb-0">
191
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
192
+ Rookus Mockup Generator
193
+ </h2>
194
+ <p class="mt-3 text-lg text-gray-600">
195
+ Generate high-quality clothing mockups instantly
196
+ </p>
197
+
198
+ <div class="mt-8 space-y-6">
199
+ <div>
200
+ <label class="block text-sm font-medium text-gray-700">Clothing Type</label>
201
+ <div class="mt-2 grid grid-cols-3 gap-4">
202
+ <button class="mockup-selector bg-gray-100 py-2 px-4 rounded-md text-sm font-medium text-gray-700 hover:bg-indigo-100 hover:text-indigo-700">T-Shirt</button>
203
+ <button class="mockup-selector bg-gray-100 py-2 px-4 rounded-md text-sm font-medium text-gray-700 hover:bg-indigo-100 hover:text-indigo-700">Hoodie</button>
204
+ <button class="mockup-selector bg-gray-100 py-2 px-4 rounded-md text-sm font-medium text-gray-700 hover:bg-indigo-100 hover:text-indigo-700">Polo</button>
205
+ </div>
206
+ </div>
207
+
208
+ <div>
209
+ <label class="block text-sm font-medium text-gray-700">Color</label>
210
+ <div class="mt-2 grid grid-cols-5 gap-2">
211
+ <button class="mockup-selector h-8 w-8 rounded-full bg-red-500 hover:ring-2 hover:ring-offset-2 hover:ring-red-500"></button>
212
+ <button class="mockup-selector h-8 w-8 rounded-full bg-blue-500 hover:ring-2 hover:ring-offset-2 hover:ring-blue-500"></button>
213
+ <button class="mockup-selector h-8 w-8 rounded-full bg-black hover:ring-2 hover:ring-offset-2 hover:ring-black"></button>
214
+ <button class="mockup-selector h-8 w-8 rounded-full bg-white border border-gray-300 hover:ring-2 hover:ring-offset-2 hover:ring-gray-300"></button>
215
+ <button class="mockup-selector h-8 w-8 rounded-full bg-green-500 hover:ring-2 hover:ring-offset-2 hover:ring-green-500"></button>
216
+ </div>
217
+ </div>
218
+
219
+ <div>
220
+ <label class="block text-sm font-medium text-gray-700">Design Style</label>
221
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
222
+ <option>Minimalist</option>
223
+ <option>Vintage</option>
224
+ <option>Streetwear</option>
225
+ <option>Sporty</option>
226
+ <option>Luxury</option>
227
+ </select>
228
+ </div>
229
+
230
+ <button class="w-full bg-indigo-600 py-3 px-4 rounded-md text-white font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
231
+ Generate Mockup
232
+ </button>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="relative">
237
+ <div class="relative mx-auto w-full rounded-lg shadow-xl overflow-hidden">
238
+ <img class="w-full" src="https://www.rookus.in/_next/image?url=%2Fimages%2Fmockups%2Ft-shirt_red.webp&w=828&q=75" alt="T-shirt in Red">
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- How It Works Section -->
246
+ <div class="gradient-bg py-16">
247
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
248
+ <div class="lg:text-center">
249
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Process</h2>
250
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
251
+ Create high quality mockups in just three steps
252
+ </p>
253
+ </div>
254
+
255
+ <div class="mt-16">
256
+ <div class="lg:grid lg:grid-cols-3 lg:gap-8">
257
+ <div class="relative">
258
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
259
+ <span class="text-xl font-bold">1</span>
260
+ </div>
261
+ <p class="mt-5 text-lg leading-6 font-medium text-gray-900">Choose what you want to design</p>
262
+ <p class="mt-2 text-base text-gray-600">
263
+ Select from our wide range of clothing types and styles to start your design process.
264
+ </p>
265
+ </div>
266
+
267
+ <div class="mt-10 lg:mt-0 relative">
268
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
269
+ <span class="text-xl font-bold">2</span>
270
+ </div>
271
+ <p class="mt-5 text-lg leading-6 font-medium text-gray-900">Select Parameters</p>
272
+ <p class="mt-2 text-base text-gray-600">
273
+ Customize your design with color, lighting, style and other parameters to match your vision.
274
+ </p>
275
+ </div>
276
+
277
+ <div class="mt-10 lg:mt-0 relative">
278
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
279
+ <span class="text-xl font-bold">3</span>
280
+ </div>
281
+ <p class="mt-5 text-lg leading-6 font-medium text-gray-900">Upload and edit</p>
282
+ <p class="mt-2 text-base text-gray-600">
283
+ Upload your desired image, text and make final edits before generating your perfect mockup.
284
+ </p>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="mt-16 flex justify-center">
289
+ <img class="w-full max-w-3xl rounded-lg shadow-xl" src="https://www.rookus.in/_next/image?url=%2Fimages%2Ftrade%2Fmacbook.png&w=1920&q=75" alt="Macbook with Rookus interface">
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Advanced Features Section -->
296
+ <div class="bg-white py-16">
297
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
298
+ <div class="text-center">
299
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
300
+ An editing suite for a more civilised age
301
+ </h2>
302
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
303
+ "Rookus is redefining design with AI-powered mockup generation, real-time virtual try-ons, and effortless customization—all in under 10 seconds."
304
+ </p>
305
+ </div>
306
+
307
+ <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
308
+ <!-- Feature 1 -->
309
+ <div class="pt-6">
310
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
311
+ <div class="-mt-6">
312
+ <div>
313
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
314
+ <img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Ideate">
315
+ </span>
316
+ </div>
317
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Ideate</h3>
318
+ <p class="mt-5 text-base text-gray-600">
319
+ Brainstorm and conceptualize your designs with our intuitive tools that bring your ideas to life.
320
+ </p>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Feature 2 -->
326
+ <div class="pt-6">
327
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
328
+ <div class="-mt-6">
329
+ <div>
330
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
331
+ <img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Generate">
332
+ </span>
333
+ </div>
334
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Generate</h3>
335
+ <p class="mt-5 text-base text-gray-600">
336
+ Instantly create high-quality mockups with our AI-powered generation technology.
337
+ </p>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Feature 3 -->
343
+ <div class="pt-6">
344
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
345
+ <div class="-mt-6">
346
+ <div>
347
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
348
+ <img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Resample">
349
+ </span>
350
+ </div>
351
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Resample</h3>
352
+ <p class="mt-5 text-base text-gray-600">
353
+ Refine and adjust your designs with precision using our advanced editing tools.
354
+ </p>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Feature 4 -->
360
+ <div class="pt-6">
361
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
362
+ <div class="-mt-6">
363
+ <div>
364
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
365
+ <img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="AI Customization">
366
+ </span>
367
+ </div>
368
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">AI Customization</h3>
369
+ <p class="mt-5 text-base text-gray-600">
370
+ Easily customize images with AI, tweaking colors, styles, and layouts effortlessly. Precision and creativity at your fingertips!
371
+ </p>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Feature 5 -->
377
+ <div class="pt-6">
378
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
379
+ <div class="-mt-6">
380
+ <div>
381
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
382
+ <img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Image Generation">
383
+ </span>
384
+ </div>
385
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Image Generation</h3>
386
+ <p class="mt-5 text-base text-gray-600">
387
+ Create stunning, high-quality images for custom designs in just a few clicks. Perfect for apparel, logos, and unique patterns!
388
+ </p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Feature 6 -->
394
+ <div class="pt-6">
395
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
396
+ <div class="-mt-6">
397
+ <div>
398
+ <span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
399
+ <img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Virtual Try-On">
400
+ </span>
401
+ </div>
402
+ <h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Virtual Try-On</h3>
403
+ <p class="mt-5 text-base text-gray-600">
404
+ See your custom designs in real-time before ordering. Visualize the perfect fit and style effortlessly!
405
+ </p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+
413
+ <!-- Advantages Section -->
414
+ <div class="bg-indigo-900 text-white py-16">
415
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
416
+ <div class="text-center">
417
+ <h2 class="text-3xl font-extrabold sm:text-4xl">
418
+ Revolutionizing Design: The Rookus Advantage
419
+ </h2>
420
+ </div>
421
+
422
+ <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2">
423
+ <div class="bg-indigo-800 p-8 rounded-lg">
424
+ <h3 class="text-xl font-bold">Average design process takes 2-3 days</h3>
425
+ <p class="mt-4 text-indigo-200">
426
+ Meet Rookus, where we bring it down to just 20 seconds. Test our demos and get the Rookus experience.
427
+ </p>
428
+ </div>
429
+
430
+ <div class="bg-indigo-800 p-8 rounded-lg">
431
+ <h3 class="text-xl font-bold">Ideation process is complex</h3>
432
+ <p class="mt-4 text-indigo-200">
433
+ At Rookus, we integrate your creativity with our prompt tuning pipelines to provide the best results.
434
+ </p>
435
+ </div>
436
+
437
+ <div class="bg-indigo-800 p-8 rounded-lg">
438
+ <h3 class="text-xl font-bold">Editing tools are expensive</h3>
439
+ <p class="mt-4 text-indigo-200">
440
+ Our Design suite provides an easy-to-use editing experience, just upload your images and texts, and you are good to go.
441
+ </p>
442
+ </div>
443
+
444
+ <div class="bg-indigo-800 p-8 rounded-lg">
445
+ <h3 class="text-xl font-bold">Professional shoots require expensive software and skill</h3>
446
+ <p class="mt-4 text-indigo-200">
447
+ With our Design suite, professional lighting is just a click away.
448
+ </p>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- Newsletter Section -->
455
+ <div class="bg-white py-16">
456
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
457
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
458
+ <div class="mb-12 lg:mb-0">
459
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
460
+ Want to stay tuned to our latest updates?
461
+ </h2>
462
+ <p class="mt-3 text-xl text-gray-600">
463
+ Subscribe to our newsletter
464
+ </p>
465
+ <p class="mt-2 text-sm text-gray-500">
466
+ Stay updated with the latest news and trends.
467
+ </p>
468
+ </div>
469
+
470
+ <div>
471
+ <form class="sm:flex">
472
+ <label for="email-address" class="sr-only">Email address</label>
473
+ <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs rounded-md" placeholder="Enter your email">
474
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
475
+ <button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
476
+ Subscribe
477
+ </button>
478
+ </div>
479
+ </form>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- Contact Section -->
486
+ <div class="gradient-bg py-16">
487
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
488
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
489
+ <div class="mb-12 lg:mb-0">
490
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
491
+ Get in Touch
492
+ </h2>
493
+ <p class="mt-4 text-lg text-gray-600">
494
+ Have questions or need assistance? Drop your details, and we'll get back to you shortly!
495
+ </p>
496
+
497
+ <div class="mt-8">
498
+ <form class="space-y-6">
499
+ <div>
500
+ <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
501
+ <div class="mt-1">
502
+ <input type="text" name="name" id="name" autocomplete="name" required class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
503
+ </div>
504
+ </div>
505
+
506
+ <div>
507
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
508
+ <div class="mt-1">
509
+ <input type="email" name="email" id="email" autocomplete="email" required class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
510
+ </div>
511
+ </div>
512
+
513
+ <div>
514
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
515
+ <div class="mt-1">
516
+ <textarea id="message" name="message" rows="4" required class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"></textarea>
517
+ </div>
518
+ </div>
519
+
520
+ <div>
521
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
522
+ Send Message
523
+ </button>
524
+ </div>
525
+ </form>
526
+ </div>
527
+ </div>
528
+
529
+ <div>
530
+ <div class="bg-white p-8 rounded-lg shadow-lg">
531
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Frequently Asked Questions (FAQ)</h3>
532
+
533
+ <div class="space-y-4">
534
+ <!-- FAQ Item 1 -->
535
+ <div class="border-b border-gray-200 pb-4 accordion">
536
+ <button class="flex justify-between items-center w-full text-left text-lg font-medium text-gray-900 focus:outline-none">
537
+ <span>How does Rookus work?</span>
538
+ <i class="fas fa-chevron-down transform transition-transform duration-300"></i>
539
+ </button>
540
+ <div class="mt-2 accordion-content">
541
+ <p class="text-gray-600">
542
+ Rookus uses advanced AI algorithms to generate high-quality fashion mockups in seconds. Simply select your clothing type, customize parameters, and let our AI do the rest.
543
+ </p>
544
+ </div>
545
+ </div>
546
+
547
+ <!-- FAQ Item 2 -->
548
+ <div class="border-b border-gray-200 pb-4 accordion">
549
+ <button class="flex justify-between items-center w-full text-left text-lg font-medium text-gray-900 focus:outline-none">
550
+ <span>Is there a free trial available?</span>
551
+ <i class="fas fa-chevron-down transform transition-transform duration-300"></i>
552
+ </button>
553
+ <div class="mt-2 accordion-content">
554
+ <p class="text-gray-600">
555
+ Yes, we offer a free trial with limited features so you can experience the power of Rookus before committing to a paid plan.
556
+ </p>
557
+ </div>
558
+ </div>
559
+
560
+ <!-- FAQ Item 3 -->
561
+ <div class="border-b border-gray-200 pb-4 accordion">
562
+ <button class="flex justify-between items-center w-full text-left text-lg font-medium text-gray-900 focus:outline-none">
563
+ <span>What file formats are supported?</span>
564
+ <i class="fas fa-chevron-down transform transition-transform duration-300"></i>
565
+ </button>
566
+ <div class="mt-2 accordion-content">
567
+ <p class="text-gray-600">
568
+ Rookus supports all major image formats including PNG, JPG, and SVG. You can export your designs in high resolution for professional use.
569
+ </p>
570
+ </div>
571
+ </div>
572
+
573
+ <!-- FAQ Item 4 -->
574
+ <div class="border-b border-gray-200 pb-4 accordion">
575
+ <button class="flex justify-between items-center w-full text-left text-lg font-medium text-gray-900 focus:outline-none">
576
+ <span>Can I use Rookus for commercial purposes?</span>
577
+ <i class="fas fa-chevron-down transform transition-transform duration-300"></i>
578
+ </button>
579
+ <div class="mt-2 accordion-content">
580
+ <p class="text-gray-600">
581
+ Absolutely! All designs created with Rookus can be used for commercial purposes, including selling products with your custom designs.
582
+ </p>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="mt-8 flex justify-center">
588
+ <img class="h-40" src="https://www.rookus.in/images/faq/faq.svg" alt="FAQ Illustration">
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <!-- Footer -->
597
+ <footer class="bg-gray-900 text-white">
598
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
599
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
600
+ <div class="space-y-8 xl:col-span-1">
601
+ <div class="flex items-center">
602
+ <img class="h-8" src="https://www.rookus.in/images/logo/logo.png" alt="Rookus Logo">
603
+ <span class="ml-2 text-xl font-bold">Rookus</span>
604
+ </div>
605
+ <p class="text-gray-400 text-base">
606
+ Where AI meets Fashion
607
+ </p>
608
+ <div class="flex space-x-6">
609
+ <a href="#" class="text-gray-400 hover:text-white">
610
+ <i class="fab fa-facebook-f"></i>
611
+ </a>
612
+ <a href="#" class="text-gray-400 hover:text-white">
613
+ <i class="fab fa-twitter"></i>
614
+ </a>
615
+ <a href="#" class="text-gray-400 hover:text-white">
616
+ <i class="fab fa-instagram"></i>
617
+ </a>
618
+ <a href="#" class="text-gray-400 hover:text-white">
619
+ <i class="fab fa-linkedin-in"></i>
620
+ </a>
621
+ </div>
622
+ </div>
623
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
624
+ <div class="md:grid md:grid-cols-2 md:gap-8">
625
+ <div>
626
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
627
+ Product
628
+ </h3>
629
+ <ul class="mt-4 space-y-4">
630
+ <li>
631
+ <a href="#" class="text-base text-gray-300 hover:text-white">
632
+ Features
633
+ </a>
634
+ </li>
635
+ <li>
636
+ <a href="#" class="text-base text-gray-300 hover:text-white">
637
+ Pricing
638
+ </a>
639
+ </li>
640
+ <li>
641
+ <a href="#" class="text-base text-gray-300 hover:text-white">
642
+ Demo
643
+ </a>
644
+ </li>
645
+ <li>
646
+ <a href="#" class="text-base text-gray-300 hover:text-white">
647
+ Updates
648
+ </a>
649
+ </li>
650
+ </ul>
651
+ </div>
652
+ <div class="mt-12 md:mt-0">
653
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
654
+ Company
655
+ </h3>
656
+ <ul class="mt-4 space-y-4">
657
+ <li>
658
+ <a href="#" class="text-base text-gray-300 hover:text-white">
659
+ About
660
+ </a>
661
+ </li>
662
+ <li>
663
+ <a href="#" class="text-base text-gray-300 hover:text-white">
664
+ Blog
665
+ </a>
666
+ </li>
667
+ <li>
668
+ <a href="#" class="text-base text-gray-300 hover:text-white">
669
+ Careers
670
+ </a>
671
+ </li>
672
+ <li>
673
+ <a href="#" class="text-base text-gray-300 hover:text-white">
674
+ Contact
675
+ </a>
676
+ </li>
677
+ </ul>
678
+ </div>
679
+ </div>
680
+ <div class="md:grid md:grid-cols-2 md:gap-8">
681
+ <div>
682
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
683
+ Legal
684
+ </h3>
685
+ <ul class="mt-4 space-y-4">
686
+ <li>
687
+ <a href="#" class="text-base text-gray-300 hover:text-white">
688
+ Privacy
689
+ </a>
690
+ </li>
691
+ <li>
692
+ <a href="#" class="text-base text-gray-300 hover:text-white">
693
+ Terms
694
+ </a>
695
+ </li>
696
+ <li>
697
+ <a href="#" class="text-base text-gray-300 hover:text-white">
698
+ Cookie Policy
699
+ </a>
700
+ </li>
701
+ </ul>
702
+ </div>
703
+ <div class="mt-12 md:mt-0">
704
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
705
+ Resources
706
+ </h3>
707
+ <ul class="mt-4 space-y-4">
708
+ <li>
709
+ <a href="#" class="text-base text-gray-300 hover:text-white">
710
+ Help Center
711
+ </a>
712
+ </li>
713
+ <li>
714
+ <a href="#" class="text-base text-gray-300 hover:text-white">
715
+ Community
716
+ </a>
717
+ </li>
718
+ <li>
719
+ <a href="#" class="text-base text-gray-300 hover:text-white">
720
+ Tutorials
721
+ </a>
722
+ </li>
723
+ </ul>
724
+ </div>
725
+ </div>
726
+ </div>
727
+ </div>
728
+ <div class="mt-12 border-t border-gray-800 pt-8">
729
+ <p class="text-base text-gray-400 text-center">
730
+ &copy; 2025 - All Rights Reserved by <a href="https://www.rookus.in/" class="text-white hover:text-indigo-300">Rookus.in</a>
731
+ </p>
732
+ </div>
733
+ </div>
734
+ </footer>
735
+
736
+ <script>
737
+ // Accordion functionality
738
+ document.querySelectorAll('.accordion button').forEach(button => {
739
+ button.addEventListener('click', () => {
740
+ const accordion = button.closest('.accordion');
741
+ const icon = button.querySelector('i');
742
+
743
+ accordion.classList.toggle('active');
744
+
745
+ if (accordion.classList.contains('active')) {
746
+ icon.classList.remove('fa-chevron-down');
747
+ icon.classList.add('fa-chevron-up');
748
+ } else {
749
+ icon.classList.remove('fa-chevron-up');
750
+ icon.classList.add('fa-chevron-down');
751
+ }
752
+ });
753
+ });
754
+
755
+ // Mobile menu toggle would go here
756
+ </script>
757
+ </body>
758
+ </html>