Skip to content

Commit

Permalink
sections divided into components
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehmetcetin01140
mehmetcetin01140 committed Nov 27, 2023
1 parent bf48e5e commit 035e4aa
Show file tree
Hide file tree
Showing 9 changed files with 1,344 additions and 1,137 deletions.
386 changes: 386 additions & 0 deletions src/app/showcase/pages/landing/blocksection.component.ts
View file

Large diffs are not rendered by default.

89 changes: 89 additions & 0 deletions src/app/showcase/pages/landing/featuressection.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppConfigService } from '../../service/appconfigservice';

@Component({
selector: 'template-features',
standalone: true,
imports: [CommonModule],
template: `
<section class="landing-features py-8">
<div class="section-header">Features</div>
<p class="section-detail">PrimeNG is the most complete solution for your UI requirements.</p>
<div
class="mt-7 px-3 lg:px-8"
[style]="{ 'background-size': 'cover' }"
[ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/wave-dark-alt.svg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/wave-light-alt.svg)' }"
>
<div class="features-container">
<div class="grid">
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-components.svg" width="30" height="25" class="block mb-3" alt="components icon" />
<div class="font-semibold mb-3 text-lg">90+ UI Components</div>
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Angular Components.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-community.svg" width="30" height="25" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Community</div>
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-productivity.svg" width="30" height="25" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Productivity</div>
<p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Accessibility</div>
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Angular Components.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-support.svg" alt="components icon" width="30" height="25" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Enterprise Support</div>
<p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-mobile.svg" width="30" height="25" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Mobile</div>
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-theme.svg" width="30" height="25" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Themes</div>
<p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as Material, Bootstrap, custom or develop your own.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full">
<img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-ts.svg" width="30" height="25" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Typescript</div>
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
</div>
</div>
</div>
</div>
</div>
</section>
`
})
export class FeaturesSectionComponent {
constructor(private configService: AppConfigService) {}

get isDarkMode() {
return this.configService.config.darkMode;
}

}
Loading

1 comment on commit 035e4aa

@vercel
Copy link

@vercel vercel bot commented on 035e4aa Nov 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test-primeng-test.vercel.app
primeng-ssr-test-git-master-primeng-test.vercel.app
primeng-ssr-test.vercel.app

Please sign in to comment.