Hugging Face's logo

Spaces:
InvincibleSloth
/
curvy-cuts-salon
Running

App Files Community
InvincibleSloth commited on
Commit
68a98d8
·
verified ·
1 Parent(s): 8ab25fa

It looks terrible. Use components from 21st.dev to make it look better

Browse files
Files changed (1) hide show
  1. index.html +66 -94
index.html CHANGED
@@ -1,3 +1,4 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
@@ -9,6 +10,8 @@
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
 
 
12
  <style>
13
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
14
 
@@ -28,31 +31,6 @@
28
  background-position: center;
29
  }
30
 
31
- .service-card {
32
- transition: all 0.3s ease;
33
- }
34
-
35
- .service-card:hover {
36
- transform: translateY(-5px);
37
- box-shadow: 0 20px 25px -5px rgba(236, 72, 153, 0.2), 0 10px 10px -5px rgba(236, 72, 153, 0.1);
38
- }
39
-
40
- .staff-card {
41
- transition: all 0.3s ease;
42
- }
43
-
44
- .staff-card:hover {
45
- transform: scale(1.03);
46
- }
47
-
48
- .testimonial-card {
49
- border-left: 4px solid #ec4899;
50
- }
51
-
52
- .glow-button {
53
- box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
54
- }
55
-
56
  .vanta-canvas {
57
  position: absolute;
58
  top: 0;
@@ -65,117 +43,111 @@
65
  </head>
66
  <body class="bg-slate-900 text-slate-100">
67
  <!-- Navigation -->
68
- <nav class="bg-slate-900 border-b border-slate-800 sticky top-0 z-50">
69
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
70
- <div class="flex justify-between h-20 items-center">
71
- <div class="flex items-center">
72
- <div class="flex-shrink-0 flex items-center">
73
- <i data-feather="scissors" class="text-pink-500 mr-2"></i>
74
- <span class="text-2xl font-bold text-pink-500">Curvy Cuts</span>
75
- </div>
76
- </div>
77
- <div class="hidden md:block">
78
- <div class="ml-10 flex items-baseline space-x-8">
79
- <a href="#" class="text-pink-500 font-medium">Home</a>
80
- <a href="#services" class="text-slate-300 hover:text-pink-500 transition">Services</a>
81
- <a href="#about" class="text-slate-300 hover:text-pink-500 transition">About</a>
82
- <a href="#team" class="text-slate-300 hover:text-pink-500 transition">Team</a>
83
- <a href="#testimonials" class="text-slate-300 hover:text-pink-500 transition">Testimonials</a>
84
- <a href="#contact" class="text-slate-300 hover:text-pink-500 transition">Contact</a>
85
- </div>
86
- </div>
87
- <div>
88
- <button class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-2 rounded-full font-medium glow-button transition">
89
- Book Now
90
- </button>
91
- </div>
92
  </div>
93
  </div>
94
  </nav>
95
-
96
  <!-- Hero Section -->
97
- <section class="hero-bg relative py-20 md:py-32 overflow-hidden">
98
  <div id="vanta-bg"></div>
99
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
100
- <div class="text-center">
101
- <h1 class="text-4xl md:text-6xl font-bold mb-6">
102
- Where <span class="text-pink-500">Confidence</span> Meets Style
103
  </h1>
104
- <p class="text-xl md:text-2xl text-slate-300 max-w-3xl mx-auto mb-10">
105
  Experience luxury hair care in an inclusive space designed for every body, every style, every you.
106
  </p>
107
- <div class="flex flex-col sm:flex-row justify-center gap-4">
108
- <button class="bg-pink-500 hover:bg-pink-600 text-white px-8 py-3 rounded-full font-medium text-lg glow-button transition">
109
- Book Your Appointment
110
  </button>
111
- <button class="bg-amber-500 hover:bg-amber-600 text-white px-8 py-3 rounded-full font-medium text-lg transition">
112
- Meet Our Founder
113
  </button>
114
  </div>
115
  </div>
116
  </div>
 
 
 
117
  </section>
118
-
119
  <!-- Services Section -->
120
- <section id="services" class="py-20 bg-slate-800">
121
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
122
- <div class="text-center mb-16">
123
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-pink-500">Premium</span> Services</h2>
124
- <p class="text-slate-400 max-w-2xl mx-auto">
125
  From precision cuts to transformative color treatments, we offer a full range of services tailored to your unique style.
126
  </p>
127
  </div>
128
 
129
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
130
  <!-- Service 1 -->
131
- <div class="service-card bg-slate-900 rounded-xl p-8 border border-slate-700">
132
- <div class="w-14 h-14 rounded-full bg-pink-500/10 flex items-center justify-center mb-6">
133
- <i data-feather="scissors" class="text-pink-500 w-8 h-8"></i>
134
  </div>
135
- <h3 class="text-2xl font-bold mb-3">Haircuts & Styling</h3>
136
- <p class="text-slate-400 mb-6">
137
  Precision cuts tailored to your face shape and lifestyle. From classic styles to modern trends.
138
  </p>
139
- <div class="flex justify-between items-center">
140
- <span class="text-amber-500 font-bold">From $65</span>
141
- <button class="text-pink-500 hover:text-pink-400 font-medium">Book Now</button>
142
  </div>
143
  </div>
144
 
145
  <!-- Service 2 -->
146
- <div class="service-card bg-slate-900 rounded-xl p-8 border border-slate-700">
147
- <div class="w-14 h-14 rounded-full bg-pink-500/10 flex items-center justify-center mb-6">
148
- <i data-feather="droplet" class="text-pink-500 w-8 h-8"></i>
149
  </div>
150
- <h3 class="text-2xl font-bold mb-3">Color & Highlights</h3>
151
- <p class="text-slate-400 mb-6">
152
  Vibrant colors and seamless highlights using premium products for healthy, shiny hair.
153
  </p>
154
- <div class="flex justify-between items-center">
155
- <span class="text-amber-500 font-bold">From $95</span>
156
- <button class="text-pink-500 hover:text-pink-400 font-medium">Book Now</button>
157
  </div>
158
  </div>
159
 
160
  <!-- Service 3 -->
161
- <div class="service-card bg-slate-900 rounded-xl p-8 border border-slate-700">
162
- <div class="w-14 h-14 rounded-full bg-pink-500/10 flex items-center justify-center mb-6">
163
- <i data-feather="heart" class="text-pink-500 w-8 h-8"></i>
164
  </div>
165
- <h3 class="text-2xl font-bold mb-3">Treatments & Care</h3>
166
- <p class="text-slate-400 mb-6">
167
  Nourishing treatments to restore, strengthen, and revitalize your hair from root to tip.
168
  </p>
169
- <div class="flex justify-between items-center">
170
- <span class="text-amber-500 font-bold">From $50</span>
171
- <button class="text-pink-500 hover:text-pink-400 font-medium">Book Now</button>
172
  </div>
173
  </div>
174
  </div>
175
  </div>
176
  </section>
177
-
178
- <!-- About Section -->
179
  <section id="about" class="py-20 bg-gradient-to-br from-slate-900 to-slate-800">
180
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
181
  <div class="flex flex-col lg:flex-row items-center gap-12">
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
 
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/@21st.dev/design-system@latest/dist/design-system.min.js"></script>
14
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@21st.dev/design-system@latest/dist/design-system.css">
15
  <style>
16
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
17
 
 
31
  background-position: center;
32
  }
33
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  .vanta-canvas {
35
  position: absolute;
36
  top: 0;
 
43
  </head>
44
  <body class="bg-slate-900 text-slate-100">
45
  <!-- Navigation -->
46
+ <nav class="ds-navbar ds-navbar-glass ds-navbar-sticky">
47
+ <div class="ds-navbar-container">
48
+ <div class="ds-navbar-brand">
49
+ <i data-feather="scissors" class="text-pink-500 mr-2"></i>
50
+ <span class="ds-navbar-brand-text">Curvy Cuts</span>
51
+ </div>
52
+ <div class="ds-navbar-menu">
53
+ <a href="#" class="ds-navbar-link ds-navbar-link-active">Home</a>
54
+ <a href="#services" class="ds-navbar-link">Services</a>
55
+ <a href="#about" class="ds-navbar-link">About</a>
56
+ <a href="#team" class="ds-navbar-link">Team</a>
57
+ <a href="#testimonials" class="ds-navbar-link">Testimonials</a>
58
+ <a href="#contact" class="ds-navbar-link">Contact</a>
59
+ </div>
60
+ <div class="ds-navbar-actions">
61
+ <button class="ds-button ds-button-primary ds-button-glow">
62
+ <i data-feather="calendar" class="mr-2"></i>Book Now
63
+ </button>
 
 
 
 
 
 
64
  </div>
65
  </div>
66
  </nav>
 
67
  <!-- Hero Section -->
68
+ <section class="ds-hero ds-hero-glass ds-hero-fullscreen">
69
  <div id="vanta-bg"></div>
70
+ <div class="ds-hero-content ds-hero-content-center">
71
+ <div class="ds-hero-text">
72
+ <h1 class="ds-hero-title">
73
+ Where <span class="ds-text-gradient">Confidence</span> Meets Style
74
  </h1>
75
+ <p class="ds-hero-subtitle">
76
  Experience luxury hair care in an inclusive space designed for every body, every style, every you.
77
  </p>
78
+ <div class="ds-hero-actions">
79
+ <button class="ds-button ds-button-primary ds-button-lg ds-button-glow">
80
+ <i data-feather="calendar" class="mr-2"></i>Book Your Appointment
81
  </button>
82
+ <button class="ds-button ds-button-secondary ds-button-lg">
83
+ <i data-feather="user" class="mr-2"></i>Meet Our Founder
84
  </button>
85
  </div>
86
  </div>
87
  </div>
88
+ <div class="ds-hero-scroll-indicator">
89
+ <i data-feather="chevron-down"></i>
90
+ </div>
91
  </section>
 
92
  <!-- Services Section -->
93
+ <section id="services" class="ds-section">
94
+ <div class="ds-container">
95
+ <div class="ds-section-header ds-text-center">
96
+ <h2 class="ds-section-title">Our <span class="ds-text-gradient">Premium</span> Services</h2>
97
+ <p class="ds-section-subtitle">
98
  From precision cuts to transformative color treatments, we offer a full range of services tailored to your unique style.
99
  </p>
100
  </div>
101
 
102
+ <div class="ds-grid ds-grid-cols-1 md:ds-grid-cols-2 lg:ds-grid-cols-3 ds-gap-8">
103
  <!-- Service 1 -->
104
+ <div class="ds-card ds-card-hover">
105
+ <div class="ds-card-icon">
106
+ <i data-feather="scissors"></i>
107
  </div>
108
+ <h3 class="ds-card-title">Haircuts & Styling</h3>
109
+ <p class="ds-card-content">
110
  Precision cuts tailored to your face shape and lifestyle. From classic styles to modern trends.
111
  </p>
112
+ <div class="ds-card-footer">
113
+ <span class="ds-price">From $65</span>
114
+ <button class="ds-button ds-button-primary ds-button-sm">Book Now</button>
115
  </div>
116
  </div>
117
 
118
  <!-- Service 2 -->
119
+ <div class="ds-card ds-card-hover">
120
+ <div class="ds-card-icon">
121
+ <i data-feather="droplet"></i>
122
  </div>
123
+ <h3 class="ds-card-title">Color & Highlights</h3>
124
+ <p class="ds-card-content">
125
  Vibrant colors and seamless highlights using premium products for healthy, shiny hair.
126
  </p>
127
+ <div class="ds-card-footer">
128
+ <span class="ds-price">From $95</span>
129
+ <button class="ds-button ds-button-primary ds-button-sm">Book Now</button>
130
  </div>
131
  </div>
132
 
133
  <!-- Service 3 -->
134
+ <div class="ds-card ds-card-hover">
135
+ <div class="ds-card-icon">
136
+ <i data-feather="heart"></i>
137
  </div>
138
+ <h3 class="ds-card-title">Treatments & Care</h3>
139
+ <p class="ds-card-content">
140
  Nourishing treatments to restore, strengthen, and revitalize your hair from root to tip.
141
  </p>
142
+ <div class="ds-card-footer">
143
+ <span class="ds-price">From $50</span>
144
+ <button class="ds-button ds-button-primary ds-button-sm">Book Now</button>
145
  </div>
146
  </div>
147
  </div>
148
  </div>
149
  </section>
150
+ <!-- About Section -->
 
151
  <section id="about" class="py-20 bg-gradient-to-br from-slate-900 to-slate-800">
152
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
153
  <div class="flex flex-col lg:flex-row items-center gap-12">