-
Notifications
You must be signed in to change notification settings - Fork 4
/
about.html
247 lines (220 loc) · 11.3 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us | Aavaran</title>
<link rel="icon" type="image/x-icon" href="logoo.jpeg">
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
<style>
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.floating { animation: float 3s ease-in-out infinite; }
.gradient-text {
background: linear-gradient(45deg, #10b981, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.team-member {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.team-member img {
width: 100%;
height: 200px;
object-fit: cover;
}
.team-member .overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.75);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
text-align: center;
color: white;
}
.team-member:hover .overlay {
opacity: 1;
}
.star-rating svg {
width: 2rem;
height: 2rem;
cursor: pointer;
transition: color 0.3s ease;
}
.star-rating svg.filled {
color: #fbbf24;
}
.star-rating svg.empty {
color: #d1d5db;
}
</style>
</head>
<body class="bg-gray-100">
<header class="relative overflow-hidden bg-green-600 text-white">
<div class="absolute inset-0 z-0">
<svg class="absolute left-0 top-0 h-full w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#059669" fill-opacity="1" d="M0,32L48,53.3C96,75,192,117,288,144C384,171,480,181,576,165.3C672,149,768,107,864,85.3C960,64,1056,64,1152,80C1248,96,1344,128,1392,144L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>
</div>
<div class="container mx-auto px-4 py-16 relative z-10">
<h1 class="text-5xl font-bold mb-4 gradient-text" data-aos="fade-down">About Aavaran</h1>
<p class="text-2xl mb-8" data-aos="fade-up" data-aos-delay="200">Your Partner in Sustainable Living</p>
</div>
</header>
<main class="container mx-auto px-4 py-16">
<section class="mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold mb-8 text-center gradient-text">Our Mission</h2>
<p class="text-xl text-gray-700 leading-relaxed max-w-3xl mx-auto">
At Aavaran, we're on a mission to make sustainable living accessible and easy for everyone. By offering carefully curated eco-friendly products and educational resources, we empower individuals to make conscious choices that positively impact our planet.
</p>
</section>
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-center gradient-text" data-aos="fade-up">Meet Our Team</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="teamMembers">
</div>
</section>
<section class="mb-16 bg-white rounded-lg shadow-xl p-8" data-aos="fade-up">
<h2 class="text-3xl font-bold mb-8 text-center gradient-text">Your Feedback Matters</h2>
<form id="feedbackForm" class="max-w-2xl mx-auto">
<div class="mb-6">
<label for="name" class="block text-gray-700 font-bold mb-2">Name</label>
<input type="text" id="name" name="name" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
</div>
<div class="mb-6">
<label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-bold mb-2">Rating</label>
<div id="ratingStars" class="flex justify-center"></div>
</div>
<div class="mb-6">
<label for="comments" class="block text-gray-700 font-bold mb-2">Comments</label>
<textarea id="comments" name="comments" rows="4" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" required></textarea>
</div>
<button type="submit" class="w-full bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors duration-300">
Submit Feedback
</button>
</form>
</section>
</main>
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p>© 2024 Aavaran. All rights reserved.</p>
</div>
<div class="flex space-x-4">
<a href="#" class="hover:text-green-400 transition-colors duration-300">Terms of Service</a>
<a href="#" class="hover:text-green-400 transition-colors duration-300">Privacy Policy</a>
<a href="#" class="hover:text-green-400 transition-colors duration-300">Contact Us</a>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
AOS.init({
duration: 1000,
once: true,
});
const teamMembers = [
{
name: 'Arushi Dhawan',
bio: 'Arushi is focused on developing the backend infrastructure for our platform. She is working on creating robust and efficient systems to support functionality of our website.',
photo: 'https://cdn2.vectorstock.com/i/1000x1000/98/11/girl-icon-flat-single-avatarpeaople-icon-from-vector-14449811.jpg'
},
{
name: 'Hemanshi Jaura',
bio: 'Hemanshi specializes in frontend development. She is responsible for implementing user interfaces and ensuring a smooth, intuitive user experience across our website.',
photo: 'https://cdn2.vectorstock.com/i/1000x1000/98/11/girl-icon-flat-single-avatarpeaople-icon-from-vector-14449811.jpg'
},
{
name: 'Kashvi Arora',
bio: 'Kashvi contributes to our frontend development efforts. She focuses on turning design concepts into functional web pages, with a keen eye for detail and user-friendly layouts.',
photo: 'https://cdn2.vectorstock.com/i/1000x1000/98/11/girl-icon-flat-single-avatarpeaople-icon-from-vector-14449811.jpg'
},
{
name: 'Samridhi Gupta',
bio: 'Samridhi is part of our frontend development team. She works on implementing key features of our website, collaborating closely with the team to create a cohesive user interface.',
photo: 'https://cdn2.vectorstock.com/i/1000x1000/98/11/girl-icon-flat-single-avatarpeaople-icon-from-vector-14449811.jpg'
}
];
const teamMembersContainer = document.getElementById('teamMembers');
const ratingStarsContainer = document.getElementById('ratingStars');
const feedbackForm = document.getElementById('feedbackForm');
let currentRating = 0;
teamMembers.forEach((member, index) => {
const memberElement = document.createElement('div');
memberElement.className = 'team-member relative overflow-hidden rounded-lg shadow-lg';
memberElement.setAttribute('data-aos', 'fade-up');
memberElement.setAttribute('data-aos-delay', (index * 100).toString());
memberElement.innerHTML = `
<img src="${member.photo}" alt="${member.name}" class="w-full h-64 object-cover">
<div class="absolute inset-0 bg-black bg-opacity-75 opacity-0 transition-opacity duration-300 flex items-center justify-center p-4 text-white text-center overlay">
<div>
<h3 class="text-xl font-bold mb-2">${member.name}</h3>
<p class="text-xs">${member.bio}</p>
</div>
</div>
`;
teamMembersContainer.appendChild(memberElement);
});
for (let i = 1; i <= 5; i++) {
const star = document.createElement('span');
star.innerHTML = feather.icons['star'].toSvg();
star.querySelector('svg').dataset.rating = i;
star.querySelector('svg').classList.add('w-8', 'h-8', 'cursor-pointer', 'transition-colors', 'duration-300', 'text-gray-400', 'hover:text-yellow-400');
ratingStarsContainer.appendChild(star);
}
ratingStarsContainer.addEventListener('click', function(e) {
if (e.target.tagName === 'svg') {
currentRating = parseInt(e.target.dataset.rating);
updateStars();
}
});
function updateStars() {
ratingStarsContainer.querySelectorAll('svg').forEach((star, index) => {
if (index < currentRating) {
star.classList.remove('text-gray-400');
star.classList.add('text-yellow-400');
} else {
star.classList.remove('text-yellow-400');
star.classList.add('text-gray-400');
}
});
}
feedbackForm.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(feedbackForm);
const feedback = {
name: formData.get('name'),
email: formData.get('email'),
comments: formData.get('comments'),
rating: currentRating
};
console.log('Feedback submitted:', feedback);
alert('Thank you for your feedback!');
feedbackForm.reset();
currentRating = 0;
updateStars();
});
feather.replace();
});
</script>
</body>
</html>