crystall ballmetaschoolimage
HomeimageTemplatesimageAiimageCss-generator-gpt

0xmetaschool/ CSSGeneratorGPT

CSSGeneratorGPT is the perfect tool for developers and designers who want to bring their raw HTML to life. With just a few clicks, this AI-powered template takes your plain HTML and styles it beautifully, so you don't have to spend hours coding CSS from scratch or hunting for design ideas. It is built with Next.js and OpenAI API. Whether you're building something new or want to make your website prettier, this template turns your basic website into something that looks amazing.

ForkFork5
Readme
Source Code
app
api
components
css-generator
globals.css
layout.js
page.js
.gitignore
jsconfig.json
LICENSE
next.config.mjs
package.json
postcss.config.mjs
README.md
tailwind.config.js
appseparatorpage.js
1"use client" 2import React from 'react'; 3import Link from "next/link"; 4import { useEffect, useRef, useState } from 'react'; 5 6function useScrollAnimation() { 7 const ref = useRef(null); 8 const [isVisible, setIsVisible] = useState(false); 9 10 useEffect(() => { 11 const observer = new IntersectionObserver( 12 ([entry]) => { 13 if (entry.isIntersecting) { 14 setIsVisible(true); 15 observer.unobserve(entry.target); 16 } 17 }, 18 { 19 threshold: 0.1 20 } 21 ); 22 23 if (ref.current) { 24 observer.observe(ref.current); 25 } 26 27 return () => { 28 if (ref.current) { 29 observer.unobserve(ref.current); 30 } 31 }; 32 }, []); 33 34 return [ref, isVisible]; 35} 36 37export default function Home() { 38 return ( 39 <main className="min-h-screen bg-black"> 40 {/* Hero Section */} 41 <section className="container mx-auto pt-20 pb-32 text-center relative overflow-hidden"> 42 {/* Decorative background elements */} 43 <div className="absolute inset-0 opacity-5"> 44 <div className="absolute top-20 left-10 text-4xl font-mono text-white">.css {}</div> 45 <div className="absolute top-40 right-20 text-4xl font-mono text-white">#style {}</div> 46 <div className="absolute bottom-20 left-1/4 text-4xl font-mono text-white">.transform {}</div> 47 </div> 48 49 {/* Main content */} 50 <div className="relative z-10"> 51 <div className="flex items-center justify-center mb-6"> 52 <h1 className="text-7xl font-bold relative"> 53 <span className="text-white">AI CSS Generator</span> 54 <div className="absolute -top-6 -right-6 text-4xl animate-bounce"></div> 55 </h1> 56 </div> 57 58 <p className="text-2xl text-gray-400 mb-12 max-w-2xl mx-auto font-light"> 59 Transform your plain HTML into beautifully styled masterpieces with our 60 AI-powered CSS generator. 61 </p> 62 63 <div className="flex justify-center gap-6"> 64 <Link href="/css-generator"> 65 <button className="group relative px-8 py-4 rounded-full text-xl font-bold bg-gradient-to-r from-gray-600 to-gray-600 text-white hover:opacity-90 transition-all duration-200 shadow-lg hover:shadow-xl"> 66 Start Styling 67 <div className="absolute inset-0 rounded-full bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></div> 68 </button> 69 </Link> 70 </div> 71 72 {/* Website Preview mockups */} 73 <div className="mt-16 mx-auto max-w-6xl px-4"> 74 <div className="grid grid-cols-1 md:grid-cols-2 gap-8"> 75 {/* Before Website */} 76 <div className="relative group bg-gray-900 rounded-xl shadow-lg overflow-hidden animate-fade-in border border-gray-800"> 77 <div className="absolute top-0 right-0 bg-gray-800 text-gray-400 text-xs px-3 py-1 rounded-bl-lg"> 78 Before 79 </div> 80 <div className="bg-gray-800 px-4 py-2 border-b border-gray-700 flex items-center"> 81 <div className="flex gap-2"> 82 <div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse"></div> 83 <div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse delay-100"></div> 84 <div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse delay-200"></div> 85 </div> 86 </div> 87 <div className="p-4"> 88 <div className="space-y-4 text-left"> 89 <div className="h-8 bg-gray-800 w-1/2 flex items-center px-3 animate-slide-in-left"> 90 <span className="text-gray-400">Travel Blog</span> 91 </div> 92 <div className="h-4 bg-gray-800 w-full flex items-center px-3 animate-slide-in-left delay-100"> 93 <span className="text-gray-400 text-sm">Discover amazing destinations and adventures</span> 94 </div> 95 <div className="h-4 bg-gray-800 w-3/4 flex items-center px-3 animate-slide-in-left delay-200"> 96 <span className="text-gray-400 text-sm">Join our community of travelers</span> 97 </div> 98 <div className="grid grid-cols-2 gap-4 mt-6"> 99 <div className="h-20 bg-gray-800 p-2 animate-fade-in delay-300 hover:bg-gray-700 transition-colors"> 100 <span className="text-gray-400 text-sm">Japan Guide</span> 101 </div> 102 <div className="h-20 bg-gray-800 p-2 animate-fade-in delay-400 hover:bg-gray-700 transition-colors"> 103 <span className="text-gray-400 text-sm">Paris Guide</span> 104 </div> 105 </div> 106 <div className="h-12 bg-gray-800 w-1/4 flex items-center justify-center animate-bounce-in delay-500"> 107 <span className="text-gray-400">Read More</span> 108 </div> 109 </div> 110 </div> 111 </div> 112 113 {/* After Website */} 114 <div className="relative group bg-gray-900 rounded-xl shadow-xl overflow-hidden animate-fade-in transform hover:scale-[1.02] transition-all duration-300 border border-gray-800"> 115 <div className="absolute top-0 right-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white text-xs px-3 py-1 rounded-bl-lg"> 116 After 117 </div> 118 <div className="bg-gray-800 px-4 py-3 border-b border-gray-700 flex items-center justify-between"> 119 <div className="flex gap-2"> 120 <div className="w-3 h-3 rounded-full bg-red-400 animate-glow"></div> 121 <div className="w-3 h-3 rounded-full bg-yellow-400 animate-glow delay-100"></div> 122 <div className="w-3 h-3 rounded-full bg-green-400 animate-glow delay-200"></div> 123 </div> 124 </div> 125 <div className="p-6 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"> 126 <div className="space-y-6 text-left"> 127 <div className="group animate-slide-up"> 128 <div className="h-10 bg-gradient-to-r from-purple-600 to-blue-600 w-1/2 rounded-xl shadow-lg flex items-center justify-center relative overflow-hidden"> 129 <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> 130 <span className="text-white font-bold relative z-10">Travel Blog</span> 131 </div> 132 </div> 133 134 <div className="space-y-3"> 135 <div className="h-auto bg-gray-800 bg-opacity-90 backdrop-blur-sm w-full rounded-xl flex items-center p-4 shadow-lg animate-slide-in-right border border-gray-700"> 136 <div className="flex items-center"> 137 <span className="text-2xl mr-3 animate-bounce">✈️</span> 138 <div> 139 <span className="text-white font-medium">Embark on extraordinary journeys</span> 140 <p className="text-gray-400 text-sm mt-1">Discover hidden gems and iconic landmarks worldwide</p> 141 </div> 142 </div> 143 </div> 144 145 <div className="h-auto bg-gray-800 bg-opacity-90 backdrop-blur-sm w-3/4 rounded-xl flex items-center p-4 shadow-lg animate-slide-in-right delay-100 border border-gray-700"> 146 <div className="flex items-center"> 147 <span className="text-2xl mr-3 animate-pulse">🌟</span> 148 <div> 149 <span className="text-white font-medium">Join our explorer community</span> 150 <p className="text-gray-400 text-sm mt-1">Connect with 10,000+ passionate travelers</p> 151 </div> 152 </div> 153 </div> 154 </div> 155 156 <div className="grid grid-cols-2 gap-4 mt-8"> 157 <div className="group h-auto bg-gray-800 rounded-xl shadow-lg p-4 animate-slide-up delay-200 transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300 border border-gray-700"> 158 <div className="flex items-center mb-2"> 159 <span className="text-lg mr-2 animate-wave">🗾</span> 160 <span className="text-white font-semibold">Japan Guide</span> 161 </div> 162 <p className="text-gray-400 text-sm">Explore ancient temples & modern cities</p> 163 <div className="mt-2 w-1/2 h-1 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full group-hover:w-full transition-all duration-300"></div> 164 </div> 165 166 <div className="group h-auto bg-gray-800 rounded-xl shadow-lg p-4 animate-slide-up delay-300 transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300 border border-gray-700"> 167 <div className="flex items-center mb-2"> 168 <span className="text-lg mr-2 animate-wave delay-100">🗼</span> 169 <span className="text-white font-semibold">Paris Guide</span> 170 </div> 171 <p className="text-gray-400 text-sm">Experience the city of lights</p> 172 <div className="mt-2 w-1/2 h-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full group-hover:w-full transition-all duration-300"></div> 173 </div> 174 </div> 175 176 <button className="group h-12 bg-gradient-to-r from-purple-600 to-blue-600 w-1/3 rounded-full shadow-lg flex items-center justify-center animate-bounce-in delay-500 transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300"> 177 <span className="text-white font-semibold mr-2">Read More</span> 178 <span className="text-white opacity-0 group-hover:opacity-100 transform translate-x-[-10px] group-hover:translate-x-0 transition-all duration-300">→</span> 179 </button> 180 </div> 181 </div> 182 </div> 183 </div> 184 </div> 185 </div> 186 </section> 187 188 {/* Replace the Features Section with this enhanced version */} 189 190<section id="features" className="py-20 bg-gray-900"> 191 <div className="container mx-auto px-4"> 192 <h2 className="text-3xl font-bold text-center mb-16 text-white"> 193 Three Steps to Beautiful Code 194 </h2> 195 196 <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-2"> 197 {/* Step 1 */} 198 <div className="group w-full md:w-1/3 p-8 rounded-2xl bg-gray-800 border border-gray-700 hover:shadow-xl transition-all duration-300 animate-fade-in"> 199 <div className="mb-6 text-4xl font-mono text-white"> 200 {'</>'} 201 </div> 202 <h3 className="text-2xl font-bold mb-4 text-white"> 203 1. Paste Your Code 204 </h3> 205 <p className="text-gray-400 leading-relaxed"> 206 Share your HTML code with our AI stylist. No matter how plain 207 it looks, we'll transform it into something extraordinary. 208 </p> 209 </div> 210 211 {/* Arrow 1 */} 212 <div className="hidden md:flex w-12 items-center justify-center animate-fade-in delay-200"> 213 <div className="w-12 h-12 relative"> 214 <div className="absolute inset-0 bg-gradient-to-r from-gray-600 to-black-600 rounded-full animate-pulse"></div> 215 <div className="absolute inset-0 flex items-center justify-center text-white text-2xl transform group-hover:translate-x-1 transition-transform"> 216 → 217 </div> 218 </div> 219 </div> 220 221 {/* Step 2 */} 222 <div className="group w-full md:w-1/3 p-8 rounded-2xl bg-gray-800 border border-gray-700 hover:shadow-xl transition-all duration-300 animate-fade-in delay-300"> 223 <div className="mb-6 text-4xl text-white"> 224 ⌨️ 225 </div> 226 <h3 className="text-2xl font-bold mb-4 text-white"> 227 2. Describe Your Vision 228 </h3> 229 <p className="text-gray-400 leading-relaxed"> 230 Tell us your design preferences in plain English. Our AI understands 231 and translates your vision into beautiful CSS. 232 </p> 233 </div> 234 235 {/* Arrow 2 */} 236 <div className="hidden md:flex w-12 items-center justify-center animate-fade-in delay-500"> 237 <div className="w-12 h-12 relative"> 238 <div className="absolute inset-0 bg-gradient-to-r from-gray-600 to-black-600 rounded-full animate-pulse delay-200"></div> 239 <div className="absolute inset-0 flex items-center justify-center text-white text-2xl transform group-hover:translate-x-1 transition-transform"> 240 → 241 </div> 242 </div> 243 </div> 244 245 {/* Step 3 */} 246 <div className="group w-full md:w-1/3 p-8 rounded-2xl bg-gray-800 border border-gray-700 hover:shadow-xl transition-all duration-300 animate-fade-in delay-600"> 247 <div className="mb-6 text-4xl text-white"> 248 ✓ 249 </div> 250 <h3 className="text-2xl font-bold mb-4 text-white"> 251 3. Get Styled Code 252 </h3> 253 <p className="text-gray-400 leading-relaxed"> 254 Review your transformed design with professional CSS styles. 255 Keep refining until it's pixel-perfect. 256 </p> 257 </div> 258 </div> 259 260 {/* Mobile arrows for responsive design */} 261 <div className="flex md:hidden justify-center my-4"> 262 <div className="w-8 h-8 flex items-center justify-center"> 263 <div className="transform rotate-90 text-white text-2xl">→</div> 264 </div> 265 </div> 266 </div> 267</section> 268 269 {/* Transform Section */} 270 <section className="py-20 bg-black"> 271 <div className="container mx-auto px-4"> 272 <h2 className="text-4xl font-bold text-center mb-4 text-white animate-fade-in"> 273 Transform Any Design 274 </h2> 275 <p className="text-xl text-gray-400 text-center mb-16 max-w-3xl mx-auto animate-fade-in delay-100"> 276 From simple components to complex layouts, watch your HTML transform into modern, beautiful designs. 277 </p> 278 279 <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> 280 {/* Card Component Example */} 281 <div className="rounded-xl overflow-hidden shadow-lg group animate-fade-in delay-100 border border-gray-800"> 282 <div className="bg-gray-900 px-4 py-2 text-gray-400 text-sm font-mono flex justify-between items-center border-b border-gray-800"> 283 <span>Card Component</span> 284 <div className="flex gap-2"> 285 <div className="w-3 h-3 rounded-full bg-red-400"></div> 286 <div className="w-3 h-3 rounded-full bg-yellow-400"></div> 287 <div className="w-3 h-3 rounded-full bg-green-400"></div> 288 </div> 289 </div> 290 <div className="grid grid-rows-2 h-64"> 291 {/* Before */} 292 <div className="bg-gray-900 p-6 flex items-center justify-center border-b border-gray-800"> 293 <div className="w-full h-full bg-gray-800 p-4 rounded-lg"> 294 <div className="flex items-start space-x-4"> 295 <div className="w-12 h-12 bg-gray-700 rounded-lg flex-shrink-0"></div> 296 <div className="flex-1"> 297 <div className="h-4 bg-gray-700 w-3/4 mb-2 rounded"></div> 298 <div className="h-3 bg-gray-700 w-full mb-2 rounded"></div> 299 <div className="h-3 bg-gray-700 w-2/3 rounded"></div> 300 </div> 301 </div> 302 <div className="mt-4 flex justify-between items-center"> 303 <div className="h-6 bg-gray-700 w-20 rounded"></div> 304 <div className="h-6 bg-gray-700 w-6 rounded"></div> 305 </div> 306 </div> 307 </div> 308 309 {/* After */} 310 <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-6 flex items-center justify-center"> 311 <div className="w-full h-full bg-gray-800 rounded-xl shadow-lg p-4 hover:shadow-xl transition-all duration-300 group/card border border-gray-700"> 312 <div className="flex items-start space-x-4"> 313 <div className="w-12 h-12 rounded-lg flex-shrink-0 overflow-hidden relative"> 314 <div className="absolute inset-0 bg-gradient-to-br from-purple-600 to-blue-600 animate-pulse"></div> 315 <div className="absolute inset-0 bg-gradient-to-tr from-blue-600/50 to-transparent animate-pulse delay-100"></div> 316 </div> 317 <div className="flex-1 space-y-2"> 318 <div className="h-4 bg-gradient-to-r from-purple-600 to-blue-600 w-3/4 rounded-full transform group-hover/card:scale-95 transition-transform duration-300"></div> 319 <div className="space-y-1"> 320 <div className="h-3 bg-gradient-to-r from-blue-600/60 to-purple-600/60 w-full rounded-full transform group-hover/card:translate-x-1 transition-transform duration-300"></div> 321 <div className="h-3 bg-gradient-to-r from-purple-600/40 to-blue-600/40 w-2/3 rounded-full transform group-hover/card:translate-x-2 transition-transform duration-300"></div> 322 </div> 323 </div> 324 </div> 325 <div className="mt-4 flex justify-between items-center"> 326 <div className="relative overflow-hidden h-8"> 327 <div className="h-full px-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full flex items-center"> 328 329 </div> 330 <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full opacity-0 group-hover/card:opacity-100 transition-opacity duration-300"></div> 331 </div> 332 <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center group-hover/card:rotate-45 transition-transform duration-300"> 333 </div> 334 </div> 335 </div> 336 </div> 337 </div> 338 </div> 339 340 {/* Button Component Example */} 341 <div className="rounded-xl overflow-hidden shadow-lg group animate-fade-in border border-gray-800"> 342 <div className="bg-gray-900 px-4 py-2 text-gray-400 text-sm font-mono flex justify-between items-center border-b border-gray-800"> 343 <span>Button Component</span> 344 <div className="flex gap-2"> 345 <div className="w-3 h-3 rounded-full bg-red-400"></div> 346 <div className="w-3 h-3 rounded-full bg-yellow-400"></div> 347 <div className="w-3 h-3 rounded-full bg-green-400"></div> 348 </div> 349 </div> 350 <div className="grid grid-rows-2 h-64"> 351 {/* Before */} 352 <div className="bg-gray-900 p-6 flex items-center justify-center border-b border-gray-800"> 353 <button className="px-4 py-2 bg-gray-800 text-gray-400 border border-gray-700"> 354 Click me 355 </button> 356 </div> 357 {/* After */} 358 <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-6 flex items-center justify-center"> 359 <button className="group px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full text-white font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 flex items-center gap-2"> 360 Click me 361 <span className="transform group-hover:translate-x-1 transition-transform duration-200">→</span> 362 </button> 363 </div> 364 </div> 365 </div> 366 367 {/* Form Input Example */} 368 <div className="rounded-xl overflow-hidden shadow-lg group animate-fade-in delay-200 border border-gray-800"> 369 <div className="bg-gray-900 px-4 py-2 text-gray-400 text-sm font-mono flex justify-between items-center border-b border-gray-800"> 370 <span>Form Input</span> 371 <div className="flex gap-2"> 372 <div className="w-3 h-3 rounded-full bg-red-400"></div> 373 <div className="w-3 h-3 rounded-full bg-yellow-400"></div> 374 <div className="w-3 h-3 rounded-full bg-green-400"></div> 375 </div> 376 </div> 377 <div className="grid grid-rows-2 h-64"> 378 {/* Before */} 379 <div className="bg-gray-900 p-6 flex items-center justify-center border-b border-gray-800"> 380 <div className="w-full"> 381 <label className="block text-gray-400 mb-1">Email</label> 382 <input 383 type="email" 384 className="w-full bg-gray-800 border border-gray-700 px-3 py-2 text-gray-300" 385 placeholder="Enter your email" 386 /> 387 </div> 388 </div> 389 {/* After */} 390 <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-6 flex items-center justify-center"> 391 <div className="w-full group"> 392 <label className="block text-gray-300 font-medium mb-2 transition-colors duration-200">Email</label> 393 <div className="relative"> 394 <input 395 type="email" 396 className="w-full px-4 py-3 rounded-lg bg-gray-800 border-2 border-transparent text-white focus:border-purple-600 focus:outline-none transition-all duration-200" 397 placeholder="Enter your email" 398 /> 399 <div className="absolute inset-0 border border-gradient-to-r from-purple-600 to-blue-600 opacity-0 group-hover:opacity-100 rounded-lg pointer-events-none transition-opacity duration-200"></div> 400 </div> 401 </div> 402 </div> 403 </div> 404 </div> 405 </div> 406 407 {/* Additional Info */} 408 </div> 409 </section> 410 411 {/* CTA Section */} 412 <section className="py-24 relative bg-black text-white"> 413 <div className="absolute inset-0" style={{ 414 backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', 415 backgroundSize: '40px 40px', 416 opacity: 0.1 417 }} /> 418 <div className="container mx-auto px-4 relative max-w-3xl text-center"> 419 <h2 className="text-5xl font-bold mb-6"> 420 Transform Your HTML to Stunning CSS 421 </h2> 422 <p className="text-xl text-white/80 mb-12"> 423 Seamlessly convert raw HTML into beautifully styled CSS. Let AI bring your web designs to life effortlessly. 424 </p> 425 <div className="inline-flex gap-8"> 426 <Link 427 href="/css-generator" 428 className="bg-white text-black px-8 py-4 rounded-xl 429 font-semibold hover:bg-gray-100 transition-all duration-300 430 transform hover:-translate-y-1 shadow-lg hover:shadow-xl 431 text-lg" 432 > 433 Start Generating CSS 434 </Link> 435 </div> 436 </div> 437</section> 438 439 440 <style jsx global>{` 441 @keyframes fade-in { 442 from { opacity: 0; } 443 to { opacity: 1; } 444 } 445 446 @keyframes slide-in-left { 447 from { transform: translateX(-100%); opacity: 0; } 448 to { transform: translateX(0); opacity: 1; } 449 } 450 451 @keyframes slide-in-right { 452 from { transform: translateX(100%); opacity: 0; } 453 to { transform: translateX(0); opacity: 1; } 454 } 455 456 @keyframes slide-up { 457 from { transform: translateY(20px); opacity: 0; } 458 to { transform: translateY(0); opacity: 1; } 459 } 460 461 @keyframes bounce-in { 462 0% { transform: scale(0); opacity: 0; } 463 50% { transform: scale(1.1); } 464 100% { transform: scale(1); opacity: 1; } 465 } 466 467 @keyframes glow { 468 0% { opacity: 0.4; } 469 50% { opacity: 1; } 470 100% { opacity: 0.4; } 471 } 472 473 @keyframes wave { 474 0% { transform: rotate(0deg); } 475 20% { transform: rotate(-10deg); } 476 40% { transform: rotate(10deg); } 477 60% { transform: rotate(-10deg); } 478 80% { transform: rotate(10deg); } 479 100% { transform: rotate(0deg); } 480 } 481 482 .animate-fade-in { animation: fade-in 0.5s ease-out; } 483 .animate-slide-in-left { animation: slide-in-left 0.5s ease-out; } 484 .animate-slide-in-right { animation: slide-in-right 0.5s ease-out; } 485 .animate-slide-up { animation: slide-up 0.5s ease-out; } 486 .animate-bounce-in { animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } 487 .animate-glow { animation: glow 2s ease-in-out infinite; } 488 .animate-wave { animation: wave 2s ease-in-out infinite; } 489 490 .delay-100 { animation-delay: 100ms; } 491 .delay-200 { animation-delay: 200ms; } 492 .delay-300 { animation-delay: 300ms; } 493 .delay-400 { animation-delay: 400ms; } 494 .delay-500 { animation-delay: 500ms; } 495 `}</style> 496 </main> 497 ); 498}
Downloads

0

Version

1.0.0

License

MIT

Platform

OpenAI GPT-4

Contributors 8
AveekGoyal
akshata0708
AkshataM17
aveek-goyal
fareeha25
fareeha1125
Ash20pk
pashmeenanoor0x
Open in

Last updated 3 months ago

We are a open source platform and encourage community to contribute to these templates!
Contribute Now