Skip to content

Commit 5ed7440

Browse files
santoshyadavdevsantoshyadavdev
authored
Merge pull request #3 from yshashi/feat/moved-vue-to-angular
Feat/moved-vue-to-angular
2 parents ca13864 + 2a9ba5c commit 5ed7440

16 files changed

+716
-884
lines changed

‎apps/frontend/src/app/app.component.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
<app-nx-welcome></app-nx-welcome>
21
<router-outlet></router-outlet>

‎apps/frontend/src/app/app.component.spec.ts

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
11
import { TestBed } from '@angular/core/testing';
22
import { AppComponent } from './app.component';
3-
import { NxWelcomeComponent } from './nx-welcome.component';
43
import { RouterModule } from '@angular/router';
54

65
describe('AppComponent', () => {
76
beforeEach(async () => {
87
await TestBed.configureTestingModule({
9-
imports: [AppComponent, NxWelcomeComponent, RouterModule.forRoot([])],
8+
imports: [AppComponent, RouterModule.forRoot([])],
109
}).compileComponents();
1110
});
1211

13-
it('should render title', () => {
14-
const fixture = TestBed.createComponent(AppComponent);
15-
fixture.detectChanges();
16-
const compiled = fixture.nativeElement as HTMLElement;
17-
expect(compiled.querySelector('h1')?.textContent).toContain(
18-
'Welcome devswhorun'
19-
);
20-
});
21-
22-
it(`should have as title 'devswhorun'`, () => {
12+
it(`should have as title 'Devs Who Run'`, () => {
2313
const fixture = TestBed.createComponent(AppComponent);
2414
const app = fixture.componentInstance;
25-
expect(app.title).toEqual('devswhorun');
15+
expect(app.title).toEqual('Devs Who Run');
2616
});
2717
});

‎apps/frontend/src/app/app.component.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { Component } from '@angular/core';
22
import { RouterModule } from '@angular/router';
3-
import { NxWelcomeComponent } from './nx-welcome.component';
43

54
@Component({
6-
imports: [NxWelcomeComponent, RouterModule],
5+
imports: [RouterModule],
76
selector: 'app-root',
87
templateUrl: './app.component.html',
9-
styleUrl: './app.component.css',
108
})
119
export class AppComponent {
12-
title = 'devswhorun';
10+
title = 'Devs Who Run';
1311
}

‎apps/frontend/src/app/app.routes.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
import { Route } from '@angular/router';
22

3-
export const appRoutes: Route[] = [];
3+
export const appRoutes: Route[] = [
4+
{
5+
path: '',
6+
loadComponent: () =>
7+
import('./pages/home/home.component').then((m) => m.HomeComponent),
8+
},
9+
{ path: 'home', redirectTo: '', pathMatch: 'full' },
10+
{ path: '**', redirectTo: '' },
11+
];

‎apps/frontend/src/app/components/about/about.component.ts

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { Component } from '@angular/core';
2+
3+
type AboutDetail = {
4+
icon: string;
5+
title: string;
6+
description: string;
7+
};
8+
9+
@Component({
10+
selector: 'app-about',
11+
template: `
12+
<section id="about" class="py-20 bg-white dark:bg-gray-900">
13+
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
14+
<div class="lg:text-center">
15+
<h2
16+
class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
17+
>
18+
About Our Community
19+
</h2>
20+
<p
21+
class="mt-4 max-w-2xl text-xl text-gray-600 dark:text-gray-300 lg:mx-auto"
22+
>
23+
We're a global community of developers who believe in maintaining a
24+
healthy balance between coding and movement.
25+
</p>
26+
</div>
27+
28+
<div class="mt-20">
29+
<div class="grid grid-cols-1 gap-12 lg:grid-cols-3">
30+
@for (about of aboutDetails; track about.title) {
31+
<div
32+
class="relative p-8 bg-white rounded-2xl shadow-lg transition-all duration-300 transform dark:bg-gray-800 hover:-translate-y-1"
33+
>
34+
<div
35+
class="absolute -top-4 -right-4 w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-full opacity-10"
36+
></div>
37+
<div class="mb-4 text-4xl">
38+
{{ about.icon }}
39+
</div>
40+
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
41+
{{ about.title }}
42+
</h3>
43+
<p class="text-gray-600 dark:text-gray-300">
44+
{{ about.description }}
45+
</p>
46+
</div>
47+
}
48+
</div>
49+
</div>
50+
</div>
51+
</section>
52+
`,
53+
})
54+
export class AboutComponent {
55+
aboutDetails: AboutDetail[] = [
56+
{
57+
icon: '🏃‍♂️',
58+
title: 'Run Together',
59+
description:
60+
'Join virtual running sessions and local meetups with fellow developers.',
61+
},
62+
{
63+
icon: '💻',
64+
title: 'Code Together',
65+
description:
66+
'Collaborate on open-source projects and share technical knowledge.',
67+
},
68+
{
69+
icon: '🎯',
70+
title: 'Grow Together',
71+
description:
72+
'Set goals, track progress, and celebrate achievements together.',
73+
},
74+
];
75+
}

‎apps/frontend/src/app/components/cta/cta.component.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-cta',
5+
template: `
6+
<section
7+
class="relative py-20 bg-gradient-to-br from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900"
8+
>
9+
<div
10+
class="absolute inset-0 bg-grid-white/[0.05] bg-[size:20px_20px]"
11+
></div>
12+
<div class="relative px-4 mx-auto max-w-7xl text-center sm:px-6 lg:px-8">
13+
<h2 class="mb-8 text-3xl font-extrabold text-white sm:text-4xl">
14+
Ready to Join Our Community?
15+
</h2>
16+
<p class="mx-auto mb-10 max-w-2xl text-xl text-blue-100">
17+
Connect with developers who share your passion for running and coding.
18+
</p>
19+
<a
20+
href="https://discord.gg/gjPdvKjFx3"
21+
class="inline-flex items-center px-8 py-3 text-base font-medium text-blue-600 bg-white rounded-md border border-transparent transition-all duration-300 transform hover:bg-blue-50 dark:bg-gray-900 dark:text-blue-400 dark:hover:bg-gray-800 hover:-translate-y-1"
22+
target="_blank"
23+
rel="noopener noreferrer"
24+
>
25+
Join Our Discord
26+
<svg
27+
class="-mr-1 ml-2 w-5 h-5"
28+
fill="currentColor"
29+
viewBox="0 0 20 20"
30+
>
31+
<path
32+
fill-rule="evenodd"
33+
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
34+
clip-rule="evenodd"
35+
/>
36+
</svg>
37+
</a>
38+
</div>
39+
</section>
40+
`,
41+
})
42+
export class CtaComponent {}

‎apps/frontend/src/app/components/features/features.component.ts

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Component } from '@angular/core';
2+
3+
type Feature = {
4+
title: string;
5+
description: string;
6+
icon: string;
7+
};
8+
9+
@Component({
10+
selector: 'app-features',
11+
template: `
12+
<section class="py-20 bg-gray-50 dark:bg-gray-800">
13+
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
14+
<div class="mb-16 lg:text-center">
15+
<h2
16+
class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
17+
>
18+
Community Features
19+
</h2>
20+
</div>
21+
<div
22+
class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4"
23+
role="list"
24+
aria-label="Community features"
25+
>
26+
@for (feature of features; track feature.title) {
27+
<div
28+
class="p-6 bg-white rounded-lg shadow-lg transition-all duration-300 transform dark:bg-gray-900 hover:-translate-y-1"
29+
role="listitem"
30+
>
31+
<div class="mb-4 text-3xl">
32+
{{ feature.icon }}
33+
</div>
34+
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
35+
{{ feature.title }}
36+
</h3>
37+
<p class="text-gray-600 dark:text-gray-300">
38+
{{ feature.description }}
39+
</p>
40+
</div>
41+
}
42+
</div>
43+
</div>
44+
</section>
45+
`,
46+
})
47+
export class FeaturesComponent {
48+
features: Feature[] = [
49+
{
50+
title: 'Weekly Challenges',
51+
description: 'Participate in coding challenges and running goals.',
52+
icon: '🎯',
53+
},
54+
{
55+
title: 'Virtual Events',
56+
description: 'Join online meetups and virtual running sessions.',
57+
icon: '🌐',
58+
},
59+
{
60+
title: 'Tech Talks',
61+
description: 'Learn from experienced developers and runners.',
62+
icon: '🎤',
63+
},
64+
{
65+
title: 'Progress Tracking',
66+
description: 'Track your running and coding achievements.',
67+
icon: '📊',
68+
},
69+
];
70+
}

‎apps/frontend/src/app/components/footer/footer.component.ts

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { Component, signal } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-footer',
5+
template: `
6+
<footer class="py-12 text-gray-300 bg-gray-900">
7+
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
8+
<div class="grid grid-cols-1 gap-8 md:grid-cols-3">
9+
<div>
10+
<h3 class="mb-4 text-xl font-bold text-white">Devs Who Run</h3>
11+
<p class="text-gray-400">
12+
Balancing code and cardio, one step at a time.
13+
</p>
14+
</div>
15+
<div>
16+
<h3 class="mb-4 text-xl font-bold text-white">Quick Links</h3>
17+
<ul class="space-y-2">
18+
<li>
19+
<a href="#about" class="transition-colors hover:text-white"
20+
>About</a
21+
>
22+
</li>
23+
<li>
24+
<a href="#features" class="transition-colors hover:text-white"
25+
>Features</a
26+
>
27+
</li>
28+
<li>
29+
<a
30+
href="#testimonials"
31+
class="transition-colors hover:text-white"
32+
>Testimonials</a
33+
>
34+
</li>
35+
</ul>
36+
</div>
37+
<div>
38+
<h3 class="mb-4 text-xl font-bold text-white">Connect</h3>
39+
<ul class="space-y-2">
40+
<li>
41+
<a
42+
href="https://discord.gg/gjPdvKjFx3"
43+
class="inline-flex gap-1 items-center transition-colors hover:text-white"
44+
target="_blank"
45+
rel="noopener noreferrer"
46+
>
47+
Discord
48+
<svg
49+
class="w-5 h-5 ml-1"
50+
fill="currentColor"
51+
viewBox="0 0 24 24"
52+
xmlns="http://www.w3.org/2000/svg"
53+
>
54+
<path
55+
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"
56+
/>
57+
</svg>
58+
</a>
59+
</li>
60+
<li>
61+
<a
62+
href="https://github.com/Devs-Who-Run/devs-who-run"
63+
class="inline-flex gap-1 items-center transition-colors hover:text-white"
64+
target="_blank"
65+
rel="noopener noreferrer"
66+
>
67+
GitHub
68+
<svg
69+
class="w-5 h-5 ml-1"
70+
fill="currentColor"
71+
viewBox="0 0 24 24"
72+
xmlns="http://www.w3.org/2000/svg"
73+
>
74+
<path
75+
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
76+
/>
77+
</svg>
78+
</a>
79+
</li>
80+
</ul>
81+
</div>
82+
</div>
83+
<div class="pt-8 mt-8 text-center border-t border-gray-800">
84+
<p>&copy; {{ currentYear() }} Devs Who Run. All rights reserved.</p>
85+
<p>
86+
Made with passion for running by
87+
<a
88+
href="https://github.com/santoshyadavdev"
89+
class="text-blue-400 transition-colors hover:text-white"
90+
target="_blank"
91+
rel="noopener noreferrer"
92+
>Santosh Yadav</a
93+
>.
94+
</p>
95+
</div>
96+
</div>
97+
</footer>
98+
`,
99+
})
100+
export class FooterComponent {
101+
currentYear = signal(new Date().getFullYear());
102+
}

0 commit comments

Comments
 (0)