Projects/3BIT/winter-semester/IIS/xnecasr00/resources/views/contact.blade.php
2026-04-14 19:28:46 +02:00

249 lines
7 KiB
PHP

@extends('layouts.customer')
@section('title', 'Contact Us - Winery')
@section('content')
<div class="contact-page">
<!-- Page Header -->
<div class="page-header">
<h1>Contact Us</h1>
<p class="subtitle">We'd love to hear from you</p>
</div>
<div class="contact-container">
<!-- Contact Information Section -->
<div class="contact-info-section">
<h2>Get in Touch</h2>
<p class="intro-text">
Have questions about our wines or want to visit our winery?
Feel free to reach out to us using the information below.
</p>
<div class="info-cards">
<div class="info-card">
<div class="info-icon">
<svg fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
</div>
<h3>Visit Us</h3>
<p>
Vineyard Lane 123<br>
Wine Valley, 12345<br>
Czech Republic
</p>
</div>
<div class="info-card">
<div class="info-icon">
<svg fill="currentColor" viewBox="0 0 20 20">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
</svg>
</div>
<h3>Call Us</h3>
<p>
Phone: +420 123 456 789<br>
Fax: +420 123 456 788
</p>
</div>
<div class="info-card">
<div class="info-icon">
<svg fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
</svg>
</div>
<h3>Email Us</h3>
<p>
info@winery.com<br>
sales@winery.com
</p>
</div>
<div class="info-card">
<div class="info-icon">
<svg fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
</svg>
</div>
<h3>Opening Hours</h3>
<p>
Monday - Friday: 9:00 - 18:00<br>
Saturday: 10:00 - 16:00<br>
Sunday: Closed
</p>
</div>
</div>
</div>
</div>
<!-- Map or Additional Info Section (Optional) -->
<div class="additional-info-section">
<div class="info-box">
<h3>Wine Tastings</h3>
<p>
We offer guided wine tastings by appointment. Experience our wines paired with local delicacies
in our beautiful tasting room overlooking the vineyards.
</p>
</div>
<div class="info-box">
<h3>Vineyard Tours</h3>
<p>
Join us for a tour of our vineyards and winery. Learn about our winemaking process and the
history of our estate. Tours available on weekends by reservation.
</p>
</div>
<div class="info-box">
<h3>Private Events</h3>
<p>
Our winery is available for private events, corporate gatherings, and celebrations.
Contact us to discuss your special occasion.
</p>
</div>
</div>
</div>
<style>
.contact-page {
max-width: 100%;
}
.page-header {
text-align: center;
margin-bottom: 3rem;
}
.page-header h1 {
font-size: 2.5rem;
color: #2d3748;
margin-bottom: 0.5rem;
font-weight: 700;
}
.subtitle {
font-size: 1.1rem;
color: #718096;
}
/* Contact Container */
.contact-container {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
/* Contact Info Section */
.contact-info-section h2 {
font-size: 2rem;
color: #2d3748;
margin-bottom: 1.5rem;
font-weight: 700;
}
.intro-text {
font-size: 1.1rem;
color: #4a5568;
line-height: 1.6;
margin-bottom: 2rem;
}
.info-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.info-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
}
.info-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.info-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #1a365d;
margin-bottom: 1rem;
}
.info-icon svg {
width: 24px;
height: 24px;
}
.info-card h3 {
font-size: 1.25rem;
color: #2d3748;
margin: 0 0 0.75rem 0;
font-weight: 600;
}
.info-card p {
font-size: 1rem;
color: #718096;
line-height: 1.6;
margin: 0;
}
/* Additional Info Section */
.additional-info-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 4rem;
}
.info-box {
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
padding: 2rem;
border-radius: 12px;
border-left: 4px solid #89b4d9;
}
.info-box h3 {
font-size: 1.25rem;
color: #2d3748;
margin: 0 0 1rem 0;
font-weight: 600;
}
.info-box p {
font-size: 1rem;
color: #4a5568;
line-height: 1.6;
margin: 0;
}
/* Mobile Responsive */
@media (max-width: 968px) {
.info-cards {
grid-template-columns: 1fr;
}
.additional-info-section {
grid-template-columns: 1fr;
}
.page-header h1 {
font-size: 2rem;
}
}
</style>
@endsection