import { Component } from '@angular/core'; @Component({ selector: 'app-landing-page', templateUrl: './landing-page.component.html', styleUrls: ['./landing-page.component.scss'] }) export class LandingPageComponent { }

Welcome to Our Awesome Product

Your tagline goes here. Explain the benefits of your product or service.

Key Features

Feature 1

Description of feature 1.

Feature 2

Description of feature 2.

Feature 3

Description of feature 3.

What Our Customers Say

"This product has transformed our workflow. Highly recommended!"

- John Doe, Company CEO

"Incredible features and excellent customer support. We love it!"

- Jane Smith, Marketing Manager

Contact Us

Have questions? Reach out to us!

``` .landing-page { font-family: 'Arial', sans-serif; margin: 0; padding: 0; box-sizing: border-box; } .header { background-color: #f8f9fa; padding: 20px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; max-width: 1200px; margin: 0 auto; } .logo { font-size: 1.5rem; font-weight: bold; color: #343a40; } .nav-links { list-style: none; padding: 0; margin: 0; display: flex; } .nav-links li { margin-left: 20px; } .nav-links li a { text-decoration: none; color: #343a40; font-weight: 500; transition: color 0.3s ease; &:hover { color: #007bff; } } .cta-button { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: 500; transition: background-color 0.3s ease; &:hover { background-color: #0056b3; } &.primary { background-color: #28a745; &:hover { background-color: #1e7e34; } } } .hero { display: flex; align-items: center; padding: 50px 20px; max-width: 1200px; margin: 0 auto; .hero-content { flex: 1; padding-right: 20px; h1 { font-size: 2.5rem; color: #343a40; margin-bottom: 20px; } p { font-size: 1.1rem; color: #6c757d; line-height: 1.6; margin-bottom: 30px; } } .hero-image { flex: 1; text-align: center; img { max-width: 100%; height: auto; } } } .features { padding: 50px 20px; background-color: #e9ecef; text-align: center; h2 { font-size: 2rem; color: #343a40; margin-bottom: 30px; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; } .feature-item { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); i.feature-icon { display: block; font-size: 2rem; margin-bottom: 20px; color: #007bff; /* Replace with actual icon or styling */ /* Example: content: '\f005'; // FontAwesome star icon */ } h3 { font-size: 1.5rem; color: #343a40; margin-bottom: 15px; } p { color: #6c757d; line-height: 1.6; } } } .testimonials { padding: 50px 20px; text-align: center; max-width: 1200px; margin: 0 auto; h2 { font-size: 2rem; color: #343a40; margin-bottom: 30px; } .testimonial-slider { display: flex; overflow-x: auto; gap: 20px; padding-bottom: 20px; /* To accommodate scrollbar if needed */ } .testimonial { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); min-width: 300px; p { color: #343a40; line-height: 1.6; margin-bottom: 15px; &.author { font-weight: bold; color: #6c757d; margin-top: 10px; margin-bottom: 0; } } } } .contact { padding: 50px 20px; background-color: #f8f9fa; text-align: center; h2 { font-size: 2rem; color: #343a40; margin-bottom: 20px; } p { color: #6c757d; margin-bottom: 30px; } .contact-form { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; padding: 20px; border-radius: 8px; background-color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); input, textarea { padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem; } textarea { resize: vertical; } } } .footer { background-color: #343a40; color: white; padding: 20px 0; text-align: center; p { margin: 0; } .footer-links { list-style: none; padding: 0; margin: 10px 0 0 0; display: flex; justify-content: center; gap: 20px; } .footer-links li a { color: white; text-decoration: none; transition: color 0.3s ease; &:hover { color: #adb5bd; } } } ``` import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LandingPageComponent } from './landing-page.component'; @NgModule({ declarations: [ LandingPageComponent ], imports: [ CommonModule ], exports: [ LandingPageComponent ] }) export class LandingPageModule { } ``` import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'landing-page'; } ``` ``` import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { LandingPageModule } from './landing-page/landing-page.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, LandingPageModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` /* You can add global styles to this file, and also import other style files */ body { margin: 0; font-family: Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "landing-page": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/landing-page", "index": "src/index.html", "main": "src/main.ts", "polyfills": [ "zone.js" ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "landing-page:build:production" }, "development": { "browserTarget": "landing-page:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "landing-page:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "polyfills": [ "zone.js", "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] } } } } }, "cli": { "analytics": "1a798454-59a1-4b4f-a29b-994c5452849a" } } ``` { "name": "landing-page", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^17.3.0", "@angular/common": "^17.3.0", "@angular/compiler": "^17.3.0", "@angular/core": "^17.3.0", "@angular/forms": "^17.3.0", "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" }, "devDependencies": { "@angular-devkit/build-angular": "^17.3.2", "@angular/cli": "^17.3.2", "@angular/compiler-cli": "^17.3.0", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.6.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.4.0" } } ``` { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "ES2022", "module": "ES2022", "lib": [ "ES2022", "dom" ] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "enableIvy": false, "strictInputAccessModifiers": true, "strictTemplates": true } } ``` ```