carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update landing

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-06 15:56:06 +03:00
parent e7ef3d4450
commit 23c7746995
4 changed files with 184 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/landing/herowidget.ts
View File

@@ -14,7 +14,7 @@ import { ButtonModule } from 'primeng/button';
<div class="mx-6 md:mx-20 mt-0 md:mt-6"> <div class="mx-6 md:mx-20 mt-0 md:mt-6">
<h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1> <h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
<p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p> <p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-0 mt-4 bg-blue-500 font-normal leading-normal px-4 text-white"></button> <button pButton pRipple [rounded]="true" type="button" label="Get Started" class="!text-xl mt-8 !px-4"></button>
</div> </div>
<div class="flex justify-center md:justify-end"> <div class="flex justify-center md:justify-end">
<img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" /> <img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />

12
src/components/landing/pricingwidget.ts
View File

@@ -23,7 +23,7 @@ import { RippleModule } from 'primeng/ripple';
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$0</span>
<span class="text-surface-600 dark:text-surface-200">per month</span> <span class="text-surface-600 dark:text-surface-200">per month</span>
</div> </div>
<button pButton pRipple label="Get Started" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button> <button pButton pRipple label="Get Started" class="p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button>
</div> </div>
<p-divider class="w-full bg-surface-200"></p-divider> <p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8">
@@ -56,7 +56,7 @@ import { RippleModule } from 'primeng/ripple';
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$1</span>
<span class="text-surface-600 dark:text-surface-200">per month</span> <span class="text-surface-600 dark:text-surface-200">per month</span>
</div> </div>
<button pButton pRipple label="Get Started" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button> <button pButton pRipple label="Get Started" class="p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button>
</div> </div>
<p-divider class="w-full bg-surface-200"></p-divider> <p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8">
@@ -89,7 +89,7 @@ import { RippleModule } from 'primeng/ripple';
<span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$5</span> <span class="text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0">$5</span>
<span class="text-surface-600 dark:text-surface-200">per month</span> <span class="text-surface-600 dark:text-surface-200">per month</span>
</div> </div>
<button pButton pRipple label="Try Free" class="block mx-auto mt-6 p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button> <button pButton pRipple label="Try Free" class="p-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white"></button>
</div> </div>
<p-divider class="w-full bg-surface-200"></p-divider> <p-divider class="w-full bg-surface-200"></p-divider>
<ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8"> <ul class="my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8">
@@ -114,8 +114,6 @@ import { RippleModule } from 'primeng/ripple';
</div> </div>
</div> </div>
</div> </div>
`, `
}) })
export class PricingWidget { export class PricingWidget {}
}

16
src/components/landing/topbarwidget.component.ts
View File

@@ -29,13 +29,12 @@ import { LayoutService } from '@/src/service/layout.service';
<span class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span> <span class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span>
</a> </a>
<a pButton [text]="true" severity="secondary" [rounded]="true" pRipple class="lg:!hidden" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
<a pButton pRipple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
<i class="pi pi-bars !text-2xl"></i> <i class="pi pi-bars !text-2xl"></i>
</a> </a>
<div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 px-12 lg:px-0 z-20" style="top:120px"> <div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 top-full px-12 lg:px-0 z-20 rounded-border">
<ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer"> <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer gap-8">
<li> <li>
<a (click)="router.navigate(['/landing'], { fragment: 'home' })" pRipple class="px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl"> <a (click)="router.navigate(['/landing'], { fragment: 'home' })" pRipple class="px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl">
<span>Home</span> <span>Home</span>
@@ -58,14 +57,11 @@ import { LayoutService } from '@/src/service/layout.service';
</li> </li>
</ul> </ul>
<div class="flex border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0 gap-2"> <div class="flex border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0 gap-2">
<button pButton pRipple label="Login" routerLink="/auth/login" [text]="true"></button> <button pButton pRipple label="Login" routerLink="/auth/login" [rounded]="true" [text]="true"></button>
<button pButton pRipple label="Register" routerLink="/auth/login"></button> <button pButton pRipple label="Register" routerLink="/auth/login" [rounded]="true"></button>
</div> </div>
</div> </div> `
`,
}) })
export class TopbarWidget { export class TopbarWidget {
constructor(public router: Router) {} constructor(public router: Router) {}
} }

6
src/views/pages/landing.ts
View File

@@ -17,9 +17,7 @@ import { TopbarWidget } from '@/src/components/landing/topbarwidget.component';
template: ` template: `
<div class="bg-surface-0 dark:bg-surface-900"> <div class="bg-surface-0 dark:bg-surface-900">
<div id="home" class="landing-wrapper overflow-hidden"> <div id="home" class="landing-wrapper overflow-hidden">
<div class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static"> <topbar-widget class="py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static" />
<topbar-widget />
</div>
<hero-widget /> <hero-widget />
<features-widget /> <features-widget />
<highlights-widget /> <highlights-widget />
@@ -27,6 +25,6 @@ import { TopbarWidget } from '@/src/components/landing/topbarwidget.component';
<footer-widget /> <footer-widget />
</div> </div>
</div> </div>
`, `
}) })
export class Landing {} export class Landing {}