redi/astro_autoservices
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Новые правки в компоненты

Browse source
This commit is contained in:
Web-serfer 2026-05-11 19:06:31 +05:00
parent 6fd4498853
commit f5b6494668
4 changed files with 14 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/ContactForm.astro
View file

@ -3,10 +3,10 @@
<section id="Контакты" class="py-24 bg-white relative overflow-hidden"> <section id="Контакты" class="py-24 bg-white relative overflow-hidden">
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center"> <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
<div> <div class="text-center md:text-left">
<h2 class="text-4xl md:text-5xl font-bold mb-8">Ждем вас в нашем сервисе</h2> <h2 class="text-4xl md:text-5xl font-bold mb-8">Ждем вас в нашем сервисе</h2>
<div class="space-y-8"> <div class="space-y-8">
<div class="flex gap-4"> <div class="flex gap-4 items-center">
<div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0"> <div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/> <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
@ -18,7 +18,7 @@
<p class="text-gray-600">г. Сургут, ул. Профсоюзов, 45 (Пример)</p> <p class="text-gray-600">г. Сургут, ул. Профсоюзов, 45 (Пример)</p>
</div> </div>
</div> </div>
<div class="flex gap-4"> <div class="flex gap-4 items-center">
<div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0"> <div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
@ -30,7 +30,7 @@
<p class="text-gray-600">+7 (900) 000-00-00</p> <p class="text-gray-600">+7 (900) 000-00-00</p>
</div> </div>
</div> </div>
<div class="flex gap-4"> <div class="flex gap-4 items-center">
<div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0"> <div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/> <circle cx="12" cy="12" r="10"/>
@ -46,7 +46,7 @@
</div> </div>
</div> </div>
<div class="glass-panel rounded-[2rem] p-8 md:p-12 relative"> <div class="glass-panel rounded-[2rem] p-8 md:p-12 relative text-center">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-[#E51937]/10 rounded-full blur-2xl" /> <div class="absolute -top-4 -right-4 w-24 h-24 bg-[#E51937]/10 rounded-full blur-2xl" />
<h3 class="text-2xl font-bold mb-6">Остались вопросы?</h3> <h3 class="text-2xl font-bold mb-6">Остались вопросы?</h3>
<p class="text-gray-500 mb-8 font-light">Оставьте ваши контакты, и мы перезвоним вам в течение 15 минут для консультации.</p> <p class="text-gray-500 mb-8 font-light">Оставьте ваши контакты, и мы перезвоним вам в течение 15 минут для консультации.</p>

12
src/components/Hero.astro
View file

@ -4,15 +4,15 @@
<section class="relative h-screen flex items-center overflow-hidden bg-[#1a1a1a]"> <section class="relative h-screen flex items-center overflow-hidden bg-[#1a1a1a]">
<div class="absolute inset-0 z-0"> <div class="absolute inset-0 z-0">
<img <img
src="/images/porch_car.avif" src="/images/porch_car.avif"
alt="Автомобиль" alt="Автомобиль"
class="w-full h-full object-cover opacity-40" class="w-full h-full object-cover opacity-40"
/> />
<div class="absolute inset-0 bg-gradient-to-r from-[#1a1a1a] via-[#1a1a1a]/60 to-transparent" /> <div class="absolute inset-0 bg-gradient-to-r from-[#1a1a1a] via-[#1a1a1a]/60 to-transparent" />
</div> </div>
<div class="relative z-10 max-w-7xl mx-auto px-6 w-full"> <div class="relative z-10 max-w-7xl mx-auto px-6 w-full">
<div class="max-w-2xl animate-fade-in-up"> <div class="max-w-2xl animate-fade-in-up text-center">
<div class="inline-flex items-center gap-2 px-3 py-1 bg-white/10 backdrop-blur-md rounded-full text-[#E51937] text-xs font-bold uppercase tracking-widest mb-6"> <div class="inline-flex items-center gap-2 px-3 py-1 bg-white/10 backdrop-blur-md rounded-full text-[#E51937] text-xs font-bold uppercase tracking-widest mb-6">
<span class="w-2 h-2 rounded-full bg-[#E51937] animate-pulse-dot" /> <span class="w-2 h-2 rounded-full bg-[#E51937] animate-pulse-dot" />
Специализированный центр в Сургуте Специализированный центр в Сургуте
@ -24,11 +24,11 @@
<p class="text-lg md:text-xl text-gray-300 mb-10 font-light"> <p class="text-lg md:text-xl text-gray-300 mb-10 font-light">
Опытные специалисты, современное оборудование и только качественные запчасти. Ваш автомобиль в надежных руках профессионалов. Опытные специалисты, современное оборудование и только качественные запчасти. Ваш автомобиль в надежных руках профессионалов.
</p> </p>
<div class="flex flex-col sm:flex-row gap-4"> <div class="flex flex-col sm:flex-row gap-4 items-center">
<button class="bg-[#E51937] text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-red-700 transition-all transform hover:scale-105 shadow-xl shadow-red-600/20"> <button class="w-full sm:w-auto bg-[#E51937] text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-red-700 transition-all transform hover:scale-105 shadow-xl shadow-red-600/20">
Записаться на сервис Записаться на сервис
</button> </button>
<a href="#Услуги" class="bg-white/10 backdrop-blur-md text-white border border-white/20 px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/20 transition-all text-center"> <a href="#Услуги" class="w-full sm:w-auto bg-white/10 backdrop-blur-md text-white border border-white/20 px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/20 transition-all text-center">
Посмотреть услуги Посмотреть услуги
</a> </a>
</div> </div>

6
src/components/Services.astro
View file

@ -42,11 +42,11 @@ const services = [
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
{services.map((service, i) => ( {services.map((service, i) => (
<div class="bg-white p-8 rounded-3xl border border-gray-100 flex flex-col items-start text-left group transition-all hover:shadow-xl hover:-translate-y-1"> <div class="bg-white p-8 rounded-3xl border border-gray-100 flex flex-col items-center text-center group transition-all hover:shadow-xl hover:-translate-y-1">
<div class="w-12 h-12 bg-[#1a1a1a] text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-[#E51937] transition-colors" set:html={service.icon} /> <div class="w-12 h-12 bg-[#1a1a1a] text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-[#E51937] transition-colors" set:html={service.icon} />
<h4 class="text-xl font-bold mb-2">{service.title}</h4> <h4 class="text-xl font-bold mb-2 text-center">{service.title}</h4>
<p class="text-gray-500 text-sm mb-6 flex-grow">{service.desc}</p> <p class="text-gray-500 text-sm mb-6 flex-grow">{service.desc}</p>
<button class="flex items-center gap-1 text-[#E51937] text-sm font-bold uppercase tracking-wider"> <button class="flex items-center justify-center gap-1 text-[#E51937] text-sm font-bold uppercase tracking-wider w-full">
Подробнее Подробнее
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 18 6-6-6-6"/> <path d="m9 18 6-6-6-6"/>

1
src/layouts/Layout.astro
View file

@ -7,7 +7,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Toyota & Lexus Service Сургут</title> <title>Toyota & Lexus Service Сургут</title>
<meta name="description" content="Профессиональное обслуживание и ремонт автомобилей Toyota и Lexus в Сургуте" /> <meta name="description" content="Профессиональное обслуживание и ремонт автомобилей Toyota и Lexus в Сургуте" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">