Aroy/Angular-DotIO
1
0
Fork 0
Code Activity Actions

Add: about page component

Browse source
This commit is contained in:
Aroy-Art 2025-05-20 22:50:10 +02:00
parent cb3e06bf64
commit 36624b0d41
Signed by: Aroy
GPG key ID: DB9689E9391DD156
3 changed files with 101 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app/app.routes.ts
View file

@ -3,5 +3,6 @@ import { HomeComponent } from './pages/home/home.component';
export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent) },
{ path: '**', redirectTo: '' }
];

87
src/app/pages/about/about.component.html Normal file
View file

@ -0,0 +1,87 @@
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-green-700 mb-6">About Energy Price Dashboard</h1>
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Our Mission</h2>
<p class="text-gray-700 mb-6">
At Energy Price Dashboard, our mission is to provide Swedish consumers with transparent, real-time information about energy prices across different regions. We believe that access to clear data empowers individuals and businesses to make informed decisions about their energy consumption, ultimately leading to more cost-effective and sustainable energy use.
</p>
<h2 class="text-2xl font-semibold text-gray-800 mb-4">What We Do</h2>
<p class="text-gray-700 mb-6">
We collect and analyze energy price data from across Sweden's energy market, presenting it in an accessible and user-friendly dashboard. Our platform allows users to:
</p>
<ul class="list-disc pl-6 mb-6 text-gray-700">
<li class="mb-2">Track real-time electricity prices in your region</li>
<li class="mb-2">Compare prices across different Swedish regions</li>
<li class="mb-2">View historical price trends and patterns</li>
<li class="mb-2">Set alerts for price changes</li>
<li class="mb-2">Access forecasts and predictions for future energy costs</li>
</ul>
</div>
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Our Team</h2>
<p class="text-gray-700 mb-6">
Energy Price Dashboard was founded in 2023 by a team of energy experts, data scientists, and software developers passionate about bringing transparency to the energy market. Our diverse team brings together decades of combined experience in the Swedish energy sector and cutting-edge technology development.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Team Member 1 -->
<div class="text-center">
<div class="w-32 h-32 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<h3 class="font-semibold text-lg text-gray-800">Elsa Johansson</h3>
<p class="text-green-600">Founder & CEO</p>
<p class="text-gray-600 text-sm mt-2">Former energy policy advisor with 15+ years in the Swedish energy sector</p>
</div>
<!-- Team Member 2 -->
<div class="text-center">
<div class="w-32 h-32 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<h3 class="font-semibold text-lg text-gray-800">Magnus Lindgren</h3>
<p class="text-green-600">Chief Data Scientist</p>
<p class="text-gray-600 text-sm mt-2">PhD in Data Science with expertise in energy market analysis and prediction models</p>
</div>
<!-- Team Member 3 -->
<div class="text-center">
<div class="w-32 h-32 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<h3 class="font-semibold text-lg text-gray-800">Sofia Bergström</h3>
<p class="text-green-600">Head of Technology</p>
<p class="text-gray-600 text-sm mt-2">Software architect with extensive experience building data visualization platforms</p>
</div>
</div>
</div>
<div class="bg-white shadow-md rounded-lg p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Our Partners</h2>
<p class="text-gray-700 mb-6">
We work closely with energy providers, government agencies, and research institutions across Sweden to ensure our data is accurate, comprehensive, and up-to-date. Our partnerships include:
</p>
<ul class="list-disc pl-6 mb-6 text-gray-700">
<li class="mb-2">Swedish Energy Agency (Energimyndigheten)</li>
<li class="mb-2">Nord Pool - Nordic power exchange</li>
<li class="mb-2">KTH Royal Institute of Technology</li>
<li class="mb-2">Leading energy suppliers across Sweden</li>
</ul>
<div class="bg-green-50 border-l-4 border-green-500 p-4 rounded">
<p class="text-green-700">
Interested in partnering with us? We're always looking to expand our network of data providers and collaborators.
<a href="/contact" class="font-medium underline hover:text-green-800">Get in touch</a> to discuss potential partnerships.
</p>
</div>
</div>
</div>

13
src/app/pages/about/about.component.ts Normal file
View file

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-about',
standalone: true,
imports: [CommonModule],
templateUrl: './about.component.html',
})
export class AboutComponent {
// Add any component logic here
}