Hugging Face's logo

Spaces:
Jession01
/
bottlebrush-replica-studio
Running

App Files Community
Jession01 commited on
Commit
918c01d
·
verified ·
1 Parent(s): eb841de

extract all detailed frontend design , colors , fonts ,etc. from this website https://www.bottlebrush.io/

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +235 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Bottlebrush Replica Studio
3
- emoji: ⚡
4
- colorFrom: indigo
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: BottleBrush Replica Studio 🎨
3
+ colorFrom: blue
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,236 @@
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
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>BottleBrush Replica Studio</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+
16
+ :root {
17
+ --primary: #111827;
18
+ --secondary: #374151;
19
+ --accent: #3B82F6;
20
+ --background: #FFFFFF;
21
+ --text-primary: #111827;
22
+ --text-secondary: #6B7280;
23
+ --border: #E5E7EB;
24
+ --hover: #F3F4F6;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Inter', sans-serif;
29
+ color: var(--text-primary);
30
+ background-color: var(--background);
31
+ line-height: 1.6;
32
+ }
33
+
34
+ .btn-primary {
35
+ background-color: var(--primary);
36
+ color: white;
37
+ padding: 12px 24px;
38
+ border-radius: 8px;
39
+ font-weight: 500;
40
+ transition: all 0.2s ease;
41
+ }
42
+
43
+ .btn-primary:hover {
44
+ background-color: #000000;
45
+ transform: translateY(-1px);
46
+ }
47
+
48
+ .btn-secondary {
49
+ background-color: white;
50
+ color: var(--primary);
51
+ padding: 12px 24px;
52
+ border-radius: 8px;
53
+ font-weight: 500;
54
+ border: 1px solid var(--border);
55
+ transition: all 0.2s ease;
56
+ }
57
+
58
+ .btn-secondary:hover {
59
+ background-color: var(--hover);
60
+ transform: translateY(-1px);
61
+ }
62
+
63
+ .gradient-text {
64
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
65
+ -webkit-background-clip: text;
66
+ -webkit-text-fill-color: transparent;
67
+ background-clip: text;
68
+ }
69
+
70
+ .card {
71
+ background: white;
72
+ border-radius: 12px;
73
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
74
+ border: 1px solid var(--border);
75
+ transition: all 0.3s ease;
76
+ }
77
+
78
+ .card:hover {
79
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
80
+ transform: translateY(-2px);
81
+ }
82
+
83
+ .nav-link {
84
+ color: var(--text-secondary);
85
+ font-weight: 500;
86
+ transition: color 0.2s ease;
87
+ }
88
+
89
+ .nav-link:hover {
90
+ color: var(--primary);
91
+ }
92
+ </style>
93
+ </head>
94
+ <body>
95
+ <!-- Navigation -->
96
+ <nav class="fixed top-0 w-full bg-white/80 backdrop-blur-md border-b border-gray-200 z-50">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
+ <div class="flex justify-between items-center h-16">
99
+ <div class="flex items-center">
100
+ <span class="text-xl font-bold gradient-text">BottleBrush</span>
101
+ </div>
102
+ <div class="hidden md:flex space-x-8">
103
+ <a href="#" class="nav-link">Products</a>
104
+ <a href="#" class="nav-link">Solutions</a>
105
+ <a href="#" class="nav-link">Pricing</a>
106
+ <a href="#" class="nav-link">Docs</a>
107
+ </div>
108
+ <div class="flex items-center space-x-4">
109
+ <button class="btn-secondary">Sign in</button>
110
+ <button class="btn-primary">Get started</button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </nav>
115
+
116
+ <!-- Hero Section -->
117
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
118
+ <div class="max-w-7xl mx-auto text-center">
119
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">
120
+ Build beautiful interfaces
121
+ <span class="gradient-text block">faster than ever</span>
122
+ </h1>
123
+ <p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
124
+ The modern UI component library that helps you ship stunning designs
125
+ without the overhead. Built for developers who care about aesthetics.
126
+ </p>
127
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
128
+ <button class="btn-primary text-lg px-8 py-4">Start building</button>
129
+ <button class="btn-secondary text-lg px-8 py-4">
130
+ <i data-feather="play-circle" class="w-5 h-5 mr-2 inline"></i>
131
+ Watch demo
132
+ </button>
133
+ </div>
134
+ </div>
135
+ </section>
136
+
137
+ <!-- Features Section -->
138
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
139
+ <div class="max-w-7xl mx-auto">
140
+ <div class="text-center mb-16">
141
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Why choose BottleBrush?</h2>
142
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
143
+ Everything you need to create exceptional user experiences
144
+ </p>
145
+ </div>
146
+ <div class="grid md:grid-cols-3 gap-8">
147
+ <div class="card p-8">
148
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
149
+ <i data-feather="zap" class="w-6 h-6 text-blue-600"></i>
150
+ </div>
151
+ <h3 class="text-xl font-semibold mb-3">Lightning Fast</h3>
152
+ <p class="text-gray-600">Optimized components that load instantly and perform beautifully across all devices.</p>
153
+ </div>
154
+ <div class="card p-8">
155
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
156
+ <i data-feather="code" class="w-6 h-6 text-purple-600"></i>
157
+ </div>
158
+ <h3 class="text-xl font-semibold mb-3">Developer First</h3>
159
+ <p class="text-gray-600">Clean, semantic code that's easy to customize and extend to your needs.</p>
160
+ </div>
161
+ <div class="card p-8">
162
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
163
+ <i data-feather="layers" class="w-6 h-6 text-green-600"></i>
164
+ </div>
165
+ <h3 class="text-xl font-semibold mb-3">Comprehensive</h3>
166
+ <p class="text-gray-600">Hundreds of components covering every use case from forms to complex data displays.</p>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </section>
171
+
172
+ <!-- Footer -->
173
+ <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
174
+ <div class="max-w-7xl mx-auto">
175
+ <div class="grid md:grid-cols-4 gap-8">
176
+ <div>
177
+ <span class="text-xl font-bold text-white mb-4 block">BottleBrush</span>
178
+ <p class="text-gray-400">Building the future of UI development, one component at a time.</p>
179
+ </div>
180
+ <div>
181
+ <h4 class="font-semibold mb-4">Product</h4>
182
+ <ul class="space-y-2 text-gray-400">
183
+ <li><a href="#" class="hover:text-white transition">Components</a></li>
184
+ <li><a href="#" class="hover:text-white transition">Templates</a></li>
185
+ <li><a href="#" class="hover:text-white transition">Pricing</a></li>
186
+ </ul>
187
+ </div>
188
+ <div>
189
+ <h4 class="font-semibold mb-4">Resources</h4>
190
+ <ul class="space-y-2 text-gray-400">
191
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
192
+ <li><a href="#" class="hover:text-white transition">Guides</a></li>
193
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
194
+ </ul>
195
+ </div>
196
+ <div>
197
+ <h4 class="font-semibold mb-4">Company</h4>
198
+ <ul class="space-y-2 text-gray-400">
199
+ <li><a href="#" class="hover:text-white transition">About</a></li>
200
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
201
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
202
+ </ul>
203
+ </div>
204
+ </div>
205
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
206
+ <p>&copy; 2024 BottleBrush. All rights reserved.</p>
207
+ </div>
208
+ </div>
209
+ </footer>
210
+
211
+ <script>
212
+ feather.replace();
213
+
214
+ // Simple animation for cards on scroll
215
+ document.addEventListener('DOMContentLoaded', function() {
216
+ const cards = document.querySelectorAll('.card');
217
+
218
+ const observer = new IntersectionObserver((entries) => {
219
+ entries.forEach(entry => {
220
+ if (entry.isIntersecting) {
221
+ entry.target.style.opacity = '1';
222
+ entry.target.style.transform = 'translateY(0)';
223
+ }
224
+ });
225
+ }, { threshold: 0.1 });
226
+
227
+ cards.forEach(card => {
228
+ card.style.opacity = '0';
229
+ card.style.transform = 'translateY(20px)';
230
+ card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
231
+ observer.observe(card);
232
+ });
233
+ });
234
+ </script>
235
+ </body>
236
  </html>