import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  template: `
    <div class="home-container">
      <h1>Welcome to Our Website</h1>
      <p>This is the home page of our application.</p>
      <div class="hero-section">
        <h2>Get Started</h2>
        <p>Explore our features and discover what we have to offer.</p>
        <button class="cta-button">Learn More</button>
      </div>
    </div>
  `,
  styles: [`
    .home-container {
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .hero-section {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 3rem 2rem;
      border-radius: 8px;
      margin-top: 2rem;
      text-align: center;
    }
    
    .cta-button {
      background: white;
      color: #667eea;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 1rem;
      transition: transform 0.2s;
    }
    
    .cta-button:hover {
      transform: translateY(-2px);
    }
  `]
})
export class HomeComponent {}

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  standalone: true,
  template: `
    <div class="about-container">
      <h1>About Us</h1>
      <div class="about-content">
        <section class="mission">
          <h2>Our Mission</h2>
          <p>
            We are dedicated to providing exceptional services and creating
            meaningful experiences for our customers. Our team is passionate
            about innovation and excellence.
          </p>
        </section>
        
        <section class="values">
          <h2>Our Values</h2>
          <ul>
            <li>Innovation and creativity</li>
            <li>Customer satisfaction</li>
            <li>Quality and reliability</li>
            <li>Transparency and integrity</li>
          </ul>
        </section>
        
        <section class="team">
          <h2>Our Team</h2>
          <p>
            Our diverse team of professionals brings together expertise from
            various fields to deliver the best possible solutions for our clients.
          </p>
        </section>
      </div>
    </div>
  `,
  styles: [`
    .about-container {
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .about-content {
      margin-top: 2rem;
    }
    
    section {
      margin-bottom: 2rem;
      padding: 1.5rem;
      border-left: 4px solid #667eea;
      background: #f8f9fa;
      border-radius: 0 8px 8px 0;
    }
    
    h2 {
      color: #667eea;
      margin-bottom: 1rem;
    }
    
    ul {
      list-style-type: none;
      padding-left: 0;
    }
    
    li {
      padding: 0.5rem 0;
      position: relative;
      padding-left: 1.5rem;
    }
    
    li:before {
      content: "✓";
      color: #667eea;
      font-weight: bold;
      position: absolute;
      left: 0;
    }
  `]
})
export class AboutComponent {}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="contact-container">
      <h1>Contact Us</h1>
      
      <div class="contact-content">
        <div class="contact-info">
          <h2>Get in Touch</h2>
          <div class="info-item">
            <strong>Email:</strong> info@yourcompany.com
          </div>
          <div class="info-item">
            <strong>Phone:</strong> +1 (555) 123-4567
          </div>
          <div class="info-item">
            <strong>Address:</strong> 123 Business Street, City, State 12345
          </div>
        </div>
        
        <div class="contact-form">
          <h2>Send us a Message</h2>
          <form (ngSubmit)="onSubmit()" #contactForm="ngForm">
            <div class="form-group">
              <label for="name">Name</label>
              <input 
                type="text" 
                id="name" 
                name="name" 
                [(ngModel)]="formData.name" 
                required
                #name="ngModel"
              >
              <div *ngIf="name.invalid && name.touched" class="error">
                Name is required
              </div>
            </div>
            
            <div class="form-group">
              <label for="email">Email</label>
              <input 
                type="email" 
                id="email" 
                name="email" 
                [(ngModel)]="formData.email" 
                required
                email
                #email="ngModel"
              >
              <div *ngIf="email.invalid && email.touched" class="error">
                Please enter a valid email
              </div>
            </div>
            
            <div class="form-group">
              <label for="message">Message</label>
              <textarea 
                id="message" 
                name="message" 
                [(ngModel)]="formData.message" 
                required
                rows="5"
                #message="ngModel"
              ></textarea>
              <div *ngIf="message.invalid && message.touched" class="error">
                Message is required
              </div>
            </div>
            
            <button 
              type="submit" 
              [disabled]="contactForm.invalid"
              class="submit-button"
            >
              Send Message
            </button>
          </form>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .contact-container {
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .contact-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      margin-top: 2rem;
    }
    
    .contact-info {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 8px;
    }
    
    .info-item {
      margin-bottom: 1rem;
      padding: 0.5rem 0;
    }
    
    .contact-form {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .form-group {
      margin-bottom: 1.5rem;
    }
    
    label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: bold;
      color: #333;
    }
    
    input, textarea {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 1rem;
      box-sizing: border-box;
    }
    
    input:focus, textarea:focus {
      outline: none;
      border-color: #667eea;
    }
    
    .submit-button {
      background: #667eea;
      color: white;
      border: none;
      padding: 0.75rem 2rem;
      border-radius: 4px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    
    .submit-button:hover:not(:disabled) {
      background: #5a6fd8;
    }
    
    .submit-button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    
    .error {
      color: #dc3545;
      font-size: 0.875rem;
      margin-top: 0.25rem;
    }
    
    @media (max-width: 768px) {
      .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }
  `]
})
export class ContactComponent {
  formData = {
    name: '',
    email: '',
    message: ''
  };

  onSubmit() {
    if (this.formData.name && this.formData.email && this.formData.message) {
      console.log('Form submitted:', this.formData);
      // Here you would typically send the data to your backend
      alert('Thank you for your message! We will get back to you soon.');
      
      // Reset form
      this.formData = {
        name: '',
        email: '',
        message: ''
      };
    }
  }
}

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', redirectTo: '/home' } // Wildcard route for 404 pages
];

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'your-app';
}

import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';
import { ContactComponent } from './pages/contact/contact.component';

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', redirectTo: '/home' } // Wildcard route for 404 page
];

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  title = 'Welcome to Our Website';
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-about',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent {
  companyInfo = {
    name: 'Our Company',
    founded: '2020',
    mission: 'To provide excellent services and innovative solutions to our clients.',
    values: ['Quality', 'Innovation', 'Customer Focus', 'Integrity']
  };
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent {
  contactForm: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {
    this.contactForm = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      subject: ['', Validators.required],
      message: ['', Validators.required]
    });
  }

  onSubmit() {
    this.submitted = true;
    if (this.contactForm.valid) {
      console.log('Form Submitted:', this.contactForm.value);
      // Here you would typically send the form data to a service
      alert('Thank you for your message! We will get back to you soon.');
      this.contactForm.reset();
      this.submitted = false;
    }
  }

  get f() {
    return this.contactForm.controls;
  }
}

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'your-app';
}