Hugging Face's logo

Spaces:
gaur3009
/
standalone_rrokuo
Running

App Files Community
standalone_rrokuo / index.html
gaur3009's picture
gaur3009
Update index.html
3651f5b verified
raw
history blame contribute delete
43.9 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rookus - AI Fashion Design Platform</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.hero-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.mockup-selector {
transition: all 0.3s ease;
}
.mockup-selector:hover {
transform: scale(1.05);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion.active .accordion-content {
max-height: 500px;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<img class="h-8 w-auto" src="https://www.rookus.in/images/logo/logo.png" alt="Rookus Logo">
<span class="ml-2 text-xl font-bold text-indigo-600">Rookus</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<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>
<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>
<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>
<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>
<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>
</div>
<div class="-mr-2 flex items-center md:hidden">
<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">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="hero-gradient text-white">
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">
<span class="block">AI-powered Designing</span>
<span class="block text-indigo-200">Solution for Fashion</span>
</h1>
<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">
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.
</p>
<div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<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">
Get Started
</a>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<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">
Live Demo
</a>
</div>
</div>
</div>
</div>
<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">
<div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
<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">
</div>
</div>
</div>
</div>
</div>
<!-- Trusted By Section -->
<div class="bg-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide">Trusted by industry leaders</p>
<div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6">
<div class="col-span-1 flex justify-center">
<img class="h-12" src="https://www.rookus.in/images/companies/Denim.jpg" alt="Denim">
</div>
<div class="col-span-1 flex justify-center">
<img class="h-12" src="https://www.rookus.in/images/companies/Sport.jpg" alt="Sport">
</div>
<div class="col-span-1 flex justify-center">
<img class="h-12" src="https://www.rookus.in/images/companies/Fictional.jpeg" alt="Fictional">
</div>
<div class="col-span-1 flex justify-center">
<img class="h-12" src="https://www.rookus.in/images/companies/Jungle.jpg" alt="Jungle">
</div>
<div class="col-span-1 flex justify-center">
<img class="h-12" src="https://www.rookus.in/images/companies/Techy.jpeg" alt="Techy">
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="gradient-bg py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Seamless Mockup Generation
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto">
Rookus Xpress is our cutting-edge, high-precision generation tool designed to revolutionize the fashion industry.
</p>
</div>
<div class="mt-20">
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
<!-- Feature 1 -->
<div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
<div class="absolute -top-6 left-6 bg-indigo-500 p-3 rounded-lg shadow-lg">
<img class="h-6 w-6" src="https://www.rookus.in/images/work/accuracy.png" alt="Accuracy">
</div>
<h3 class="mt-4 text-xl font-medium text-gray-900">Unmatched Accuracy</h3>
<p class="mt-2 text-base text-gray-600">
High Precision Tool trained on 1B parameters to provide the most accurate results.
</p>
<div class="mt-4">
<img class="h-8 w-auto" src="https://www.rookus.in/images/icons/bg-arrow.svg" alt="Arrow">
</div>
</div>
<!-- Feature 2 -->
<div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
<div class="absolute -top-6 left-6 bg-indigo-500 p-3 rounded-lg shadow-lg">
<img class="h-6 w-6" src="https://www.rookus.in/images/work/icon-two.svg" alt="Speed">
</div>
<h3 class="mt-4 text-xl font-medium text-gray-900">Lightning-Fast Generation</h3>
<p class="mt-2 text-base text-gray-600">
Rookus Xpress enables lightning-fast mockup generation, streamlining your design process for maximum efficiency.
</p>
<div class="mt-4">
<img class="h-8 w-auto" src="https://www.rookus.in/images/icons/bg-arrow.svg" alt="Arrow">
</div>
</div>
<!-- Feature 3 -->
<div class="feature-card relative bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out">
<div class="absolute -top-6 left-6 bg-indigo-500 p-3 rounded-lg shadow-lg">
<img class="h-6 w-6" src="https://www.rookus.in/images/features/featureOne.svg" alt="Customization">
</div>
<h3 class="mt-4 text-xl font-medium text-gray-900">Customizable Outputs</h3>
<p class="mt-2 text-base text-gray-600">
Rookus Xpress offers highly customizable outputs, allowing you to tailor designs to your exact specifications.
</p>
<div class="mt-4">
<img class="h-8 w-auto" src="https://www.rookus.in/images/icons/bg-arrow.svg" alt="Arrow">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mockup Generator Section -->
<div class="bg-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
<div class="mb-12 lg:mb-0">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Rookus Mockup Generator
</h2>
<p class="mt-3 text-lg text-gray-600">
Generate high-quality clothing mockups instantly
</p>
<div class="mt-8 space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">Clothing Type</label>
<div class="mt-2 grid grid-cols-3 gap-4">
<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>
<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>
<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>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Color</label>
<div class="mt-2 grid grid-cols-5 gap-2">
<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>
<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>
<button class="mockup-selector h-8 w-8 rounded-full bg-black hover:ring-2 hover:ring-offset-2 hover:ring-black"></button>
<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>
<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>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Design Style</label>
<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">
<option>Minimalist</option>
<option>Vintage</option>
<option>Streetwear</option>
<option>Sporty</option>
<option>Luxury</option>
</select>
</div>
<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">
Generate Mockup
</button>
</div>
</div>
<div class="relative">
<div class="relative mx-auto w-full rounded-lg shadow-xl overflow-hidden">
<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">
</div>
</div>
</div>
</div>
</div>
<!-- How It Works Section -->
<div class="gradient-bg py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Process</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
Create high quality mockups in just three steps
</p>
</div>
<div class="mt-16">
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
<div class="relative">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<span class="text-xl font-bold">1</span>
</div>
<p class="mt-5 text-lg leading-6 font-medium text-gray-900">Choose what you want to design</p>
<p class="mt-2 text-base text-gray-600">
Select from our wide range of clothing types and styles to start your design process.
</p>
</div>
<div class="mt-10 lg:mt-0 relative">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<span class="text-xl font-bold">2</span>
</div>
<p class="mt-5 text-lg leading-6 font-medium text-gray-900">Select Parameters</p>
<p class="mt-2 text-base text-gray-600">
Customize your design with color, lighting, style and other parameters to match your vision.
</p>
</div>
<div class="mt-10 lg:mt-0 relative">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<span class="text-xl font-bold">3</span>
</div>
<p class="mt-5 text-lg leading-6 font-medium text-gray-900">Upload and edit</p>
<p class="mt-2 text-base text-gray-600">
Upload your desired image, text and make final edits before generating your perfect mockup.
</p>
</div>
</div>
<div class="mt-16 flex justify-center">
<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">
</div>
</div>
</div>
</div>
<!-- Advanced Features Section -->
<div class="bg-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
An editing suite for a more civilised age
</h2>
<p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
"Rookus is redefining design with AI-powered mockup generation, real-time virtual try-ons, and effortless customization—all in under 10 seconds."
</p>
</div>
<div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
<img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Ideate">
</span>
</div>
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Ideate</h3>
<p class="mt-5 text-base text-gray-600">
Brainstorm and conceptualize your designs with our intuitive tools that bring your ideas to life.
</p>
</div>
</div>
</div>
<!-- Feature 2 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
<img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Generate">
</span>
</div>
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Generate</h3>
<p class="mt-5 text-base text-gray-600">
Instantly create high-quality mockups with our AI-powered generation technology.
</p>
</div>
</div>
</div>
<!-- Feature 3 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
<img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Resample">
</span>
</div>
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Resample</h3>
<p class="mt-5 text-base text-gray-600">
Refine and adjust your designs with precision using our advanced editing tools.
</p>
</div>
</div>
</div>
<!-- Feature 4 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
<img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="AI Customization">
</span>
</div>
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">AI Customization</h3>
<p class="mt-5 text-base text-gray-600">
Easily customize images with AI, tweaking colors, styles, and layouts effortlessly. Precision and creativity at your fingertips!
</p>
</div>
</div>
</div>
<!-- Feature 5 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
<img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Image Generation">
</span>
</div>
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Image Generation</h3>
<p class="mt-5 text-base text-gray-600">
Create stunning, high-quality images for custom designs in just a few clicks. Perfect for apparel, logos, and unique patterns!
</p>
</div>
</div>
</div>
<!-- Feature 6 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg">
<img class="h-6 w-6" src="https://www.rookus.in/images/features/featureThree.svg" alt="Virtual Try-On">
</span>
</div>
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Virtual Try-On</h3>
<p class="mt-5 text-base text-gray-600">
See your custom designs in real-time before ordering. Visualize the perfect fit and style effortlessly!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Advantages Section -->
<div class="bg-indigo-900 text-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold sm:text-4xl">
Revolutionizing Design: The Rookus Advantage
</h2>
</div>
<div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2">
<div class="bg-indigo-800 p-8 rounded-lg">
<h3 class="text-xl font-bold">Average design process takes 2-3 days</h3>
<p class="mt-4 text-indigo-200">
Meet Rookus, where we bring it down to just 20 seconds. Test our demos and get the Rookus experience.
</p>
</div>
<div class="bg-indigo-800 p-8 rounded-lg">
<h3 class="text-xl font-bold">Ideation process is complex</h3>
<p class="mt-4 text-indigo-200">
At Rookus, we integrate your creativity with our prompt tuning pipelines to provide the best results.
</p>
</div>
<div class="bg-indigo-800 p-8 rounded-lg">
<h3 class="text-xl font-bold">Editing tools are expensive</h3>
<p class="mt-4 text-indigo-200">
Our Design suite provides an easy-to-use editing experience, just upload your images and texts, and you are good to go.
</p>
</div>
<div class="bg-indigo-800 p-8 rounded-lg">
<h3 class="text-xl font-bold">Professional shoots require expensive software and skill</h3>
<p class="mt-4 text-indigo-200">
With our Design suite, professional lighting is just a click away.
</p>
</div>
</div>
</div>
</div>
<!-- Newsletter Section -->
<div class="bg-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
<div class="mb-12 lg:mb-0">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Want to stay tuned to our latest updates?
</h2>
<p class="mt-3 text-xl text-gray-600">
Subscribe to our newsletter
</p>
<p class="mt-2 text-sm text-gray-500">
Stay updated with the latest news and trends.
</p>
</div>
<div>
<form class="sm:flex">
<label for="email-address" class="sr-only">Email address</label>
<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">
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<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">
Subscribe
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="gradient-bg py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-8">
<div class="mb-12 lg:mb-0">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Get in Touch
</h2>
<p class="mt-4 text-lg text-gray-600">
Have questions or need assistance? Drop your details, and we'll get back to you shortly!
</p>
<div class="mt-8">
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<div class="mt-1">
<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">
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<div class="mt-1">
<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">
</div>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
<div class="mt-1">
<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>
</div>
</div>
<div>
<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">
Send Message
</button>
</div>
</form>
</div>
</div>
<div>
<div class="bg-white p-8 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold text-gray-900 mb-6">Frequently Asked Questions (FAQ)</h3>
<div class="space-y-4">
<!-- FAQ Item 1 -->
<div class="border-b border-gray-200 pb-4 accordion">
<button class="flex justify-between items-center w-full text-left text-lg font-medium text-gray-900 focus:outline-none">
<span>How does Rookus work?</span>
<i class="fas fa-chevron-down transform transition-transform duration-300"></i>
</button>
<div class="mt-2 accordion-content">
<p class="text-gray-600">
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.
</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="border-b border-gray-200 pb-4 accordion">
<button class="flex justify-between items-center w-full text-left text-lg font-medium text-gray-900 focus:outline-none">
<span>Is there a free trial available?</span>
<i class="fas fa-chevron-down transform transition-transform duration-300"></i>
</button>
<div class="mt-2 accordion-content">
<p class="text-gray-600">
Yes, we offer a free trial with limited features so you can experience the power of Rookus before committing to a paid plan.
</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="border-b border-gray-200 pb-4 accordion">
<button class="flex justify-between items-center w-full text-left text-lg font-medium text-gray-900 focus:outline-none">
<span>What file formats are supported?</span>
<i class="fas fa-chevron-down transform transition-transform duration-300"></i>
</button>
<div class="mt-2 accordion-content">
<p class="text-gray-600">
Rookus supports all major image formats including PNG, JPG, and SVG. You can export your designs in high resolution for professional use.
</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="border-b border-gray-200 pb-4 accordion">
<button class="flex justify-between items-center w-full text-left text-lg font-medium text-gray-900 focus:outline-none">
<span>Can I use Rookus for commercial purposes?</span>
<i class="fas fa-chevron-down transform transition-transform duration-300"></i>
</button>
<div class="mt-2 accordion-content">
<p class="text-gray-600">
Absolutely! All designs created with Rookus can be used for commercial purposes, including selling products with your custom designs.
</p>
</div>
</div>
</div>
<div class="mt-8 flex justify-center">
<img class="h-40" src="https://www.rookus.in/images/faq/faq.svg" alt="FAQ Illustration">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8 xl:col-span-1">
<div class="flex items-center">
<img class="h-8" src="https://www.rookus.in/images/logo/logo.png" alt="Rookus Logo">
<span class="ml-2 text-xl font-bold">Rookus</span>
</div>
<p class="text-gray-400 text-base">
Where AI meets Fashion
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Product
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Features
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Pricing
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Demo
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Updates
</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Company
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
About
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Blog
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Careers
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Contact
</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Legal
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Privacy
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Terms
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Cookie Policy
</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Resources
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Help Center
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Community
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Tutorials
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-12 border-t border-gray-800 pt-8">
<p class="text-base text-gray-400 text-center">
&copy; 2025 - All Rights Reserved by <a href="https://www.rookus.in/" class="text-white hover:text-indigo-300">Rookus.in</a>
</p>
</div>
</div>
</footer>
<script>
// Accordion functionality
document.querySelectorAll('.accordion button').forEach(button => {
button.addEventListener('click', () => {
const accordion = button.closest('.accordion');
const icon = button.querySelector('i');
accordion.classList.toggle('active');
if (accordion.classList.contains('active')) {
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
} else {
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
}
});
});
// Mobile menu toggle would go here
</script>
</body>
</html>