Skip to content
This repository was archived by the owner on Jul 20, 2026. It is now read-only.

Commit 63441cd

Browse files
TheRefractionTheRefraction
authored
Merge branch 'dev' into feature-account
2 parents 9aeb588 + 12e50af commit 63441cd

12 files changed

Lines changed: 556 additions & 13 deletions

File tree

‎frontend/public/assets/images/Firefox_kebab.jpg‎

2.46 MB
Loading

‎frontend/src/app/app.html‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,2 @@
1-
<main>
2-
<h1>Hello, {{ title() }}</h1>
3-
4-
@if (error()) {
5-
<p>{{ error() }}</p>
6-
} @else {
7-
<p>API health: {{ health() }}</p>
8-
}
9-
</main>
1+
<app-navbar [userId]="currentUserId"/>
2+
<router-outlet />

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
import { Routes } from '@angular/router';
2+
import { AccountComponent } from './account.component';
3+
import { HomeComponent } from './home.component';
24

3-
export const routes: Routes = [];
5+
export const routes: Routes = [
6+
{ path: '', component: HomeComponent},
7+
{ path: 'account', component: AccountComponent}
8+
];

‎frontend/src/app/app.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import { Component, OnInit, signal } from '@angular/core';
22
import { HttpClient } from '@angular/common/http';
33
import { RouterOutlet } from '@angular/router';
4+
import { NavbarComponent } from './partials/navbar/navbar.component';
45

56
@Component({
67
selector: 'app-root',
7-
imports: [RouterOutlet],
8+
imports: [RouterOutlet, NavbarComponent],
89
templateUrl: './app.html',
910
styleUrl: './app.scss'
1011
})
1112
export class App implements OnInit {
1213
protected readonly title = signal('frontend');
1314
protected readonly health = signal('loading...');
1415
protected readonly error = signal('');
16+
currentUserId: string | null = "user-123";
1517

1618
constructor(private readonly http: HttpClient) {}
1719

@@ -22,4 +24,4 @@ export class App implements OnInit {
2224
error: () => this.error.set('health check failed')
2325
});
2426
}
25-
}
27+
}

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<main class="home">
2+
<section class="hero">
3+
<div class="hero-content">
4+
<span class="hero-eyebrow">Bienvenue à</span>
5+
<h1 class="hero-title">EFFES KEBAB</h1>
6+
<p class="hero-sub">Découvrez nos plats savoureux !</p>
7+
<a routerLink="/products" class="hero-cta">Commander maintenant</a>
8+
</div>
9+
</section>
10+
11+
<section class="section two-col">
12+
13+
<div class="card">
14+
<h2 class="section-title">Nos Horaires</h2>
15+
16+
<div class="hours-block">
17+
<div class="hours-row">
18+
<span class="badge">Lundi – Samedi</span>
19+
<strong>11:00 – 14:00 &nbsp;|&nbsp; 18:00 – 00:00</strong>
20+
</div>
21+
<div class="hours-row">
22+
<span class="badge">Dimanche</span>
23+
<strong>17:00 – 00:00</strong>
24+
</div>
25+
</div>
26+
27+
<div class="service-chips">
28+
<div class="chip">
29+
<span class="chip-title">SUR PLACE</span>
30+
<small>Ambiance chaleureuse</small>
31+
</div>
32+
<div class="chip">
33+
<span class="chip-title">À EMPORTER</span>
34+
<small>Prêt en 15 min</small>
35+
</div>
36+
</div>
37+
</div>
38+
39+
<div class="card photo-card">
40+
<h2 class="section-title">Photos & Infos</h2>
41+
<div class="photo-frame">
42+
<img src="/assets/images/Firefox_kebab.jpg" alt="Un monsieur très heureux avec son double kebab" />
43+
</div>
44+
</div>
45+
46+
</section>
47+
48+
<!-- About -->
49+
<section class="section about">
50+
<h2 class="section-title">À propos de Effes Kebab</h2>
51+
<p class="about-lead">
52+
Envie d'une escapade gourmande aux saveurs de la Turquie ? Bienvenue chez <strong>Effes Kebab</strong>, où chaque plat est une invitation au voyage. Dans un cadre accueillant et convivial, nous vous proposons une cuisine généreuse, préparée avec passion et des ingrédients rigoureusement sélectionnés.
53+
</p>
54+
55+
<h3 class="why-title">Pourquoi nous rendre visite ?</h3>
56+
57+
<ul class="reasons">
58+
<li>
59+
<span class="reason-icon">🥙</span>
60+
<div>
61+
<strong>Spécialités Traditionnelles</strong>
62+
<p>Découvrez le véritable goût du kebab et de nombreuses spécialités halal, cuisinées selon des recettes authentiques pour ravir les amateurs de gastronomie turque.</p>
63+
</div>
64+
</li>
65+
<li>
66+
<span class="reason-icon">🥗</span>
67+
<div>
68+
<strong>Fraîcheur & Équilibre</strong>
69+
<p>Nous mettons un point d'honneur à allier plaisir et bien-être. Savourez des plats équilibrés, riches en saveurs, qui prouvent qu'une alimentation gourmande peut aussi être saine.</p>
70+
</div>
71+
</li>
72+
<li>
73+
<span class="reason-icon">✨</span>
74+
<div>
75+
<strong>Ambiance Unique</strong>
76+
<p>Que ce soit pour un repas rapide ou une soirée détendue, profitez de notre atmosphère chaleureuse. Dès l'arrivée des beaux jours, notre terrasse ensoleillée vous accueille pour un moment de détente privilégié en plein air.</p>
77+
</div>
78+
</li>
79+
</ul>
80+
</section>
81+
82+
</main>

‎frontend/src/app/home.component.scss‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap');
2+
3+
$fire: #E8390E;
4+
$coal: #1A1208;
5+
$ash: #2E2416;
6+
$cream: #F5ECD7;
7+
$muted: #9C8E7A;
8+
9+
.home {
10+
background: #0F0C08;
11+
color: $cream;
12+
font-family: 'DM Sans', sans-serif;
13+
min-height: 100vh;
14+
}
15+
16+
.hero {
17+
background: $coal;
18+
border-bottom: 1px solid $ash;
19+
padding: 5rem 2rem 4rem;
20+
text-align: center;
21+
position: relative;
22+
overflow: hidden;
23+
24+
&::before {
25+
content: 'EFFES';
26+
position: absolute;
27+
font-family: 'Bebas Neue', sans-serif;
28+
font-size: 20rem;
29+
color: rgba(255,255,255,0.02);
30+
top: 50%;
31+
left: 50%;
32+
transform: translate(-50%, -50%);
33+
pointer-events: none;
34+
white-space: nowrap;
35+
}
36+
}
37+
38+
.hero-eyebrow {
39+
display: block;
40+
font-size: 0.8rem;
41+
letter-spacing: 0.3em;
42+
text-transform: uppercase;
43+
color: $muted;
44+
margin-bottom: 0.5rem;
45+
}
46+
47+
.hero-title {
48+
font-family: 'Bebas Neue', sans-serif;
49+
font-size: clamp(4rem, 12vw, 9rem);
50+
color: $cream;
51+
line-height: 1;
52+
letter-spacing: 0.04em;
53+
margin: 0 0 0.5rem;
54+
55+
span {
56+
color: $fire;
57+
}
58+
}
59+
60+
.hero-sub {
61+
font-size: 1.1rem;
62+
color: $muted;
63+
font-style: italic;
64+
margin-bottom: 2rem;
65+
}
66+
67+
.hero-cta {
68+
display: inline-block;
69+
background: $fire;
70+
color: $cream;
71+
text-decoration: none;
72+
padding: 0.75rem 2.5rem;
73+
font-size: 0.9rem;
74+
font-weight: 500;
75+
letter-spacing: 0.05em;
76+
text-transform: uppercase;
77+
border-radius: 3px;
78+
transition: background 0.2s, transform 0.15s;
79+
80+
&:hover {
81+
background: darken($fire, 8%);
82+
transform: translateY(-2px);
83+
}
84+
}
85+
86+
.section {
87+
max-width: 1100px;
88+
margin: 0 auto;
89+
padding: 4rem 2rem;
90+
91+
&.two-col {
92+
display: grid;
93+
grid-template-columns: 1fr 1fr;
94+
gap: 2rem;
95+
96+
@media (max-width: 768px) {
97+
grid-template-columns: 1fr;
98+
}
99+
}
100+
}
101+
102+
.section-title {
103+
font-family: 'Bebas Neue', sans-serif;
104+
font-size: 1.8rem;
105+
letter-spacing: 0.06em;
106+
color: $cream;
107+
border-bottom: 1px solid $ash;
108+
padding-bottom: 0.5rem;
109+
margin-bottom: 1.5rem;
110+
}
111+
112+
.card {
113+
background: $coal;
114+
border: 1px solid $ash;
115+
border-radius: 6px;
116+
padding: 2rem;
117+
}
118+
119+
.hours-block {
120+
display: flex;
121+
flex-direction: column;
122+
gap: 1.25rem;
123+
margin-bottom: 2rem;
124+
}
125+
126+
.hours-row {
127+
display: flex;
128+
flex-direction: column;
129+
gap: 0.4rem;
130+
131+
strong {
132+
font-size: 1rem;
133+
color: $cream;
134+
padding-left: 0.25rem;
135+
}
136+
}
137+
138+
.badge {
139+
display: inline-block;
140+
background: $fire;
141+
color: $cream;
142+
font-size: 0.75rem;
143+
font-weight: 500;
144+
letter-spacing: 0.05em;
145+
padding: 0.25rem 0.75rem;
146+
border-radius: 99px;
147+
text-transform: uppercase;
148+
width: fit-content;
149+
}
150+
151+
.service-chips {
152+
display: grid;
153+
grid-template-columns: 1fr 1fr;
154+
gap: 1rem;
155+
}
156+
157+
.chip {
158+
background: $ash;
159+
border: 1px solid lighten($ash, 8%);
160+
border-radius: 4px;
161+
padding: 0.75rem 1rem;
162+
text-align: center;
163+
164+
.chip-title {
165+
display: block;
166+
font-family: 'Bebas Neue', sans-serif;
167+
font-size: 1.1rem;
168+
letter-spacing: 0.08em;
169+
color: $fire;
170+
margin-bottom: 0.2rem;
171+
}
172+
173+
small {
174+
color: $muted;
175+
font-size: 0.8rem;
176+
}
177+
}
178+
179+
.photo-card {
180+
display: flex;
181+
flex-direction: column;
182+
}
183+
184+
.photo-frame {
185+
background: $ash;
186+
border-radius: 4px;
187+
overflow: hidden;
188+
height: 250px;
189+
190+
img {
191+
width: 100%;
192+
height: 100%;
193+
object-fit: cover;
194+
display: block;
195+
object-position: center 30%;
196+
}
197+
}
198+
199+
.about {
200+
border-top: 1px solid $ash;
201+
}
202+
203+
.about-lead {
204+
font-size: 1.05rem;
205+
line-height: 1.8;
206+
color: darken($cream, 15%);
207+
margin-bottom: 2.5rem;
208+
209+
strong {
210+
color: $fire;
211+
}
212+
}
213+
214+
.why-title {
215+
font-family: 'Bebas Neue', sans-serif;
216+
font-size: 1.4rem;
217+
letter-spacing: 0.06em;
218+
color: $cream;
219+
margin-bottom: 1.5rem;
220+
}
221+
222+
.reasons {
223+
list-style: none;
224+
padding: 0;
225+
margin: 0;
226+
display: flex;
227+
flex-direction: column;
228+
gap: 1.5rem;
229+
230+
li {
231+
display: flex;
232+
gap: 1.25rem;
233+
align-items: flex-start;
234+
padding: 1.5rem;
235+
background: $coal;
236+
border: 1px solid $ash;
237+
border-left: 3px solid $fire;
238+
border-radius: 4px;
239+
}
240+
241+
.reason-icon {
242+
font-size: 1.5rem;
243+
flex-shrink: 0;
244+
margin-top: 2px;
245+
}
246+
247+
strong {
248+
display: block;
249+
font-size: 1rem;
250+
color: $cream;
251+
margin-bottom: 0.4rem;
252+
}
253+
254+
p {
255+
font-size: 0.9rem;
256+
color: $muted;
257+
line-height: 1.7;
258+
margin: 0;
259+
}
260+
}

0 commit comments

Comments
 (0)