Spaces:

M0zzi
/

applaunch-fiesta

Running

App Files Files Community

M0zzi commited on Nov 10, 2025

Commit

88936f7

verified ·

1 Parent(s): 4d53e0c

Create an app landing page with hero section showing app screenshots, key features with icons, how it works steps, pricing plans, user testimonials, app store download buttons, video demo, and early access signup.

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +136 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Applaunch Fiesta
-emoji: 🐠
-colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: AppLaunch Fiesta 🚀
+colorFrom: pink
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,136 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AppLaunch Fiesta - Your Next Favorite App</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <!-- Hero Section -->
+    <section class="py-20 px-4 md:px-10 lg:px-20 bg-gradient-to-br from-indigo-500 to-purple-600 text-white">
+        <div class="container mx-auto flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-10 md:mb-0">
+                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Transform Your Productivity</h1>
+                <p class="text-xl mb-8 opacity-90">The ultimate all-in-one app that helps you stay focused, organized, and efficient.</p>
+                <div class="flex flex-col sm:flex-row gap-4">
+                    <a href="#" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold flex items-center justify-center gap-2 hover:bg-gray-100 transition">
+                        <i data-feather="download"></i> App Store
+                    </a>
+                    <a href="#" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-semibold flex items-center justify-center gap-2 hover:bg-white hover:text-indigo-600 transition">
+                        <i data-feather="play"></i> Watch Demo
+                    </a>
+                </div>
+            </div>
+            <div class="md:w-1/2 relative">
+                <div class="relative max-w-md mx-auto">
+                    <img src="http://static.photos/technology/640x360/42" alt="App Screenshot" class="rounded-xl shadow-2xl z-10 relative">
+                    <div class="absolute -bottom-5 -right-5 bg-white w-40 h-40 rounded-xl shadow-lg z-0"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-20 px-4 md:px-10 lg:px-20 bg-white">
+        <div class="container mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">What Makes Us Special</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Discover features designed to make your life easier and more productive</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition">
+                    <div class="w-14 h-14 bg-indigo-100 rounded-lg mb-6 flex items-center justify-center">
+                        <i data-feather="zap" class="text-indigo-600 w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Lightning Fast</h3>
+                    <p class="text-gray-600">Optimized for speed so you can get things done without waiting.</p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition">
+                    <div class="w-14 h-14 bg-purple-100 rounded-lg mb-6 flex items-center justify-center">
+                        <i data-feather="lock" class="text-purple-600 w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Secure & Private</h3>
+                    <p class="text-gray-600">Your data is always protected with end-to-end encryption.</p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition">
+                    <div class="w-14 h-14 bg-green-100 rounded-lg mb-6 flex items-center justify-center">
+                        <i data-feather="refresh-cw" class="text-green-600 w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Auto Sync</h3>
+                    <p class="text-gray-600">All your devices stay in perfect harmony with real-time sync.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- How It Works -->
+    <section class="py-20 px-4 md:px-10 lg:px-20 bg-gray-50">
+        <div class="container mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">How It Works</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Get set up and productive in minutes</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Step 1 -->
+                <div class="flex flex-col items-center text-center">
+                    <div class="w-16 h-16 bg-indigo-600 text-white rounded-full flex items-center justify-center mb-4 text-xl font-bold">1</div>
+                    <h3 class="text-xl font-semibold mb-3">Download & Install</h3>
+                    <p class="text-gray-600">Get the app from your favorite app store and install in seconds.</p>
+                </div>
+                <!-- Step 2 -->
+                <div class="flex flex-col items-center text-center">
+                    <div class="w-16 h-16 bg-indigo-600 text-white rounded-full flex items-center justify-center mb-4 text-xl font-bold">2</div>
+                    <h3 class="text-xl font-semibold mb-3">Create Account</h3>
+                    <p class="text-gray-600">Sign up with email or social accounts in less than a minute.</p>
+                </div>
+                <!-- Step 3 -->
+                <div class="flex flex-col items-center text-center">
+                    <div class="w-16 h-16 bg-indigo-600 text-white rounded-full flex items-center justify-center mb-4 text-xl font-bold">3</div>
+                    <h3 class="text-xl font-semibold mb-3">Start Using</h3>
+                    <p class="text-gray-600">Enjoy all the features right away with our intuitive interface.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Pricing -->
+    <section class="py-20 px-4 md:px-10 lg:px-20 bg-white">
+        <div class="container mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple Pricing</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Choose the plan that fits your needs</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+                <!-- Free Plan -->
+                <div class="border border-gray-200 rounded-xl p-8 hover:shadow-lg transition">
+                    <h3 class="text-xl font-semibold mb-4">Free</h3>
+                    <div class="text-4xl font-bold mb-6">$0<span class="text-lg text-gray-500 font-normal">/month</span></div>
+                    <ul class="space-y-3 mb-8">
+                        <li class="flex items-center text-gray-700">
+                            <i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i>
+                            Basic features
+                        </li>
+                        <li class="flex items-center text-gray-700">
+                            <i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i>
+                            1GB storage
+                        </li>
+                        <li class="flex items-center text-gray-500">
+                            <i data-feather="x" class="text-gray-400 mr-2 w-4 h-4"></i>
+                            Advanced analytics
+                        </li>
+                    </ul>
+                    <button class="w-full py-3 border-2 border-indigo-600 text-indigo-600 rounded-lg font-semibold
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>