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

Umbau zu tailwind + mobile friendly: LandingPage & Footer

Browse Source
This commit is contained in:
Andreas Knuth
2024-07-02 19:17:14 +02:00
parent 3d5b7e3f39
commit 958f0afd9b
32 changed files with 1464 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
<div class="container">
<!-- <div class="container">
<div class="wrapper">
<div class="py-3 px-6 flex align-items-center justify-content-between relative">
<a routerLink="/home"><img src="../../../assets/images/header-logo.png" alt="Image" height="50" /></a>
@@ -100,4 +100,108 @@
</div>
</div>
</div>
</div> -->
<header class="w-full flex justify-between items-center p-4 bg-white fixed top-0 z-10 h-16 md:h-20">
<img src="assets/images/header-logo.png" alt="Logo" class="h-8 md:h-10" />
<div class="hidden md:flex items-center space-x-4">
<a href="#" class="text-gray-800">Pricing</a>
<a href="#" class="text-blue-600 border border-blue-600 px-3 py-2 rounded">Log In</a>
<a href="#" class="text-white bg-blue-600 px-4 py-2 rounded">Register</a>
</div>
<button (click)="toggleMenu()" class="md:hidden text-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</header>
<div *ngIf="isMenuOpen" class="fixed inset-0 bg-gray-800 bg-opacity-75 z-20">
<div class="flex flex-col items-center justify-center h-full">
<a href="#" class="text-white text-xl py-2">Pricing</a>
<a href="#" class="text-white text-xl py-2">Log In</a>
<a href="#" class="text-white text-xl py-2">Register</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">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<main class="flex flex-col items-center justify-center mt-16 md:mt-20 lg:px-4 w-full flex-grow">
<div class="bg-cover-custom py-20 md:py-40 flex flex-col w-full">
<div class="flex justify-center w-full">
<div class="w-11/12 md:w-2/3 lg:w-1/2">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-blue-900 mb-4 text-center">Find businesses for sale.</h1>
<p class="text-base md:text-lg lg:text-xl text-blue-600 mb-8 text-center">Unlocking Exclusive Opportunities - Empowering Entrepreneurial Dreams</p>
<div class="bg-white bg-opacity-80 p-2 rounded-lg shadow-lg w-full">
<!-- <div class="flex flex-wrap justify-center space-x-2 space-y-2 md:space-x-4 md:space-y-0 mb-4">
<button class="text-white bg-blue-600 font-semibold px-3 py-2 rounded text-sm md:text-base">Businesses</button>
<button class="text-gray-600 px-3 py-2 text-sm md:text-base">Commercial Property</button>
<button class="text-gray-600 px-3 py-2 text-sm md:text-base">Professionals/Broker Directory</button>
</div> -->
<!-- <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400">
<li class="me-2">
<a href="#" aria-current="page" class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500">Businesses</a>
</li>
<li class="me-2">
<a href="#" class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Properties</a>
</li>
<li class="me-2">
<a href="#" class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Professionals</a>
</li>
</ul> -->
<div class="text-sm lg:text-base text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700 flex justify-center">
<ul class="flex flex-wrap -mb-px">
<li class="me-2">
<a
(click)="changeTab('business')"
[ngClass]="
activeTabAction === 'business'
? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
: ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
"
class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg"
>Businesses</a
>
</li>
<li class="me-2">
<a
(click)="changeTab('commercialProperty')"
[ngClass]="
activeTabAction === 'commercialProperty'
? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
: ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
"
class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg"
>Properties</a
>
</li>
<li class="me-2">
<a
(click)="changeTab('broker')"
[ngClass]="
activeTabAction === 'broker'
? ['text-blue-600', 'border-blue-600', 'active', 'dark:text-blue-500', 'dark:border-blue-500']
: ['border-transparent', 'hover:text-gray-600', 'hover:border-gray-300', 'dark:hover:text-gray-300']
"
class="hover:cursor-pointer inline-block p-4 border-b-2 rounded-t-lg"
>Professionals</a
>
</li>
</ul>
</div>
<div class="flex items-center border border-gray-300 rounded-full p-2">
<input type="text" placeholder="AI Search" class="flex-grow px-4 py-2 outline-none rounded-full text-sm md:text-base" />
<button class="bg-blue-600 text-white p-2 rounded-full">
<svg class="h-5 w-5 md:h-6 md:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M10.5 18.5A7.5 7.5 0 1018 10.5 7.5 7.5 0 0010.5 18.5z"></path>
</svg>
</button>
</div>
<div class="mt-4 text-gray-600 text-sm md:text-base text-center">Or search using filters ▼</div>
</div>
</div>
</div>
</div>
</main>

46
bizmatch/src/app/pages/home/home.component.scss
View File

@@ -1,24 +1,30 @@
:host {
height: 100%;
}
// :host {
// height: 100%;
// }
.container {
background-image: url(../../../assets/images/index-bg.webp);
// background-image: url(../../../assets/images/1_Version.jpg);
//background-image: url(../../../assets/images/2_1_Version.jpg);
// .container {
// background-image: url(../../../assets/images/index-bg.webp);
// background-size: cover;
// background-position: center;
// height: 100vh;
// }
// .combo_lp {
// width: 200px;
// }
// .p-button-white {
// color: aliceblue;
// }
// .mt-11 {
// margin-top: 5.9rem !important;
// }
// .mt-22 {
// margin-top: 9.7rem !important;
// }
.bg-cover-custom {
background-image: url('/assets/images/index-bg.webp');
background-size: cover;
background-position: center;
height: 100vh;
}
.combo_lp {
width: 200px;
}
.p-button-white {
color: aliceblue;
}
.mt-11 {
margin-top: 5.9rem !important;
}
.mt-22 {
margin-top: 9.7rem !important;
border-radius: 20px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
min-height: calc(100vh - 4rem);
}

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

@@ -27,26 +27,27 @@ export class HomeComponent {
minPrice: string;
criteria: ListingCriteria;
states = [];
isMenuOpen = false;
public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public keycloakService: KeycloakService, private listingsService: ListingsService) {
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
resetCriteria(this.criteria);
}
async ngOnInit() {
if (this.activeTabAction === 'business' || this.activeTabAction === 'commercialProperty') {
const statesResult = await this.listingsService.getAllStates(this.activeTabAction);
this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
} else {
this.states = [];
}
// if (this.activeTabAction === 'business' || this.activeTabAction === 'commercialProperty') {
// const statesResult = await this.listingsService.getAllStates(this.activeTabAction);
// this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
// } else {
// this.states = [];
// }
}
async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
this.activeTabAction = tabname;
if (this.activeTabAction === 'business' || this.activeTabAction === 'commercialProperty') {
const statesResult = await this.listingsService.getAllStates(this.activeTabAction);
this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
} else {
this.states = this.selectOptions.states;
}
// if (this.activeTabAction === 'business' || this.activeTabAction === 'commercialProperty') {
// const statesResult = await this.listingsService.getAllStates(this.activeTabAction);
// this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
// } else {
// this.states = this.selectOptions.states;
// }
}
search() {
const data = { keep: true };
@@ -61,4 +62,7 @@ export class HomeComponent {
register() {
this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
}
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
}

16
bizmatch/src/app/pages/subscription/account/account.component.html
View File

@@ -9,15 +9,27 @@
<div class="flex-auto p-fluid">
@if (user){
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<div class="mb-4 col-12 md:col-4">
<label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
<input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email" />
<p class="font-italic text-xs line-height-1">You can only modify your email by contacting us at support&#64;bizmatch.net</p>
</div>
<div class="mb-4 col-12 md:col-6">
<div class="mb-4 col-12 md:col-4">
<label for="customerType" class="block font-medium text-900 mb-2">Customer Type</label>
<p-dropdown id="customerType" [options]="selectOptions?.customerTypes" [(ngModel)]="user.customerType" optionLabel="name" optionValue="value" placeholder="State" [style]="{ width: '100%' }"></p-dropdown>
</div>
<div class="mb-4 col-12 md:col-4">
<label for="customerType" class="block font-medium text-900 mb-2">Professional Role</label>
<p-dropdown
id="customerSubType"
[options]="selectOptions?.customerSubTypes"
[(ngModel)]="user.customerSubType"
optionLabel="name"
optionValue="value"
placeholder="State"
[style]="{ width: '100%' }"
></p-dropdown>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">

14
bizmatch/src/app/pages/subscription/account/account.component.ts
View File

@@ -75,7 +75,17 @@ export class AccountComponent {
try {
this.user = await this.userService.getByMail(email);
} catch (e) {
this.user = { email, firstname: keycloakUser.firstName, lastname: keycloakUser.lastName, areasServed: [], licensedIn: [], companyOverview: '', offeredServices: '', customerType: 'broker' };
this.user = {
email,
firstname: keycloakUser.firstName,
lastname: keycloakUser.lastName,
areasServed: [],
licensedIn: [],
companyOverview: '',
offeredServices: '',
customerType: 'professional',
customerSubType: 'broker',
};
this.user = await this.userService.save(this.user);
}
}
@@ -122,7 +132,7 @@ export class AccountComponent {
this.user.areasServed.splice(this.user.areasServed.length - 1, 1);
}
get isProfessional() {
return this.user.customerType === 'broker' || this.user.customerType === 'professional';
return this.user.customerType === 'professional';
}
select(event: any, type: 'company' | 'profile') {
const imageUrl = URL.createObjectURL(event.files[0]);