Fix hero and update responsive
This commit is contained in:
Çetin
parent
21d23ec9e7
commit
fc77e15f52
@ -71,6 +71,7 @@ export class AppMenuComponent implements OnInit {
|
|||||||
items: [
|
items: [
|
||||||
{label: 'Crud', icon: 'pi pi-fw pi-user-edit', routerLink: ['/pages/crud']},
|
{label: 'Crud', icon: 'pi pi-fw pi-user-edit', routerLink: ['/pages/crud']},
|
||||||
{label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']},
|
{label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']},
|
||||||
|
{label: 'Landing', icon: 'pi pi-fw pi-globe', routerLink: ['/landing']},
|
||||||
{label: 'Empty', icon: 'pi pi-fw pi-circle', routerLink: ['/pages/empty']}
|
{label: 'Empty', icon: 'pi pi-fw pi-circle', routerLink: ['/pages/empty']}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
<div class="surface-card">
|
<div class="surface-card">
|
||||||
<div class="py-4 px-4 mx-0 md:mx-8 md:px-8 flex align-items-center justify-content-between relative lg:static">
|
<div class="py-4 px-4 mx-0 md:mx-8 md:px-8 flex align-items-center justify-content-between relative lg:static">
|
||||||
<a class="flex align-items-center">
|
<a class="flex align-items-center">
|
||||||
<img src="assets/layout/images/logo-blue.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-gray-900 text-2xl line-height-3 mr-8">SAKAI</span>
|
<img src="assets/layout/images/logo-blue.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-gray-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span>
|
||||||
</a>
|
</a>
|
||||||
<a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
|
<a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
|
||||||
<i class="pi pi-bars text-4xl"></i>
|
<i class="pi pi-bars text-4xl"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 top-100 px-6 lg:px-0">
|
<div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 px-6 lg:px-0 z-2" style="top:92%">
|
||||||
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
||||||
<li>
|
<li>
|
||||||
<a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-gray-900 font-medium line-height-3">
|
<a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-gray-900 font-medium line-height-3">
|
||||||
@ -36,27 +36,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="py-4 px-4 lg:px-8 relative" id="hero-content">
|
<div class="grid py-4 px-4 lg:px-8 relative" id="hero">
|
||||||
<div class="w-100 md:w-5 mx-4 md:mx-8 mt-0 md:mt-4">
|
<div class="w-100 md:w-5 mx-4 md:mx-8 mt-0 md:mt-4">
|
||||||
<h1 class="text-6xl text-gray-900"><span class="font-light block">Eu sem integer</span> eget magna fermentum</h1>
|
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||||
<p class="font-light text-2xl line-height-3 md:mt-3 text-gray-700" style="max-width:500px;">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
|
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700" style="max-width:450px;">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
|
||||||
<button pButton pRipple type="button" class="p-button-rounded text-2xl border-none mt-5 bg-blue-500">Get Started</button>
|
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal line-height-3 px-3"></button>
|
||||||
</div>
|
</div>
|
||||||
<img id="hero-img" src="assets/layout/images/screen.png" alt="" class="absolute w-12 md:w-6 sm:bottom-0 md:top-0">
|
<img src="assets/layout/images/screen-1.png" alt="" class="static sm:mt-5 md:mt-0 md:absolute" style="right:10%;">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
|
<div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
|
||||||
<div class="grid justify-content-center">
|
<div class="grid justify-content-center">
|
||||||
|
|
||||||
<div class="col-12 text-center mt-8 mb-4">
|
<div class="col-12 text-center mt-8 mb-4">
|
||||||
<h2 class="text-gray-900">Marvelous Features</h2>
|
<h2 class="text-gray-900">Marvelous Features</h2>
|
||||||
<span class="text-gray-600 text-2xl">Placerat in egestas erat...</span>
|
<span class="text-gray-600 text-2xl">Placerat in egestas erat...</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0">
|
||||||
<div class="box-wrapper border-10 gradient-yellow">
|
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));">
|
||||||
<div class="p-3 border-10 surface-card">
|
<div class="p-3 surface-card" style="border-radius:8px;">
|
||||||
<div class="flex align-items-center justify-content-center bg-yellow-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="flex align-items-center justify-content-center bg-yellow-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||||
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
<i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
|
||||||
</div>
|
</div>
|
||||||
<h5 class="line-height-2">Easy to Use</h5>
|
<h5 class="line-height-2">Easy to Use</h5>
|
||||||
@ -65,10 +64,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0">
|
||||||
<div class="box-wrapper border-10 gradient-blue">
|
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));">
|
||||||
<div class="p-3 border-10 surface-card">
|
<div class="p-3 surface-card" style="border-radius:8px;">
|
||||||
<div class="flex align-items-center justify-content-center bg-cyan-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="flex align-items-center justify-content-center bg-cyan-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||||
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
<i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
|
||||||
</div>
|
</div>
|
||||||
<h5 class="line-height-2 text-gray-900">Fresh Design</h5>
|
<h5 class="line-height-2 text-gray-900">Fresh Design</h5>
|
||||||
@ -77,10 +76,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-0 md:pb-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:pb-5 mt-4 md:mt-0">
|
||||||
<div class="box-wrapper border-10 gradient-purple">
|
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2));">
|
||||||
<div class="p-3 border-10 surface-card">
|
<div class="p-3 surface-card" style="border-radius:8px;">
|
||||||
<div class="flex align-items-center justify-content-center bg-indigo-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="flex align-items-center justify-content-center bg-indigo-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||||
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
<i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
|
||||||
</div>
|
</div>
|
||||||
<h5 class="line-height-2 text-gray-900">Well Documented</h5>
|
<h5 class="line-height-2 text-gray-900">Well Documented</h5>
|
||||||
@ -89,10 +88,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0">
|
||||||
<div class="box-wrapper border-10 gradient-yellow-2">
|
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2));">
|
||||||
<div class="p-3 border-10 surface-card">
|
<div class="p-3 surface-card" style="border-radius:8px;">
|
||||||
<div class="flex align-items-center justify-content-center bg-bluegray-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="flex align-items-center justify-content-center bg-bluegray-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||||
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
|
<i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
|
||||||
</div>
|
</div>
|
||||||
<h5 class="line-height-2 text-gray-900">Responsive Layout</h5>
|
<h5 class="line-height-2 text-gray-900">Responsive Layout</h5>
|
||||||
@ -101,87 +100,91 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 md:pb-5 mt-4 md:mt-0">
|
||||||
<div class="shadow-1 p-3 border-round">
|
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2),rgba(160, 210, 250, 0.2));">
|
||||||
<div class="flex align-items-center justify-content-center bg-orange-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="p-3 surface-card" style="border-radius:8px;">
|
||||||
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
<div class="flex align-items-center justify-content-center bg-orange-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||||
|
<i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="line-height-2 text-gray-900">Clean Code</h5>
|
||||||
|
<span class="line-height-1 text-gray-600">Condimentum lacinia quis vel eros.</span>
|
||||||
</div>
|
</div>
|
||||||
<h5 class="line-height-1 text-gray-900">Clean Code</h5>
|
|
||||||
<span class="line-height-1 text-gray-600">Condimentum lacinia quis vel eros.</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-0 md:pb-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:pb-5 mt-4 md:mt-0">
|
||||||
<div class="shadow-1 p-3 border-round">
|
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2));">
|
||||||
<div class="flex align-items-center justify-content-center bg-pink-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="p-3 surface-card" style="border-radius:8px;">
|
||||||
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
<div class="flex align-items-center justify-content-center bg-pink-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||||
|
<i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="line-height-2 text-gray-900">Dark Mode</h5>
|
||||||
|
<span class="line-height-1 text-gray-600">Convallis tellus id interdum velit laoreet.</span>
|
||||||
</div>
|
</div>
|
||||||
<h5 class="line-height-1 text-gray-900">Dark Mode</h5>
|
|
||||||
<span class="line-height-1 text-gray-600">Convallis tellus id interdum velit laoreet.</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 mt-4 md:mt-0">
|
||||||
<div class="shadow-1 p-3 border-round">
|
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2));">
|
||||||
<div class="flex align-items-center justify-content-center bg-teal-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="p-3 surface-card" style="border-radius:8px;">
|
||||||
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
<div class="flex align-items-center justify-content-center bg-teal-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||||
|
<i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="line-height-2 text-gray-900">Ready to Use</h5>
|
||||||
|
<span class="line-height-1 text-gray-600">Mauris sit amet massa vitae.</span>
|
||||||
</div>
|
</div>
|
||||||
<h5 class="line-height-1 text-gray-900">Ready to Use</h5>
|
|
||||||
<span class="line-height-1 text-gray-600">Mauris sit amet massa vitae.</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:pr-5 mt-4 md:mt-0">
|
||||||
<div class="shadow-1 p-3 border-round">
|
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2));">
|
||||||
<div class="flex align-items-center justify-content-center bg-blue-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="p-3 surface-card" style="border-radius:8px;">
|
||||||
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
<div class="flex align-items-center justify-content-center bg-blue-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||||
|
<i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
|
||||||
|
</div>
|
||||||
|
<h5 class="line-height-2 text-gray-900">Modern Practices</h5>
|
||||||
|
<span class="line-height-1 text-gray-600">Elementum nibh tellus molestie nunc non.</span>
|
||||||
</div>
|
</div>
|
||||||
<h5 class="line-height-1 text-gray-900">Modern Practices</h5>
|
|
||||||
<span class="line-height-1 text-gray-600">Elementum nibh tellus molestie nunc non.</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-0">
|
<div class="col-12 md:col-6 lg:col-4 p-0 mt-4 md:mt-0">
|
||||||
<div class="shadow-1 p-3 border-round">
|
<div style="padding:2px; border-radius:10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2));">
|
||||||
<div class="flex align-items-center justify-content-center bg-purple-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="p-3 surface-card" style="border-radius:8px;">
|
||||||
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
<div class="flex align-items-center justify-content-center bg-purple-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
|
||||||
</div>
|
<i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
|
||||||
<h5 class="line-height-1 text-gray-900">Privacy</h5>
|
</div>
|
||||||
<span class="line-height-1 text-gray-600">Neque egestas congue quisque.</span>
|
<h5 class="line-height-2 text-gray-900">Privacy</h5>
|
||||||
</div>
|
<span class="line-height-1 text-gray-600">Neque egestas congue quisque.</span>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 border-round mt-8 mb-8 p-8" id="testimonial-card">
|
|
||||||
<div class="grid flex-column justify-content-center align-items-center">
|
|
||||||
<div class="col-12 md:col-6 text-center">
|
|
||||||
<h3 class="text-gray-900">Joséphine Miller</h3>
|
|
||||||
<span class="text-gray-600 text-2xl">Peak Interactive</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 md:col-8 text-center mt-4">
|
|
||||||
<p class="text-gray-900 line-height-4 text-2xl">“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 md:col-8 text-center mt-4">
|
|
||||||
<img src="assets/layout/images/peak-logo.svg" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 mt-8 mb-8 p-2 md:p-8" style="border-radius:20px; background:linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%);">
|
||||||
|
<div class="flex flex-column justify-content-center align-items-center text-center py-3 px-3">
|
||||||
|
<h3 class="text-gray-900">Joséphine Miller</h3>
|
||||||
|
<span class="text-gray-600 text-2xl">Peak Interactive</span>
|
||||||
|
<p class="text-gray-900 line-height-2 md:line-height-4 text-2xl mt-4" style="max-width:800px;">“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”</p>
|
||||||
|
<img src="assets/layout/images/peak-logo.svg" class="mt-4" alt="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="py-4 px-4 lg:px-8 mx-0 my-8 lg:mx-8">
|
<div class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h2 class="text-gray-900">Powerful Everywhere</h2>
|
<h2 class="text-gray-900">Powerful Everywhere</h2>
|
||||||
<span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
<span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid mt-8 pb-8 justify-content-between">
|
<div class="grid mt-8 pb-2 md:pb-8 justify-content-between">
|
||||||
<div class="flex justify-content-center col-12 sm:col-6 border-round bg-purple-100 p-0">
|
<div class="flex justify-content-center flex-order-1 sm:flex-order-2 col-12 sm:col-6 bg-purple-100 p-0" style="border-radius:8px;">
|
||||||
<img src="assets/layout/images/mockup.png" class="w-11" alt="mockup mobile">
|
<img src="assets/layout/images/mockup.png" class="w-11" alt="mockup mobile">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-4 my-auto flex flex-column align-items-end text-right">
|
<div class="col-12 md:col-4 my-auto flex flex-column md:align-items-end md:text-right">
|
||||||
<div class="flex align-items-center justify-content-center bg-purple-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="flex align-items-center justify-content-center bg-purple-200" style="width:3.5rem; height:3.5rem; border-radius: 10px;">
|
||||||
<i class="pi pi-fw pi-mobile text-2xl text-purple-700"></i>
|
<i class="pi pi-fw pi-mobile text-2xl text-purple-700"></i>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="line-height-1 text-gray-900 text-4xl">Congue Quisque Egestas</h2>
|
<h2 class="line-height-1 text-gray-900 text-4xl">Congue Quisque Egestas</h2>
|
||||||
@ -189,22 +192,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid my-8 pt-8 justify-content-between">
|
<div class="grid my-8 pt-2 md:pt-8 justify-content-between">
|
||||||
<div class="col-12 md:col-4 my-auto flex flex-column align-items-start">
|
<div class="col-12 md:col-4 my-auto flex flex-column align-items-start">
|
||||||
<div class="flex align-items-center justify-content-center bg-yellow-200 border-round" style="width:3.5rem;height:3.5rem">
|
<div class="flex align-items-center justify-content-center bg-yellow-200" style="width:3.5rem; height:3.5rem; border-radius:10px;">
|
||||||
<i class="pi pi-fw pi-desktop text-2xl text-yellow-700"></i>
|
<i class="pi pi-fw pi-desktop text-2xl text-yellow-700"></i>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="line-height-1 text-gray-900 text-4xl">Congue Quisque Egestas</h2>
|
<h2 class="line-height-1 text-gray-900 text-4xl">Congue Quisque Egestas</h2>
|
||||||
<span class="line-height-4 text-gray-700 text-2xl">Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
|
<span class="text-gray-700 line-height-3 text-2xl">Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 sm:col-6 border-round bg-yellow-100 p-0">
|
<div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 sm:col-6 bg-yellow-100 p-0" style="border-radius:8px;">
|
||||||
<img src="assets/layout/images/mockup-desktop.png" class="w-11" alt="mockup">
|
<img src="assets/layout/images/mockup-desktop.png" class="w-11" alt="mockup">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="py-4 px-4 lg:px-8 my-8">
|
<div class="py-4 px-4 lg:px-8 my-2 md:my-8">
|
||||||
<div class="text-center mb-6">
|
<div class="text-center mb-6">
|
||||||
<h2 class="text-gray-900">Matchless Pricing</h2>
|
<h2 class="text-gray-900">Matchless Pricing</h2>
|
||||||
<span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
<span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
|
||||||
@ -212,8 +215,8 @@
|
|||||||
|
|
||||||
<div class="grid justify-content-between">
|
<div class="grid justify-content-between">
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:p-5">
|
||||||
<div class="p-3 flex flex-column border-200 border-round" style="border:2px solid;">
|
<div class="p-3 flex flex-column border-200" style="border:2px solid; border-radius:10px;">
|
||||||
<h3 class="text-gray-900 text-center">Free</h3>
|
<h3 class="text-gray-900 text-center">Free</h3>
|
||||||
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
|
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
|
||||||
<div class="my-5 text-center">
|
<div class="my-5 text-center">
|
||||||
@ -225,26 +228,26 @@
|
|||||||
<ul class="my-5 list-none p-0 flex text-gray-900 flex-column">
|
<ul class="my-5 list-none p-0 flex text-gray-900 flex-column">
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">Responsive Layout</span>
|
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">Unlimited Push Messages</span>
|
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">50 Support Ticket</span>
|
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">Free Shipping</span>
|
<span class="text-xl line-height-3">Free Shipping</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:p-5 mt-4 md:mt-0">
|
||||||
<div class="p-3 flex flex-column border-200 border-round" style="border:2px solid;">
|
<div class="p-3 flex flex-column border-200" style="border:2px solid; border-radius:10px;">
|
||||||
<h3 class="text-gray-900 text-center">Startup</h3>
|
<h3 class="text-gray-900 text-center">Startup</h3>
|
||||||
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
|
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
|
||||||
<div class="my-5 text-center">
|
<div class="my-5 text-center">
|
||||||
@ -256,26 +259,26 @@
|
|||||||
<ul class="my-5 list-none p-0 flex text-gray-900 flex-column">
|
<ul class="my-5 list-none p-0 flex text-gray-900 flex-column">
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">Responsive Layout</span>
|
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">Unlimited Push Messages</span>
|
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">50 Support Ticket</span>
|
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">Free Shipping</span>
|
<span class="text-xl line-height-3">Free Shipping</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-6 lg:col-4 p-5">
|
<div class="col-12 md:col-6 lg:col-4 p-0 md:p-5 mt-4 md:mt-0">
|
||||||
<div class="p-3 flex flex-column border-200 border-round" style="border:2px solid;">
|
<div class="p-3 flex flex-column border-200" style="border:2px solid; border-radius:10px;">
|
||||||
<h3 class="text-gray-900 text-center">Free</h3>
|
<h3 class="text-gray-900 text-center">Free</h3>
|
||||||
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
|
<img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
|
||||||
<div class="my-5 text-center">
|
<div class="my-5 text-center">
|
||||||
@ -287,19 +290,19 @@
|
|||||||
<ul class="my-5 list-none p-0 flex text-gray-900 flex-column">
|
<ul class="my-5 list-none p-0 flex text-gray-900 flex-column">
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">Responsive Layout</span>
|
<span class="text-xl line-height-3">Responsive Layout</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">Unlimited Push Messages</span>
|
<span class="text-xl line-height-3">Unlimited Push Messages</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">50 Support Ticket</span>
|
<span class="text-xl line-height-3">50 Support Ticket</span>
|
||||||
</li>
|
</li>
|
||||||
<li class="py-2">
|
<li class="py-2">
|
||||||
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
<i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
|
||||||
<span class="text-xl">Free Shipping</span>
|
<span class="text-xl line-height-3">Free Shipping</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -309,45 +312,44 @@
|
|||||||
|
|
||||||
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
|
<div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
|
||||||
<div class="grid justify-content-between">
|
<div class="grid justify-content-between">
|
||||||
|
|
||||||
<div class="col-12 md:col-2" style="margin-top:-1.5rem;">
|
<div class="col-12 md:col-2" style="margin-top:-1.5rem;">
|
||||||
<div class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3">
|
<div class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3">
|
||||||
<img src="assets/layout/images/logo-blue.svg" alt="footer sections" width="50" height="50" class="mr-3">
|
<img src="assets/layout/images/logo-blue.svg" alt="footer sections" width="50" height="50" class="mr-2">
|
||||||
<h4 class="font-medium text-3xl text-gray-900">SAKAI</h4>
|
<h4 class="font-medium text-3xl text-gray-900">SAKAI</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-8">
|
<div class="col-12 md:col-7">
|
||||||
<div class="grid text-center md:text-left">
|
<div class="grid text-center md:text-left">
|
||||||
<div class="col-12 md:col-3">
|
<div class="col-12 md:col-3">
|
||||||
<h4 class="font-medium line-height-3 mb-3 text-gray-900">Company</h4>
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-gray-900">Company</h4>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">About Us</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">About Us</a>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">News</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">News</a>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">Investor Relations</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Investor Relations</a>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">Careers</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Careers</a>
|
||||||
<a class="line-height-3 block cursor-pointer text-gray-700">Media Kit</a>
|
<a class="line-height-3 text-xl block cursor-pointer text-gray-700">Media Kit</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-3">
|
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||||
<h4 class="font-medium line-height-3 mb-3 text-gray-900">Resources</h4>
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-gray-900">Resources</h4>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">Get Started</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Get Started</a>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">Learn</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Learn</a>
|
||||||
<a class="line-height-3 block cursor-pointer text-gray-700">Case Studies</a>
|
<a class="line-height-3 text-xl block cursor-pointer text-gray-700">Case Studies</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-3">
|
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||||
<h4 class="font-medium line-height-3 mb-3 text-gray-900">Community</h4>
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-gray-900">Community</h4>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">Discord</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Discord</a>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">Events<img src="assets/layout/images/new-badge.svg" class="ml-2"/></a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Events<img src="assets/layout/images/new-badge.svg" class="ml-2"/></a>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">FAQ</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">FAQ</a>
|
||||||
<a class="line-height-3 block cursor-pointer text-gray-700">Blog</a>
|
<a class="line-height-3 text-xl block cursor-pointer text-gray-700">Blog</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 md:col-3">
|
<div class="col-12 md:col-3 mt-4 md:mt-0">
|
||||||
<h4 class="font-medium line-height-3 mb-3 text-gray-900">Legal</h4>
|
<h4 class="font-medium text-2xl line-height-3 mb-3 text-gray-900">Legal</h4>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">Brand Policy</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Brand Policy</a>
|
||||||
<a class="line-height-3 block cursor-pointer mb-2 text-gray-700">Privacy Policy</a>
|
<a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Privacy Policy</a>
|
||||||
<a class="line-height-3 block cursor-pointer text-gray-700">Terms of Service</a>
|
<a class="line-height-3 text-xl block cursor-pointer text-gray-700">Terms of Service</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,53 +0,0 @@
|
|||||||
#hero-content{
|
|
||||||
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%);
|
|
||||||
-webkit-clip-path: ellipse(150% 87% at 93% 13%);
|
|
||||||
clip-path: ellipse(150% 87% at 93% 13%);
|
|
||||||
min-height: 630px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#testimonial-card{
|
|
||||||
background:linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-wrapper{
|
|
||||||
padding:2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-10{
|
|
||||||
border-radius:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient-yellow{
|
|
||||||
background: linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2)), linear-gradient(90deg, rgba(253, 228, 165, 0.2),rgba(187, 199, 205, 0.2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient-yellow-2{
|
|
||||||
background: linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient-blue{
|
|
||||||
background: linear-gradient(180deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient-purple{
|
|
||||||
background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient-purple-2{
|
|
||||||
background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 158, 188, 0.2));
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width:769px){
|
|
||||||
#hero-img{
|
|
||||||
top:30% !important;
|
|
||||||
right:0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
#hero-img{
|
|
||||||
top:7% !important;
|
|
||||||
right:7% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -2,7 +2,21 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'app-landing',
|
selector: 'app-landing',
|
||||||
templateUrl: './landing.component.html',
|
templateUrl: './landing.component.html',
|
||||||
styleUrls: ['./landing.component.scss']
|
styles: [`
|
||||||
|
#hero{
|
||||||
|
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%);
|
||||||
|
height:700px;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
#hero{
|
||||||
|
-webkit-clip-path: ellipse(150% 87% at 93% 13%);
|
||||||
|
clip-path: ellipse(150% 87% at 93% 13%);
|
||||||
|
height: 430px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`]
|
||||||
})
|
})
|
||||||
export class LandingComponent implements OnInit {
|
export class LandingComponent implements OnInit {
|
||||||
|
|
||||||
@ -11,14 +25,12 @@ export class LandingComponent implements OnInit {
|
|||||||
constructor() { }
|
constructor() { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
let themeElement = document.getElementById('theme-css');
|
|
||||||
this.themeElement = document.getElementById('theme-css');
|
this.themeElement = document.getElementById('theme-css');
|
||||||
console.log(this.themeElement);
|
this.themeElement.setAttribute('href','assets/theme/saga-blue/theme.css');
|
||||||
themeElement.setAttribute('href','assets/theme/saga-blue/theme.css');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
|
this.themeElement.setAttribute('href', 'assets/theme/lara-light-indigo/theme.css');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user