[V0_FILE]typescriptreact:file="src/app/components/header/header.component.html" isMerged="true"

[V0_FILE]typescriptreact:file="src/app/components/login/login.component.html" isMerged="true"

[V0_FILE]typescriptreact:file="src/app/components/footer/footer.component.html" isMerged="true" [V0_FILE]typescriptreact:file="src/app/components/footer/footer.component.scss" isMerged="true" .footer { background-color: #8B1D1D; color: white; padding: 40px 0 0; font-family: 'Arial', sans-serif; } .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .footer-logo { flex: 0 0 300px; margin-bottom: 30px; .logo { max-width: 200px; margin-bottom: 15px; } .footer-description { font-size: 14px; line-height: 1.5; opacity: 0.8; } } .footer-links { display: flex; gap: 60px; margin-bottom: 30px; } .footer-column { display: flex; flex-direction: column; gap: 10px; } .footer-link { color: white; text-decoration: none; font-size: 14px; transition: opacity 0.3s; &:hover { opacity: 0.8; } } .footer-contact { flex: 0 0 300px; margin-bottom: 30px; .contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; font-size: 14px; i { width: 16px; height: 16px; margin-top: 3px; } } } .social-links { display: flex; gap: 20px; margin-top: 20px; .social-link { display: flex; flex-direction: column; align-items: center; color: white; text-decoration: none; font-size: 12px; transition: opacity 0.3s; i { width: 24px; height: 24px; margin-bottom: 5px; } &:hover { opacity: 0.8; } } } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); max-width: 1200px; margin: 0 auto; font-size: 12px; } .footer-legal { display: flex; align-items: center; .legal-link { color: white; text-decoration: none; transition: opacity 0.3s; &:hover { opacity: 0.8; } } .separator { margin: 0 10px; } } @media (max-width: 768px) { .footer-content { flex-direction: column; } .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } } [V0_FILE]typescriptreact:file="src/app/components/home/home.component.html" isMerged="true"

Welcome to Vitraag

Jain Shwetambar Sangh, Sydney

[V0_FILE]typescriptreact:file="src/app/components/home/home.component.scss" isMerged="true" .home-container { min-height: 500px; } .hero-section { height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(139, 29, 29, 0.8); color: white; text-align: center; h1 { font-size: 36px; margin-bottom: 10px; } p { font-size: 18px; opacity: 0.9; } } [V0_FILE]typescriptreact:file="src/styles.scss" isMerged="true" /* You can add global styles to this file, and also import other style files */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; } .app-container { display: flex; flex-direction: column; min-height: 100vh; } /* Icons placeholder styles - replace with actual icons */ .calendar-icon, .location-icon, .time-icon, .sunset-icon, .phone-icon, .email-icon, .facebook-icon, .twitter-icon, .instagram-icon, .eye-icon-visible, .eye-icon-hidden { display: inline-block; width: 16px; height: 16px; background-color: currentColor; opacity: 0.5; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } [V0_FILE]typescriptreact:file="src/assets/images/vitraag-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/VJSS_2025-IsGB5RBkZ5VrxEvBx0piixPSNfzf0K.png" isMerged="true" [V0_FILE]typescriptreact:file="src/app/components/header/header.component.scss" isEdit="true" isQuickEdit="true" isMerged="true" .header { width: 100%; font-family: 'Arial', sans-serif; } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .logo-container { .logo { max-height: 60px; } } .header-info { display: flex; align-items: center; gap: 20px; } .calendar-info, .location-time { display: flex; gap: 15px; } .info-item { display: flex; align-items: center; gap: 5px; color: #333; font-size: 14px; i { width: 16px; height: 16px; display: inline-block; } } .auth-buttons { display: flex; gap: 10px; .login-btn { color: #8B1D1D; text-decoration: none; font-weight: 500; } .register-btn { background-color: #8B1D1D; color: white; padding: 8px 16px; border-radius: 4px; text-decoration: none; font-weight: 500; } } .login-button { background-color: #E6C649; color: #333; border: none; border-radius: 4px; padding: 10px 30px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; &:hover { background-color: #d4b341; } } .main-nav { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .nav-list { display: flex; list-style: none; margin: 0; padding: 0; justify-content: center; } .nav-item { position: relative; a { display: flex; align-items: center; padding: 15px 20px; color: #333; text-decoration: none; font-weight: 500; transition: color 0.3s; &:hover, &.active { color: #8B1D1D; } } &.dropdown { .dropdown-icon { margin-left: 5px; width: 10px; height: 10px; border: solid #333; border-width: 0 2px 2px 0; display: inline-block; padding: 2px; transform: rotate(45deg); } } } [V0_FILE]typescriptreact:file="src/app/components/login/login.component.scss" isEdit="true" isQuickEdit="true" isMerged="true" .login-container { display: flex; justify-content: center; align-items: center; min-height: 70vh; background-color: #f5f5f5; background-image: url('/assets/images/background.jpg'); background-size: cover; background-position: center; position: relative; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(139, 29, 29, 0.6); } } .login-card { width: 100%; max-width: 500px; background-color: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 30px; position: relative; z-index: 1; } .login-title { color: #E6C649; text-align: center; margin-bottom: 30px; font-size: 24px; font-weight: 500; } .form-group { margin-bottom: 20px; label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; } } .phone-input { display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; .country-code { display: flex; align-items: center; padding: 0 10px; background-color: #f9f9f9; border-right: 1px solid #ddd; .flag-icon { width: 20px; margin-right: 5px; } span { font-size: 14px; color: #333; } } } .password-input { position: relative; .toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; i { width: 20px; height: 20px; display: block; } .eye-icon-visible, .eye-icon-hidden { background-size: contain; background-repeat: no-repeat; } } } .form-control { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; &:focus { outline: none; border-color: #E6C649; } } .phone-input .form-control { border: none; flex: 1; } .error-message { color: #d32f2f; font-size: 12px; margin-top: 5px; } .form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; } .login-button { background-color: #E6C649; color: #333; border: none; border-radius: 4px; padding: 10px 30px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; &:hover { background-color: #d4b341; } } .forgot-pin { color: #8B1D1D; text-decoration: none; font-size: 14px; &:hover { text-decoration: underline; } } .signup-prompt { margin-top: 30px; text-align: center; font-size: 14px; color: #666; .signup-link { color: #8B1D1D; text-decoration: none; font-weight: 500; margin-left: 5px; &:hover { text-decoration: underline; } } } [V0_FILE]typescript:file="src/app/app.component.ts" isEdit="true" import { Component } from "@angular/core" @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"], }) export class AppComponent { title = "vitraag-website" } [V0_FILE]typescript:file="src/app/components/header/header.component.ts" isEdit="true" import { Component } from "@angular/core" @Component({ selector: "app-header", templateUrl: "./header.component.html", styleUrls: ["./header.component.scss"], }) export class HeaderComponent { constructor() {} } [V0_FILE]typescript:file="src/app/components/footer/footer.component.ts" isEdit="true" import { Component } from "@angular/core" @Component({ selector: "app-footer", templateUrl: "./footer.component.html", styleUrls: ["./footer.component.scss"], }) export class FooterComponent { constructor() {} } [V0_FILE]typescript:file="src/app/components/login/login.component.ts" isEdit="true" import { Component, type OnInit } from "@angular/core" import { type FormBuilder, type FormGroup, Validators } from "@angular/forms" import type { Router } from "@angular/router" @Component({ selector: "app-login", templateUrl: "./login.component.html", styleUrls: ["./login.component.scss"], }) export class LoginComponent implements OnInit { loginForm!: FormGroup submitted = false showPin = false constructor( private formBuilder: FormBuilder, private router: Router, ) {} ngOnInit(): void { this.loginForm = this.formBuilder.group({ mobile: ["", [Validators.required, Validators.pattern("^[0-9]{9,10}$")]], pin: ["", [Validators.required, Validators.minLength(4)]], }) } // convenience getter for easy access to form fields get f() { return this.loginForm.controls } togglePinVisibility() { this.showPin = !this.showPin } onSubmit() { this.submitted = true // stop here if form is invalid if (this.loginForm.invalid) { return } // TODO: Implement actual login logic here console.log("Login form submitted", this.loginForm.value) // Navigate to home page after successful login // this.router.navigate(['/']); } } [V0_FILE]typescript:file="src/app/components/home/home.component.ts" isEdit="true" import { Component } from "@angular/core" @Component({ selector: "app-home", templateUrl: "./home.component.html", styleUrls: ["./home.component.scss"], }) export class HomeComponent { constructor() {} } [V0_FILE]typescript:file="src/app/app.module.ts" isEdit="true" import { NgModule } from "@angular/core" import { BrowserModule } from "@angular/platform-browser" import { ReactiveFormsModule } from "@angular/forms" import { RouterModule, type Routes } from "@angular/router" import { AppComponent } from "./app.component" import { HeaderComponent } from "./components/header/header.component" import { FooterComponent } from "./components/footer/footer.component" import { LoginComponent } from "./components/login/login.component" import { HomeComponent } from "./components/home/home.component" const routes: Routes = [ { path: "", component: HomeComponent }, { path: "login", component: LoginComponent }, { path: "**", redirectTo: "" }, ] @NgModule({ declarations: [AppComponent, HeaderComponent, FooterComponent, LoginComponent, HomeComponent], imports: [BrowserModule, ReactiveFormsModule, RouterModule.forRoot(routes)], providers: [], bootstrap: [AppComponent], }) export class AppModule {} [V0_FILE]html:file="src/app/app.component.html" isEdit="true"

[V0_FILE]scss:file="src/app/app.component.scss" isEdit="true" .app-container { display: flex; flex-direction: column; min-height: 100vh; }