Working on the homepage
This commit is contained in:
Shaun Collins
@@ -1,42 +1,126 @@
|
||||
@extends('layouts.main')
|
||||
@section('content')
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
<div class="container mt-5">
|
||||
<h1 class="mt-4 mb-4">Contact Us</h1>
|
||||
<div class="row">
|
||||
<div class="col-md-8 offset-md-2">
|
||||
<form action="{{ route('contact.submit') }}" method="POST">
|
||||
@csrf
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Your Name</label>
|
||||
<input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" required>
|
||||
<div class="row g-5">
|
||||
<!-- Contact Information -->
|
||||
<div class="col-lg-5">
|
||||
<h1 class="fw-bold text-primary mb-4">Get in Touch</h1>
|
||||
<p class="lead text-muted mb-5">
|
||||
Whether you're planning a house move, office relocation, or need professional waste management, our team is ready to help. Reach out today for a free, no-obligation quote.
|
||||
</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<a href="tel:{{ config('app.phone') }}" class="contact-card d-flex align-items-center mb-3 p-3 rounded-3 border bg-white shadow-sm text-decoration-none transition-all">
|
||||
<div class="flex-shrink-0 bg-primary text-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
||||
<i class="fas fa-phone-alt"></i>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
|
||||
<div class="ms-4">
|
||||
<h5 class="mb-0 fw-bold text-dark">Phone</h5>
|
||||
<p class="mb-0 text-muted">{{ config('app.phone') }}</p>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message" class="form-label">Message</label>
|
||||
<textarea class="form-control" id="message" name="message" rows="5" placeholder="Enter your message" required></textarea>
|
||||
<div class="ms-auto text-primary">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="mailto:{{ config('app.email') ?: 'info@stumovesyou.co.uk' }}" class="contact-card d-flex align-items-center mb-3 p-3 rounded-3 border bg-white shadow-sm text-decoration-none transition-all">
|
||||
<div class="flex-shrink-0 bg-primary text-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<div class="ms-4">
|
||||
<h5 class="mb-0 fw-bold text-dark">Email</h5>
|
||||
<p class="mb-0 text-muted">{{ config('app.email') ?: 'info@stumovesyou.co.uk' }}</p>
|
||||
</div>
|
||||
<div class="ms-auto text-primary">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="{{ config('social.links.facebook.url') }}" target="_blank" class="contact-card d-flex align-items-center mb-3 p-3 rounded-3 border bg-white shadow-sm text-decoration-none transition-all">
|
||||
<div class="flex-shrink-0 bg-primary text-secondary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</div>
|
||||
<div class="ms-4">
|
||||
<h5 class="mb-0 fw-bold text-dark">Facebook</h5>
|
||||
<p class="mb-0 text-muted">Stu Moves You</p>
|
||||
</div>
|
||||
<div class="ms-auto text-primary">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5 text-center justify-content-center">
|
||||
@foreach(config('social.links') as $link)
|
||||
<div class="col-6 col-md-8 mb-4">
|
||||
<a href="{{ $link['url'] }}" class="social-link text-decoration-none d-flex align-items-center justify-content-center gap-2 p-3 border rounded social-link"
|
||||
target="_blank">
|
||||
<i class="{{ $link['icon'] }} fs-3 text-primary"></i>
|
||||
<span style="font-size: 1rem; font-weight: bold;">{{ $link['name'] }}</span>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<div class="col-lg-7">
|
||||
<div class="card border-0 shadow-sm rounded-3 bg-light">
|
||||
<div class="card-body p-4 p-md-5">
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success border-0 shadow-sm mb-4">
|
||||
<i class="fas fa-check-circle me-2"></i> {{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('contact.submit') }}" method="POST">
|
||||
@csrf
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control border-0" id="name" name="name" placeholder="Your Name" required>
|
||||
<label for="name">Your Name</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-floating">
|
||||
<input type="email" class="form-control border-0" id="email" name="email" placeholder="name@example.com" required>
|
||||
<label for="email">Email Address</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-floating">
|
||||
<textarea class="form-control border-0" placeholder="Leave a message here" id="message" name="message" style="height: 150px" required></textarea>
|
||||
<label for="message">Your Message</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary btn-lg px-5 py-3 w-100 fw-bold shadow-sm">
|
||||
Send Message <i class="fas fa-paper-plane ms-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(config('site.show_location') && config('site.map_key'))
|
||||
<div class="row mt-5">
|
||||
<div class="col-12">
|
||||
<div class="rounded-3 overflow-hidden shadow-sm">
|
||||
<iframe
|
||||
width="100%" height="400"
|
||||
frameborder="0" style="border:0"
|
||||
referrerpolicy="no-referrer-when-downgrade"
|
||||
src="https://www.google.com/maps/embed/v1/place?key={{ config('site.map_key') }}&q={{ config('site.address') }}"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<style>
|
||||
.contact-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.contact-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--bs-primary) !important;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
.contact-card:hover .flex-shrink-0 {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user