aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

feat: Initialize Angular SSR application with core pages, components, and server setup.

Browse Source
This commit is contained in:
Timo
2026-01-03 12:53:37 +01:00
parent 0ac17ef155
commit b52e47b653
28 changed files with 1115 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
bizmatch/src/app/pages/home/home.component.html
View File

@@ -6,7 +6,7 @@
} @else {
<!-- <a routerLink="/pricing" class="text-neutral-800">Pricing</a> -->
<a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Log In</a>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white bg-primary-600 px-4 py-2 rounded">Register</a>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white bg-primary-600 px-4 py-2 rounded">Sign Up</a>
<!-- <a routerLink="/login" class="text-primary-500 hover:underline">Login/Register</a> -->
}
</div>
@@ -24,7 +24,7 @@
<a routerLink="/account" class="text-white text-xl py-2">Account</a>
} @else {
<a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-white text-xl py-2">Log In</a>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white text-xl py-2">Register</a>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white text-xl py-2">Sign Up</a>
}
<button (click)="toggleMenu()" class="text-white mt-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -191,65 +191,6 @@
</div>
</div>
<!-- Trust & Social Proof Section -->
<div class="w-full px-4 mt-8">
<div class="trust-section-container bg-white rounded-xl py-10 px-6 md:px-10 border border-neutral-200">
<div class="max-w-6xl mx-auto">
<h2 class="text-2xl md:text-3xl font-semibold text-center text-neutral-800 mb-2">Trusted by Thousands</h2>
<p class="text-center text-neutral-500 mb-10 text-base">Join thousands of successful buyers and sellers on BizMatch</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
<!-- Trust Badge 1 -->
<div class="trust-badge text-center">
<div class="trust-icon inline-flex items-center justify-center w-12 h-12 bg-neutral-100 text-neutral-600 rounded-full mb-3">
<i class="fas fa-shield-alt text-lg"></i>
</div>
<h3 class="text-base font-semibold text-neutral-800 mb-1">Verified Listings</h3>
<p class="text-sm text-neutral-500">All business listings are verified and reviewed by our team</p>
</div>
<!-- Trust Badge 2 -->
<div class="trust-badge text-center">
<div class="trust-icon inline-flex items-center justify-center w-12 h-12 bg-neutral-100 text-neutral-600 rounded-full mb-3">
<i class="fas fa-users text-lg"></i>
</div>
<h3 class="text-base font-semibold text-neutral-800 mb-1">Expert Support</h3>
<p class="text-sm text-neutral-500">Connect with licensed business brokers and advisors</p>
</div>
<!-- Trust Badge 3 -->
<div class="trust-badge text-center">
<div class="trust-icon inline-flex items-center justify-center w-12 h-12 bg-neutral-100 text-neutral-600 rounded-full mb-3">
<i class="fas fa-lock text-lg"></i>
</div>
<h3 class="text-base font-semibold text-neutral-800 mb-1">Secure Platform</h3>
<p class="text-sm text-neutral-500">Your information is protected with enterprise-grade security</p>
</div>
</div>
<!-- Stats Row -->
<div class="stats-section grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mt-10 pt-6 border-t border-neutral-100">
<div class="text-center">
<div class="stat-number text-2xl md:text-3xl font-semibold text-neutral-700 mb-1">{{ activeListingsCount | number:'1.0-0' }}+</div>
<div class="text-xs md:text-sm text-neutral-500">Active Listings</div>
</div>
<div class="text-center">
<div class="stat-number text-2xl md:text-3xl font-semibold text-neutral-700 mb-1">{{ successfulSalesCount | number:'1.0-0' }}+</div>
<div class="text-xs md:text-sm text-neutral-500">Successful Sales</div>
</div>
<div class="text-center">
<div class="stat-number text-2xl md:text-3xl font-semibold text-neutral-700 mb-1">{{ brokersCount | number:'1.0-0' }}+</div>
<div class="text-xs md:text-sm text-neutral-500">Business Brokers</div>
</div>
<div class="text-center">
<div class="stat-number text-2xl md:text-3xl font-semibold text-neutral-700 mb-1">24/7</div>
<div class="text-xs md:text-sm text-neutral-500">Platform Access</div>
</div>
</div>
</div>
</div>
</div>
<!-- FAQ Section for SEO/AEO -->
<div class="w-full px-4 mt-12 max-w-4xl mx-auto">
<app-faq [faqItems]="faqItems"></app-faq>

47
bizmatch/src/app/pages/home/home.component.ts
View File

@@ -59,12 +59,6 @@ export class HomeComponent {
showInput: boolean = true;
tooltipTargetBeta = 'tooltipTargetBeta';
// Counter animation
activeListingsCount = 0;
successfulSalesCount = 0;
brokersCount = 0;
hasAnimated = false;
// FAQ data optimized for AEO (Answer Engine Optimization) and Featured Snippets
faqItems: FAQItem[] = [
{
@@ -200,47 +194,6 @@ export class HomeComponent {
this.user = map2User(token);
this.loadCities();
this.setTotalNumberOfResults();
// Setup intersection observer for counter animation
this.setupCounterAnimation();
}
setupCounterAnimation() {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !this.hasAnimated) {
this.hasAnimated = true;
this.animateCounter('activeListingsCount', 1000, 2000);
this.animateCounter('successfulSalesCount', 500, 2000);
this.animateCounter('brokersCount', 50, 2000);
}
});
},
{ threshold: 0.3 }
);
// Wait for the element to be available
setTimeout(() => {
const statsElement = document.querySelector('.stats-section');
if (statsElement) {
observer.observe(statsElement);
}
}, 100);
}
animateCounter(property: 'activeListingsCount' | 'successfulSalesCount' | 'brokersCount', target: number, duration: number) {
const start = 0;
const increment = target / (duration / 16); // 60fps
const step = () => {
this[property] += increment;
if (this[property] < target) {
requestAnimationFrame(step);
} else {
this[property] = target;
}
};
requestAnimationFrame(step);
}
changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {