Hugging Face's logo

Spaces:
rickstello
/
leafy-vibes-oasis
Running

App Files Community
rickstello commited on
Commit
40e65fa
·
verified ·
1 Parent(s): c5fc5a5

it doesn't look like in these mockups at all; make it look exactly the same

Browse files
Files changed (4) hide show
  1. components/footer.js +7 -6
  2. components/navbar.js +11 -23
  3. index.html +83 -78
  4. style.css +50 -21
components/footer.js CHANGED
@@ -5,11 +5,11 @@ class CustomFooter extends HTMLElement {
5
  <style>
6
  :host {
7
  display: block;
8
- background-color: #166534;
9
- color: white;
10
  padding: 4rem 2rem;
11
  }
12
- .footer-container {
13
  max-width: 1200px;
14
  margin: 0 auto;
15
  display: grid;
@@ -17,13 +17,14 @@ class CustomFooter extends HTMLElement {
17
  gap: 2rem;
18
  }
19
  .footer-logo {
20
- font-size: 1.5rem;
21
- font-weight: 700;
22
  margin-bottom: 1rem;
23
  display: flex;
24
  align-items: center;
 
25
  }
26
- .footer-logo i {
27
  margin-right: 0.5rem;
28
  }
29
  .footer-description {
 
5
  <style>
6
  :host {
7
  display: block;
8
+ background-color: #1e293b;
9
+ color: #f8fafc;
10
  padding: 4rem 2rem;
11
  }
12
+ .footer-container {
13
  max-width: 1200px;
14
  margin: 0 auto;
15
  display: grid;
 
17
  gap: 2rem;
18
  }
19
  .footer-logo {
20
+ font-size: 1.25rem;
21
+ font-weight: 600;
22
  margin-bottom: 1rem;
23
  display: flex;
24
  align-items: center;
25
+ color: #818cf8;
26
  }
27
+ .footer-logo i {
28
  margin-right: 0.5rem;
29
  }
30
  .footer-description {
components/navbar.js CHANGED
@@ -10,11 +10,10 @@ class CustomNavbar extends HTMLElement {
10
  top: 0;
11
  left: 0;
12
  z-index: 1000;
13
- background-color: rgba(255, 255, 255, 0.95);
14
- backdrop-filter: blur(10px);
15
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
16
  }
17
- nav {
18
  max-width: 1200px;
19
  margin: 0 auto;
20
  padding: 1.5rem 2rem;
@@ -23,14 +22,14 @@ class CustomNavbar extends HTMLElement {
23
  align-items: center;
24
  }
25
  .logo {
26
- font-size: 1.5rem;
27
- font-weight: 700;
28
- color: #166534;
29
  text-decoration: none;
30
  display: flex;
31
  align-items: center;
32
  }
33
- .logo i {
34
  margin-right: 0.5rem;
35
  }
36
  .nav-links {
@@ -38,26 +37,15 @@ class CustomNavbar extends HTMLElement {
38
  gap: 2rem;
39
  }
40
  .nav-links a {
41
- color: #365314;
42
  text-decoration: none;
43
  font-weight: 500;
44
- transition: color 0.3s;
45
- position: relative;
46
  }
47
  .nav-links a:hover {
48
- color: #166534;
49
- }
50
- .nav-links a::after {
51
- content: '';
52
- position: absolute;
53
- width: 0;
54
- height: 2px;
55
- bottom: -4px;
56
- left: 0;
57
- background-color: #166534;
58
- transition: width 0.3s;
59
  }
60
- .nav-links a:hover::after {
61
  width: 100%;
62
  }
63
  .mobile-menu-btn {
 
10
  top: 0;
11
  left: 0;
12
  z-index: 1000;
13
+ background-color: white;
14
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
15
  }
16
+ nav {
17
  max-width: 1200px;
18
  margin: 0 auto;
19
  padding: 1.5rem 2rem;
 
22
  align-items: center;
23
  }
24
  .logo {
25
+ font-size: 1.25rem;
26
+ font-weight: 600;
27
+ color: #4f46e5;
28
  text-decoration: none;
29
  display: flex;
30
  align-items: center;
31
  }
32
+ .logo i {
33
  margin-right: 0.5rem;
34
  }
35
  .nav-links {
 
37
  gap: 2rem;
38
  }
39
  .nav-links a {
40
+ color: #64748b;
41
  text-decoration: none;
42
  font-weight: 500;
43
+ transition: all 0.3s ease;
 
44
  }
45
  .nav-links a:hover {
46
+ color: #4f46e5;
 
 
 
 
 
 
 
 
 
 
47
  }
48
+ .nav-links a:hover::after {
49
  width: 100%;
50
  }
51
  .mobile-menu-btn {
index.html CHANGED
@@ -13,108 +13,115 @@
13
  </head>
14
  <body class="bg-white text-gray-900 font-sans">
15
  <custom-navbar></custom-navbar>
16
-
17
  <main>
18
  <!-- Hero Section -->
19
- <section class="relative h-screen flex items-center justify-center overflow-hidden">
20
- <div class="absolute inset-0 bg-gradient-to-b from-green-50 to-white z-0"></div>
21
- <div class="container mx-auto px-6 z-10">
22
- <div class="flex flex-col md:flex-row items-center">
23
- <div class="md:w-1/2 mb-10 md:mb-0">
24
- <h1 class="text-5xl md:text-7xl font-bold mb-6 text-green-900 leading-tight">Bring nature into your digital life</h1>
25
- <p class="text-xl text-gray-700 mb-8 max-w-lg">A collection of plant-inspired digital experiences to help you stay grounded in the modern world.</p>
26
- <div class="flex space-x-4">
27
- <a href="#" class="px-8 py-4 bg-green-600 text-white rounded-full font-medium hover:bg-green-700 transition duration-300">Explore</a>
28
- <a href="#" class="px-8 py-4 border-2 border-green-600 text-green-600 rounded-full font-medium hover:bg-green-50 transition duration-300">Learn more</a>
29
  </div>
30
  </div>
31
- <div class="md:w-1/2 relative">
32
- <img src="http://static.photos/nature/640x360/42" alt="Leafy plant" class="rounded-3xl shadow-2xl w-full max-w-lg mx-auto">
33
- <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-green-100 rounded-full z-0"></div>
34
- <div class="absolute -top-10 -right-10 w-24 h-24 bg-green-200 rounded-full z-0"></div>
35
  </div>
36
  </div>
37
  </div>
38
  </section>
39
-
40
  <!-- Features Section -->
41
- <section class="py-20 bg-white">
42
- <div class="container mx-auto px-6">
43
- <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-green-900">What we offer</h2>
44
- <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
45
- <div class="bg-green-50 p-8 rounded-3xl hover:shadow-lg transition duration-300">
46
- <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
47
- <i data-feather="leaf" class="text-green-600 w-8 h-8"></i>
48
  </div>
49
- <h3 class="text-xl font-bold mb-4 text-green-900">Digital Wellness</h3>
50
- <p class="text-gray-700">Tools to help you maintain balance between technology and nature.</p>
51
  </div>
52
- <div class="bg-green-50 p-8 rounded-3xl hover:shadow-lg transition duration-300">
53
- <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
54
- <i data-feather="droplet" class="text-green-600 w-8 h-8"></i>
55
  </div>
56
- <h3 class="text-xl font-bold mb-4 text-green-900">Mindful Design</h3>
57
- <p class="text-gray-700">Interfaces that promote calm and focus through natural aesthetics.</p>
58
  </div>
59
- <div class="bg-green-50 p-8 rounded-3xl hover:shadow-lg transition duration-300">
60
- <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
61
- <i data-feather="sun" class="text-green-600 w-8 h-8"></i>
62
  </div>
63
- <h3 class="text-xl font-bold mb-4 text-green-900">Sustainable Tech</h3>
64
- <p class="text-gray-700">Solutions that consider environmental impact and digital minimalism.</p>
65
  </div>
66
  </div>
67
  </div>
68
  </section>
69
-
70
  <!-- Gallery Section -->
71
- <section class="py-20 bg-green-50">
72
- <div class="container mx-auto px-6">
73
- <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-green-900">Our Collection</h2>
74
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
75
- <div class="bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-xl transition duration-300">
76
- <img src="http://static.photos/nature/640x360/1" alt="Plant 1" class="w-full h-64 object-cover">
77
- <div class="p-6">
78
- <h3 class="text-xl font-bold mb-2 text-green-900">Serene Spaces</h3>
79
- <p class="text-gray-700 mb-4">Digital environments that mimic peaceful natural settings.</p>
80
- <a href="#" class="text-green-600 font-medium hover:text-green-800 transition duration-300">View project →</a>
 
 
 
 
81
  </div>
82
  </div>
83
- <div class="bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-xl transition duration-300">
84
- <img src="http://static.photos/nature/640x360/2" alt="Plant 2" class="w-full h-64 object-cover">
85
- <div class="p-6">
86
- <h3 class="text-xl font-bold mb-2 text-green-900">Botanical Sounds</h3>
87
- <p class="text-gray-700 mb-4">Ambient nature sounds for focus and relaxation.</p>
88
- <a href="#" class="text-green-600 font-medium hover:text-green-800 transition duration-300">View project →</a>
 
 
 
 
89
  </div>
90
  </div>
91
- <div class="bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-xl transition duration-300">
92
- <img src="http://static.photos/nature/640x360/3" alt="Plant 3" class="w-full h-64 object-cover">
93
- <div class="p-6">
94
- <h3 class="text-xl font-bold mb-2 text-green-900">Growth Tracker</h3>
95
- <p class="text-gray-700 mb-4">Visualize your personal development like a growing plant.</p>
96
- <a href="#" class="text-green-600 font-medium hover:text-green-800 transition duration-300">View project →</a>
 
 
 
 
97
  </div>
98
  </div>
99
  </div>
100
  </div>
101
  </section>
102
-
103
  <!-- Testimonials -->
104
- <section class="py-20 bg-white">
105
- <div class="container mx-auto px-6">
106
- <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-green-900">What people say</h2>
107
- <div class="max-w-4xl mx-auto">
108
- <div class="bg-green-50 p-10 rounded-3xl relative">
109
- <div class="absolute -top-6 -left-6 w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
110
- <i data-feather="quote" class="text-green-600"></i>
111
  </div>
112
- <p class="text-xl text-gray-700 mb-6">"Leafy Vibes Oasis has transformed how I interact with technology. The natural aesthetic makes my screen time feel more intentional and peaceful."</p>
113
  <div class="flex items-center">
114
- <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4">
115
  <div>
116
- <h4 class="font-bold text-green-900">Alex Morgan</h4>
117
- <p class="text-gray-600">UX Designer</p>
118
  </div>
119
  </div>
120
  </div>
@@ -123,21 +130,19 @@
123
  </section>
124
 
125
  <!-- CTA Section -->
126
- <section class="py-20 bg-gradient-to-b from-green-50 to-white">
127
- <div class="container mx-auto px-6 text-center">
128
- <h2 class="text-3xl md:text-4xl font-bold mb-8 text-green-900">Ready to bring more nature into your digital life?</h2>
129
- <p class="text-xl text-gray-700 mb-10 max-w-2xl mx-auto">Join our community of nature-inspired digital creators and find balance in your tech life.</p>
130
- <a href="#" class="px-10 py-5 bg-green-600 text-white rounded-full font-medium hover:bg-green-700 transition duration-300 inline-block">Get Started</a>
131
  </div>
132
  </section>
133
- </main>
134
 
135
  <custom-footer></custom-footer>
136
-
137
  <script>
138
  feather.replace();
139
  </script>
140
  <script src="script.js"></script>
141
- <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
142
  </body>
143
  </html>
 
13
  </head>
14
  <body class="bg-white text-gray-900 font-sans">
15
  <custom-navbar></custom-navbar>
 
16
  <main>
17
  <!-- Hero Section -->
18
+ <section class="py-20">
19
+ <div class="container">
20
+ <div class="flex flex-col md:flex-row items-center gap-12">
21
+ <div class="md:w-1/2">
22
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 text-slate-900 leading-tight">Bring nature into your digital life</h1>
23
+ <p class="text-lg text-slate-600 mb-8 max-w-lg">A collection of plant-inspired digital experiences to help you stay grounded in the modern world.</p>
24
+ <div class="flex gap-4">
25
+ <a href="#" class="btn btn-primary">Explore</a>
26
+ <a href="#" class="btn btn-outline">Learn more</a>
 
27
  </div>
28
  </div>
29
+ <div class="md:w-1/2">
30
+ <img src="https://huggingface.co/spaces/rickstello/leafy-vibes-oasis/resolve/main/images/01_preview_1708695212039.webp"
31
+ alt="Leafy plant"
32
+ class="rounded-xl shadow-lg w-full">
33
  </div>
34
  </div>
35
  </div>
36
  </section>
 
37
  <!-- Features Section -->
38
+ <section class="py-20 bg-slate-50">
39
+ <div class="container">
40
+ <h2 class="text-3xl font-bold text-center mb-12 text-slate-900">What we offer</h2>
41
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
42
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300">
43
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
44
+ <i data-feather="leaf" class="text-indigo-600 w-6 h-6"></i>
45
  </div>
46
+ <h3 class="text-lg font-semibold mb-3 text-slate-800">Digital Wellness</h3>
47
+ <p class="text-slate-600">Tools to help you maintain balance between technology and nature.</p>
48
  </div>
49
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300">
50
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
51
+ <i data-feather="droplet" class="text-indigo-600 w-6 h-6"></i>
52
  </div>
53
+ <h3 class="text-lg font-semibold mb-3 text-slate-800">Mindful Design</h3>
54
+ <p class="text-slate-600">Interfaces that promote calm and focus through natural aesthetics.</p>
55
  </div>
56
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300">
57
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
58
+ <i data-feather="sun" class="text-indigo-600 w-6 h-6"></i>
59
  </div>
60
+ <h3 class="text-lg font-semibold mb-3 text-slate-800">Sustainable Tech</h3>
61
+ <p class="text-slate-600">Solutions that consider environmental impact and digital minimalism.</p>
62
  </div>
63
  </div>
64
  </div>
65
  </section>
 
66
  <!-- Gallery Section -->
67
+ <section class="py-20">
68
+ <div class="container">
69
+ <h2 class="text-3xl font-bold text-center mb-12 text-slate-900">Our Collection</h2>
70
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
71
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300">
72
+ <img src="https://huggingface.co/spaces/rickstello/leafy-vibes-oasis/resolve/main/images/02_preview_1708695205940.webp"
73
+ alt="Plant 1"
74
+ class="w-full h-48 object-cover">
75
+ <div class="p-5">
76
+ <h3 class="text-lg font-semibold mb-2 text-slate-800">Serene Spaces</h3>
77
+ <p class="text-slate-600 mb-4">Digital environments that mimic peaceful natural settings.</p>
78
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition duration-300 inline-flex items-center">
79
+ View project <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
80
+ </a>
81
  </div>
82
  </div>
83
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300">
84
+ <img src="https://huggingface.co/spaces/rickstello/leafy-vibes-oasis/resolve/main/images/03_preview_1708695195498.jpg"
85
+ alt="Plant 2"
86
+ class="w-full h-48 object-cover">
87
+ <div class="p-5">
88
+ <h3 class="text-lg font-semibold mb-2 text-slate-800">Botanical Sounds</h3>
89
+ <p class="text-slate-600 mb-4">Ambient nature sounds for focus and relaxation.</p>
90
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition duration-300 inline-flex items-center">
91
+ View project <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
92
+ </a>
93
  </div>
94
  </div>
95
+ <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300">
96
+ <img src="https://huggingface.co/spaces/rickstello/leafy-vibes-oasis/resolve/main/images/04_preview_1708695178490.webp"
97
+ alt="Plant 3"
98
+ class="w-full h-48 object-cover">
99
+ <div class="p-5">
100
+ <h3 class="text-lg font-semibold mb-2 text-slate-800">Growth Tracker</h3>
101
+ <p class="text-slate-600 mb-4">Visualize your personal development like a growing plant.</p>
102
+ <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800 transition duration-300 inline-flex items-center">
103
+ View project <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
104
+ </a>
105
  </div>
106
  </div>
107
  </div>
108
  </div>
109
  </section>
 
110
  <!-- Testimonials -->
111
+ <section class="py-20 bg-slate-50">
112
+ <div class="container">
113
+ <h2 class="text-3xl font-bold text-center mb-12 text-slate-900">What people say</h2>
114
+ <div class="max-w-3xl mx-auto">
115
+ <div class="bg-white p-8 rounded-lg shadow-sm relative">
116
+ <div class="absolute -top-4 -left-4 w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
117
+ <i data-feather="quote" class="text-indigo-600 w-5 h-5"></i>
118
  </div>
119
+ <p class="text-lg text-slate-700 mb-6">"Leafy Vibes Oasis has transformed how I interact with technology. The natural aesthetic makes my screen time feel more intentional and peaceful."</p>
120
  <div class="flex items-center">
121
+ <img src="http://static.photos/people/200x200/1" alt="User" class="w-10 h-10 rounded-full mr-4">
122
  <div>
123
+ <h4 class="font-semibold text-slate-800">Alex Morgan</h4>
124
+ <p class="text-slate-500 text-sm">UX Designer</p>
125
  </div>
126
  </div>
127
  </div>
 
130
  </section>
131
 
132
  <!-- CTA Section -->
133
+ <section class="py-20 bg-indigo-50">
134
+ <div class="container text-center">
135
+ <h2 class="text-3xl font-bold mb-6 text-slate-900">Ready to bring more nature into your digital life?</h2>
136
+ <p class="text-lg text-slate-600 mb-8 max-w-2xl mx-auto">Join our community of nature-inspired digital creators and find balance in your tech life.</p>
137
+ <a href="#" class="btn btn-primary">Get Started</a>
138
  </div>
139
  </section>
140
+ </main>
141
 
142
  <custom-footer></custom-footer>
 
143
  <script>
144
  feather.replace();
145
  </script>
146
  <script src="script.js"></script>
 
147
  </body>
148
  </html>
style.css CHANGED
@@ -1,45 +1,74 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
2
 
3
  body {
4
- font-family: 'Inter', sans-serif;
5
  scroll-behavior: smooth;
 
 
6
  }
7
-
8
  /* Custom scrollbar */
9
  ::-webkit-scrollbar {
10
- width: 8px;
11
  }
12
 
13
  ::-webkit-scrollbar-track {
14
- background: #f1f1f1;
15
  }
16
 
17
  ::-webkit-scrollbar-thumb {
18
- background: #16a34a;
19
- border-radius: 4px;
20
  }
21
 
22
  ::-webkit-scrollbar-thumb:hover {
23
- background: #15803d;
 
 
 
 
 
24
  }
25
 
26
- /* Animation for floating elements */
27
- @keyframes float {
28
- 0% { transform: translateY(0px); }
29
- 50% { transform: translateY(-15px); }
30
- 100% { transform: translateY(0px); }
31
  }
32
 
33
- .floating {
34
- animation: float 6s ease-in-out infinite;
 
35
  }
36
 
37
- /* Hover effects for cards */
38
- .card-hover {
 
 
 
 
 
 
 
 
 
 
39
  transition: all 0.3s ease;
40
- transform: translateY(0);
41
  }
42
 
43
- .card-hover:hover {
44
- transform: translateY(-5px);
45
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
3
 
4
  body {
5
+ font-family: 'Poppins', sans-serif;
6
  scroll-behavior: smooth;
7
+ background-color: #f8fafc;
8
+ color: #1e293b;
9
  }
 
10
  /* Custom scrollbar */
11
  ::-webkit-scrollbar {
12
+ width: 6px;
13
  }
14
 
15
  ::-webkit-scrollbar-track {
16
+ background: #e2e8f0;
17
  }
18
 
19
  ::-webkit-scrollbar-thumb {
20
+ background: #94a3b8;
21
+ border-radius: 3px;
22
  }
23
 
24
  ::-webkit-scrollbar-thumb:hover {
25
+ background: #64748b;
26
+ }
27
+ /* Animation for elements */
28
+ @keyframes fadeIn {
29
+ from { opacity: 0; transform: translateY(20px); }
30
+ to { opacity: 1; transform: translateY(0); }
31
  }
32
 
33
+ .animate-fadeIn {
34
+ animation: fadeIn 0.6s ease-out forwards;
 
 
 
35
  }
36
 
37
+ /* Section styling */
38
+ section {
39
+ padding: 6rem 0;
40
  }
41
 
42
+ .container {
43
+ max-width: 1200px;
44
+ margin: 0 auto;
45
+ padding: 0 1.5rem;
46
+ }
47
+
48
+ /* Button styling */
49
+ .btn {
50
+ display: inline-block;
51
+ padding: 0.75rem 1.5rem;
52
+ border-radius: 0.375rem;
53
+ font-weight: 500;
54
  transition: all 0.3s ease;
 
55
  }
56
 
57
+ .btn-primary {
58
+ background-color: #4f46e5;
59
+ color: white;
60
+ }
61
+
62
+ .btn-primary:hover {
63
+ background-color: #4338ca;
64
+ }
65
+
66
+ .btn-outline {
67
+ border: 1px solid #4f46e5;
68
+ color: #4f46e5;
69
+ }
70
+
71
+ .btn-outline:hover {
72
+ background-color: #4f46e5;
73
+ color: white;
74
+ }