bizmatch-project/bizmatch-client/src/app/pages/home/home.component.html

252 lines
14 KiB
HTML

<!-- Navigation -->
<nav class="bg-white">
<div class="container mx-auto px-6 py-3 flex justify-between items-center">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-blue-800">
<img src="assets/images/header-logo.png" alt="BizMatch.net" class="h-10" />
</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-800 hover:text-blue-600">Home</a>
<a routerLink="/businessListings" class="text-blue-700 hover:font-bold">Businesses</a>
<a href="#services" class="text-gray-800 hover:text-blue-600">Services</a>
<a href="#location" class="text-gray-800 hover:text-blue-600">Location</a>
<a href="#contact" class="text-gray-800 hover:text-blue-600">Contact</a>
@if(user){
<a routerLink="/logout" class="text-gray-800 hover:text-blue-600">Logout</a>
}@else{
<a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-gray-800 hover:text-blue-600">Log In</a>
}
</div>
<div class="md:hidden">
<button class="text-gray-800 focus:outline-none" (click)="toggleMobileMenu()">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile menu (only shows when toggleMobileMenu is true) -->
<div *ngIf="showMobileMenu" class="md:hidden bg-white py-2 px-4">
<a href="#" class="block py-2 text-gray-800 hover:text-blue-600">Home</a>
<a href="#services" class="block py-2 text-gray-800 hover:text-blue-600">Services</a>
<a href="#location" class="block py-2 text-gray-800 hover:text-blue-600">Location</a>
<a href="#contact" class="block py-2 text-gray-800 hover:text-blue-600">Contact</a>
@if(user){
<a routerLink="/logout" class="block py-2 text-gray-800 hover:text-blue-600">Logout</a>
}@else{
<a routerLink="/login" [queryParams]="{ mode: 'login' }" class="block py-2 text-gray-800 hover:text-blue-600">Log In</a>
}
</div>
</nav>
<!-- Hero Section (made narrower) -->
<section class="hero-section flex items-center px-[2rem] py-[5rem]">
<div class="container mx-auto px-6 flex flex-col">
<!-- max-w-5xl makes it narrower -->
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 text-white">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">Connect with Your Ideal Business Opportunity</h1>
<p class="text-xl mb-8">BizMatch is your trusted partner in buying, selling, and valuing businesses in Texas.</p>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="assets/images/corpusChristiSkyline.jpg" alt="Business handshake" class="rounded-lg shadow-2xl" />
</div>
</div>
<div class="flex justify-center mt-10">
<a routerLink="/businessListings" class="bg-emerald-500 hover:bg-emerald-700 md:text-2xl text-lg text-white font-semibold px-8 py-4 rounded-full shadow-lg transition duration-300"> View Available Businesses </a>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-blue-800 mb-4">Our Services</h2>
<p class="text-gray-600 max-w-2xl mx-auto">We offer comprehensive business brokerage services to help you navigate the complex process of buying or selling a business.</p>
</div>
<div class="flex flex-wrap -mx-4">
<!-- Service 1 -->
<div class="w-full md:w-1/3 px-4 mb-8">
<div class="service-card bg-white rounded-lg filter md:drop-shadow-custom-bg drop-shadow-custom-bg-mobile p-8 h-full">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
<svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path
d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-blue-800 mb-4 text-center">Business Sales</h3>
<p class="text-gray-600 text-center">We help business owners prepare and market their businesses to qualified buyers, ensuring confidentiality throughout the process.</p>
</div>
</div>
<!-- Service 2 -->
<div class="w-full md:w-1/3 px-4 mb-8">
<div class="service-card bg-white rounded-lg filter md:drop-shadow-custom-bg drop-shadow-custom-bg-mobile p-8 h-full">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
<svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-blue-800 mb-4 text-center">Business Acquisitions</h3>
<p class="text-gray-600 text-center">We assist buyers in finding the right business opportunity, perform due diligence, and negotiate favorable terms for acquisition.</p>
</div>
</div>
<!-- Service 3 -->
<div class="w-full md:w-1/3 px-4 mb-8">
<div class="service-card bg-white rounded-lg filter md:drop-shadow-custom-bg drop-shadow-custom-bg-mobile p-8 h-full">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
<svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-blue-800 mb-4 text-center">Business Valuation</h3>
<p class="text-gray-600 text-center">Our expert team provides accurate business valuations based on industry standards, financial performance, and market conditions.</p>
</div>
</div>
</div>
<!-- Video Section -->
<div class="mt-16 text-center">
<h3 class="text-2xl font-semibold text-blue-800 mb-8">See How We Work</h3>
<div class="max-w-4xl mx-auto">
<div class="relative pb-[66.67%]">
<!-- 2/3 = 66.67% für 3:2 Seitenverhältnis -->
<video controls poster="assets/images/video-poster1.png" class="absolute inset-0 w-full h-full rounded-lg shadow-xl object-cover">
<source src="assets/videos/Bizmatch30Spot.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</div>
</section>
<!-- Why Choose Us Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-blue-800 mb-4">Why Choose BizMatch</h2>
<p class="text-gray-600 max-w-2xl mx-auto">With decades of experience in the business brokerage industry, we provide unparalleled service to our clients.</p>
</div>
<div class="flex flex-wrap -mx-4">
<!-- Feature 1 -->
<div class="w-full md:w-1/4 px-4 mb-8">
<div class="text-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
<svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-blue-800 mb-2">Experience</h3>
<p class="text-gray-600">Over 25 years of combined experience in business brokerage.</p>
</div>
</div>
<!-- Feature 2 -->
<div class="w-full md:w-1/4 px-4 mb-8">
<div class="text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 mx-auto">
<svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-blue-800 mb-2">Confidentiality</h3>
<p class="text-gray-600">We maintain strict confidentiality throughout the entire transaction process.</p>
</div>
</div>
<!-- Feature 3 -->
<div class="w-full md:w-1/4 px-4 mb-8">
<div class="text-center">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-blue-800 mb-2">Network</h3>
<p class="text-gray-600">Extensive network of qualified buyers and business owners throughout Texas.</p>
</div>
</div>
<!-- Feature 4 -->
<div class="w-full md:w-1/4 px-4 mb-8">
<div class="text-center">
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6 mx-auto">
<svg class="w-8 h-8 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-blue-800 mb-2">Personalized Approach</h3>
<p class="text-gray-600">Customized strategy for each client based on their unique business goals.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Location Section -->
<section id="location" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="flex flex-wrap items-stretch">
<!-- Changed from items-center to items-stretch -->
<div class="w-full lg:w-2/5 mb-12 lg:mb-0">
<div class="h-full flex flex-col">
<!-- Added flex container with h-full -->
<h2 class="text-3xl font-bold text-blue-800 mb-6">Visit Our Office</h2>
<p class="text-gray-600 mb-8 text-lg">Our team of business brokers is ready to assist you at our Corpus Christi location.</p>
<div class="bg-white p-6 rounded-lg shadow-lg flex-grow">
<!-- Added flex-grow to make it fill available space -->
<h3 class="text-xl font-semibold text-blue-800 mb-4">BizMatch Headquarters</h3>
<p class="text-gray-600 mb-2">1001 Blucher Street</p>
<p class="text-gray-600 mb-2">Corpus Christi, TX 78401</p>
<p class="text-gray-600 mb-6">United States</p>
<p class="text-gray-600 mb-2"><strong>Phone:</strong> (555) 123-4567</p>
<p class="text-gray-600"><strong>Email:</strong> info&#64;bizmatch.net</p>
</div>
</div>
</div>
<div class="w-full lg:w-3/5">
<div class="rounded-lg overflow-hidden shadow-xl h-full min-h-[384px]">
<!-- Changed h-96 to h-full with min-height -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3533.7894679685755!2d-97.38527228476843!3d27.773756032788047!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x866c1e3b8a9d0c0b%3A0x8f2c1d4c1a5c5b2c!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401%2C%20USA!5e0!3m2!1sen!2sde!4v1672531192743!5m2!1sen!2sde"
width="100%"
height="100%"
class="rounded-lg border-0"
style="min-height: 384px; display: block"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
>
</iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-blue-700">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold text-white mb-8">Ready to Get Started?</h2>
<p class="text-white text-xl mb-12 max-w-3xl mx-auto">Contact our team of experienced business brokers today for a confidential consultation about buying or selling a business.</p>
<a routerLink="/emailUs" class="bg-white text-blue-700 font-bold px-8 py-4 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 text-lg">Contact Us Now</a>
</div>
</section>
<!-- Footer -->