Val Town Code SearchReturn to Val Town

37    
38    .page-header {
39      background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80');
40      background-size: cover;
41      background-position: center;
197        <div class="department-card bg-white rounded-lg shadow-md overflow-hidden">
198          <div class="h-48 bg-gray-200 relative">
199            <img src="https://images.unsplash.com/photo-1528893583412-4a288f58a9d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
200                 alt="Choir" class="w-full h-full object-cover">
201            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
228        <div class="department-card bg-white rounded-lg shadow-md overflow-hidden">
229          <div class="h-48 bg-gray-200 relative">
230            <img src="https://images.unsplash.com/photo-1603731125980-2b4c095f7d70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
231                 alt="Media Tech" class="w-full h-full object-cover">
232            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
259        <div class="department-card bg-white rounded-lg shadow-md overflow-hidden">
260          <div class="h-48 bg-gray-200 relative">
261            <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" 
262                 alt="Ushering" class="w-full h-full object-cover">
263            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
290        <div class="department-card bg-white rounded-lg shadow-md overflow-hidden">
291          <div class="h-48 bg-gray-200 relative">
292            <img src="https://images.unsplash.com/photo-1529070538774-1843cb3265df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
293                 alt="Evangelism" class="w-full h-full object-cover">
294            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
321        <div class="department-card bg-white rounded-lg shadow-md overflow-hidden">
322          <div class="h-48 bg-gray-200 relative">
323            <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" 
324                 alt="Home Cell" class="w-full h-full object-cover">
325            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">

37    
38    .page-header {
39      background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1601991077688-d9a364904911?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
40      background-size: cover;
41      background-position: center;
212        
213        <div class="rounded-lg overflow-hidden shadow-xl">
214          <img src="https://images.unsplash.com/photo-1601991077688-d9a364904911?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
215               alt="Church gathering" class="w-full h-full object-cover">
216        </div>
306        <div class="text-center">
307          <div class="mb-4 rounded-full overflow-hidden w-48 h-48 mx-auto">
308            <img src="https://images.unsplash.com/photo-1556157382-97eda2d62296?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
309                 alt="Pastor John Smith" class="w-full h-full object-cover">
310          </div>
318        <div class="text-center">
319          <div class="mb-4 rounded-full overflow-hidden w-48 h-48 mx-auto">
320            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1476&q=80" 
321                 alt="Pastor Sarah Johnson" class="w-full h-full object-cover">
322          </div>
330        <div class="text-center">
331          <div class="mb-4 rounded-full overflow-hidden w-48 h-48 mx-auto">
332            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 
333                 alt="Pastor Michael Davis" class="w-full h-full object-cover">
334          </div>

37    
38    .hero-section {
39      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1438032005730-c779502df39b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');
40      background-size: cover;
41      background-position: center;
240        <div class="bg-white rounded-lg shadow-md overflow-hidden">
241          <div class="h-48 bg-gray-200 relative">
242            <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
243                 alt="Youth Conference" class="w-full h-full object-cover">
244            <div class="absolute top-0 left-0 bg-primary text-white px-4 py-2 font-semibold">
258        <div class="bg-white rounded-lg shadow-md overflow-hidden">
259          <div class="h-48 bg-gray-200 relative">
260            <img src="https://images.unsplash.com/photo-1609139003551-ee5552a8d ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
261                 alt="Community Outreach" class="w-full h-full object-cover">
262            <div class="absolute top-0 left-0 bg-primary text-white px-4 py-2 font-semibold">
276        <div class="bg-white rounded-lg shadow-md overflow-hidden">
277          <div class="h-48 bg-gray-200 relative">
278            <img src="https://images.unsplash.com/photo-1507838153414-b4b713384a76?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
279                 alt="Family Picnic" class="w-full h-full object-cover">
280            <div class="absolute top-0 left-0 bg-primary text-white px-4 py-2 font-semibold">

67## Credits
68
69- Car images from Unsplash
70- Icons from Heroicons
71- Fonts from Google Fonts (Inter)

11          <div className="absolute inset-0 bg-blue-700/70 z-10"></div>
12          <img 
13            src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
14            alt="Luxury Cars" 
15            className="w-full h-full object-cover"
46            <div className="relative fade-in" style={{ animationDelay: '0.3s' }}>
47              <img 
48                src="https://images.unsplash.com/photo-1549399542-7e3f8b79c341?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
49                alt="Luxury Car Showroom" 
50                className="rounded-lg shadow-lg w-full h-auto"
135                name: 'Alexander Mitchell',
136                role: 'Founder & CEO',
137                image: 'https://randomuser.me/api/portraits/men/32.jpg',
138                bio: 'With over 20 years in the luxury automotive industry, Alex founded DriveLuxe to redefine the premium car rental experience.'
139              },
141                name: 'Sophia Reynolds',
142                role: 'Chief Operating Officer',
143                image: 'https://randomuser.me/api/portraits/women/44.jpg',
144                bio: 'Sophia oversees all operations, ensuring that every client interaction meets our high standards of excellence.'
145              },
147                name: 'James Wilson',
148                role: 'Fleet Director',
149                image: 'https://randomuser.me/api/portraits/men/67.jpg',
150                bio: 'James curates our vehicle collection, bringing his expertise as a former luxury car dealer and racing enthusiast.'
151              },
153                name: 'Emily Chen',
154                role: 'Customer Experience Director',
155                image: 'https://randomuser.me/api/portraits/women/63.jpg',
156                bio: 'Emily leads our concierge team, drawing from her background in luxury hospitality to create memorable client experiences.'
157              },
159                name: 'Michael Rodriguez',
160                role: 'Technology Director',
161                image: 'https://randomuser.me/api/portraits/men/22.jpg',
162                bio: 'Michael drives our digital innovation, ensuring a seamless booking experience and implementing cutting-edge vehicle technologies.'
163              },
165                name: 'Olivia Thompson',
166                role: 'Marketing Director',
167                image: 'https://randomuser.me/api/portraits/women/29.jpg',
168                bio: 'Olivia crafts our brand story and develops partnerships with luxury hotels, events, and exclusive venues.'
169              }
175              >
176                <img 
177                  src={member.image} 
178                  alt={member.name} 
179                  className="w-full h-64 object-cover object-center"
233                phone: '+1 (800) 123-4567',
234                hours: 'Mon-Sat: 8AM-8PM, Sun: 10AM-6PM',
235                image: 'https://images.unsplash.com/photo-1619994121345-b61cd21e9866?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
236              },
237              {
240                phone: '+1 (800) 123-4568',
241                hours: 'Mon-Sat: 8AM-8PM, Sun: 10AM-6PM',
242                image: 'https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
243              },
244              {
247                phone: '+1 (800) 123-4569',
248                hours: 'Mon-Sat: 8AM-8PM, Sun: 10AM-6PM',
249                image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
250              },
251              {
254                phone: '+1 (800) 123-4570',
255                hours: 'Mon-Sun: 8AM-10PM',
256                image: 'https://images.unsplash.com/photo-1605833556294-ea5c7a74f57d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
257              },
258              {
261                phone: '+1 (800) 123-4571',
262                hours: 'Mon-Sat: 8AM-8PM, Sun: 10AM-6PM',
263                image: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
264              }
265            ].map((location, index) => (
271                <div className="relative h-48">
272                  <img 
273                    src={location.image} 
274                    alt={location.city} 
275                    className="w-full h-full object-cover"

331                        <div className="bg-gray-50 rounded-lg p-4 mb-4 flex items-center">
332                          <img 
333                            src={selectedCar.image} 
334                            alt={selectedCar.name} 
335                            className="w-24 h-16 object-cover rounded mr-4"
362                              >
363                                <img 
364                                  src={car.image} 
365                                  alt={car.name} 
366                                  className="w-20 h-14 object-cover rounded mr-3"
478                          <div className="mb-4">
479                            <img 
480                              src={selectedCar.image} 
481                              alt={selectedCar.name} 
482                              className="w-full h-40 object-cover rounded-lg mb-3"
714                          <div className="mb-4">
715                            <img 
716                              src={selectedCar.image} 
717                              alt={selectedCar.name} 
718                              className="w-full h-40 object-cover rounded-lg mb-3"
800                            <div className="flex items-center mb-3">
801                              <img 
802                                src={selectedCar.image} 
803                                alt={selectedCar.name} 
804                                className="w-20 h-14 object-cover rounded mr-3"
945                        <div className="flex items-center mb-3">
946                          <img 
947                            src={selectedCar.image} 
948                            alt={selectedCar.name} 
949                            className="w-16 h-12 object-cover rounded mr-3"

71  }
72
73  // Mock gallery images
74  const galleryImages = [
75    car.image,
76    `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},interior`,
77    `https://source.unsplash.com/random/1200x800/?${car.name.toLowerCase().replace(' ', '-')},rear`,
100          <div className="relative">
101            <img 
102              src={car.image} 
103              alt={car.name} 
104              className="w-full h-96 object-cover"
258                  <div className="relative overflow-hidden">
259                    <img 
260                      src={relatedCar.image} 
261                      alt={relatedCar.name} 
262                      className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
315      </div>
316      
317      {/* Image Gallery Modal */}
318      {showGallery && (
319        <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4">
331            <div className="relative">
332              <img 
333                src={galleryImages[0]} 
334                alt={car.name} 
335                className="w-full h-auto max-h-[80vh] object-contain"
338            
339            <div className="flex mt-4 space-x-2 overflow-x-auto pb-2">
340              {galleryImages.map((image, index) => (
341                <button 
342                  key={index}
343                  className="flex-shrink-0 w-24 h-16 rounded overflow-hidden border-2 border-transparent hover:border-white focus:border-white focus:outline-none transition-colors"
344                  onClick={() => {
345                    // In a real implementation, this would switch the main image
346                    // For this demo, we'll just show an alert
347                    alert(`Would switch to image ${index + 1}`);
348                  }}
349                >
350                  <img 
351                    src={image} 
352                    alt={`${car.name} view ${index + 1}`} 
353                    className="w-full h-full object-cover"

31          <div className="absolute inset-0 bg-gradient-to-r from-black/80 to-black/40 z-10"></div>
32          <img 
33            src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" 
34            alt="Luxury Car" 
35            className="w-full h-full object-cover"
219                name: 'Michael Thompson',
220                role: 'Business Executive',
221                image: 'https://randomuser.me/api/portraits/men/32.jpg',
222                quote: 'DriveLuxe provided an exceptional experience for my business trip. The BMW 5 Series was immaculate and the service was top-notch.'
223              },
225                name: 'Sophia Rodriguez',
226                role: 'Travel Blogger',
227                image: 'https://randomuser.me/api/portraits/women/44.jpg',
228                quote: 'I\'ve rented luxury cars worldwide, and DriveLuxe stands out for their attention to detail and stunning vehicle selection. Highly recommended!'
229              },
231                name: 'James Wilson',
232                role: 'Photographer',
233                image: 'https://randomuser.me/api/portraits/men/67.jpg',
234                quote: 'The Porsche 911 I rented was the highlight of my California road trip. Easy booking process and fantastic customer service.'
235              }
241                <div className="flex items-center mb-4">
242                  <img 
243                    src={testimonial.image} 
244                    alt={testimonial.name} 
245                    className="w-12 h-12 rounded-full mr-4"

6    category: 'Electric',
7    price: 150,
8    image: 'https://images.unsplash.com/photo-1617788138017-80ad40651399?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',
9    transmission: 'Automatic',
10    fuelType: 'Electric',
38    category: 'Luxury',
39    price: 120,
40    image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',
41    transmission: 'Automatic',
42    fuelType: 'Hybrid',
70    category: 'SUV',
71    price: 200,
72    image: 'https://images.unsplash.com/photo-1606016159991-dfe4f2746ad5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',
73    transmission: 'Automatic',
74    fuelType: 'Diesel',
102    category: 'Luxury',
103    price: 250,
104    image: 'https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',
105    transmission: 'Automatic',
106    fuelType: 'Petrol',
134    category: 'Sports',
135    price: 300,
136    image: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',
137    transmission: 'Automatic',
138    fuelType: 'Petrol',
166    category: 'SUV',
167    price: 180,
168    image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',
169    transmission: 'Automatic',
170    fuelType: 'Petrol',
198    category: 'Supercar',
199    price: 1200,
200    image: 'https://images.unsplash.com/photo-1580414057403-c5f451f30e1c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',
201    transmission: 'Automatic',
202    fuelType: 'Petrol',
230    category: 'Ultra Luxury',
231    price: 1500,
232    image: 'https://images.unsplash.com/photo-1631295868223-63265b40d9cc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80',
233    transmission: 'Automatic',
234    fuelType: 'Petrol',

4
5const CarCard = ({ car }) => {
6  const { id, name, image, price, category, transmission, fuelType, seats } = car;
7
8  return (
10      <div className="relative overflow-hidden group">
11        <img 
12          src={image} 
13          alt={name} 
14          className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"