felipeAguiarCode · Jpaulo06972 · Apr 11, 2026
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,3 +1,2 @@
 <app-menu-bar></app-menu-bar>
 <app-home></app-home>
-<router-outlet></router-outlet>
diff --git a/src/app/components/card/card-label/card-label.component.css b/src/app/components/card/card-label/card-label.component.css
@@ -1,18 +1,18 @@
-.card-label__container{
+.card-label__container {
 	position: absolute;
-	bottom:90px;
-	right: 0;
+	bottom: 100px;
+	left: 0;
+	z-index: 15;
 }
 
-.card-label__content{
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: #0d0d0d;
+.card-label__content {
+	background: var(--ps-neon);
 	color: white;
-	font-size: 12px;
-	font-family: 'Segoe UI';
-	font-weight: bold;
-	height: 40px;
-	padding: 0px 50px;
+	padding: 5px 25px;
+	font-size: 0.75rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	border-radius: 0 5px 5px 0;
+	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
 }
diff --git a/src/app/components/card/card-pricing/card-pricing.component.css b/src/app/components/card/card-pricing/card-pricing.component.css
@@ -1,25 +1,45 @@
-.card-pricing__container{
+.card-pricing__container {
 	position: absolute;
-	bottom:0px;
+	bottom: 0px;
 	left: 0;
+	width: 100%;
+	padding: 20px;
+	background: rgba(2, 2, 5, 0.8);
+	backdrop-filter: blur(10px);
+	border-top: 1px solid rgba(255, 255, 255, 0.05);
+	min-height: 100px;
 	display: flex;
 	flex-direction: column;
-	width: 100%;
-	height: 70px;
-	background-color: rgba(0,0,0,0.8);
-	padding: 10px;
+	justify-content: center;
 	color: antiquewhite;
 	font-family: Calibri;
 }
 
-.card-pricing__title{
-	margin-bottom: 3px;
+.card-pricing__title p {
+	color: rgba(255, 255, 255, 0.5);
+	font-size: 0.7rem;
+	font-weight: 500;
+	margin-bottom: 5px;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
 }
 
-.card-pricing__value{
+.card-pricing__value {
 	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
+	align-items: baseline;
+	gap: 4px;
+}
+
+.currency {
+	color: var(--ps-neon);
+	font-size: 0.9rem;
+	font-weight: 700;
+}
+
+.amount {
+	color: white;
+	font-size: 1.4rem;
+	font-weight: 700;
 }
 
 .card-pricing__value__console{

diff --git a/src/app/components/card/card-pricing/card-pricing.component.html b/src/app/components/card/card-pricing/card-pricing.component.html
@@ -1,14 +1,9 @@
 <div class="card-pricing__container">
 	<div class="card-pricing__title">
-		<h3>Play it Now!</h3>
+		<p>{{gameType}}</p>
 	</div>
 	<div class="card-pricing__value">
-		<div class="card-pricing__value__console">
-			<span>|</span>
-			<p>{{gameType}}</p>
-		</div>
-		<div class="card-pricing__value__money">
-			<p class="game-price">{{gamePrice}}</p>
-		</div>
+		<span class="currency">R$</span>
+		<p class="amount">{{gamePriceAmount}}</p>
 	</div>
 </div>
diff --git a/src/app/components/card/card-pricing/card-pricing.component.ts b/src/app/components/card/card-pricing/card-pricing.component.ts
@@ -11,9 +11,17 @@ export class CardPricingComponent implements OnInit {
 	gameType:string ="Digital PS4"
 	@Input()
 	gamePrice:string = "R$ 399,90"
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  get gamePriceAmount(): string {
+    if (this.gamePrice && this.gamePrice.includes('R$ ')) {
+      return this.gamePrice.split('R$ ')[1];
+    }
+    return this.gamePrice;
+  }
+
 }
diff --git a/src/app/components/card/card.component.css b/src/app/components/card/card.component.css
@@ -1,21 +1,70 @@
-.card__container{
+.card__container {
 	position: relative;
-	border:3px solid #3E4357;
-	border-radius: 10px;
-	width: 350px;
-	height: 500px;
-
 	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: auto;
+	border-radius: 20px;
 	overflow: hidden;
-	margin-top: 10px;
+	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+	cursor: pointer;
+}
+
+.card__container:hover {
+	transform: translateY(-10px) scale(1.02);
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 67, 156, 0.3);
+	border-color: var(--ps-neon);
 }
 
-.card__img{
-	min-width: 100%;
-	min-height: 100%;
-	transition: transform .8s;
+.card__img {
+	width: 100%;
+	height: 400px;
+	object-fit: cover;
+	transition: transform 0.6s ease;
 }
 
-.card__img:hover{
+.card__container:hover .card__img {
 	transform: scale(1.1);
 }
+
+.card__overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(2, 2, 5, 0.6);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transition: opacity 0.3s;
+	z-index: 10;
+}
+
+.card__container:hover .card__overlay {
+	opacity: 1;
+}
+
+.btn-buy {
+	background: var(--ps-neon);
+	color: white;
+	padding: 12px 24px;
+	border-radius: 30px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	transform: translateY(20px);
+	transition: all 0.4s ease;
+	box-shadow: 0 10px 20px rgba(0, 114, 206, 0.4);
+}
+
+.card__container:hover .btn-buy {
+	transform: translateY(0);
+}
+
+.btn-buy:hover {
+	background: #0088ff;
+	transform: scale(1.05);
+}
diff --git a/src/app/components/card/card.component.html b/src/app/components/card/card.component.html
@@ -1,17 +1,25 @@
-<a href="#" class="card__container">
+<a href="#" class="card__container glass">
 	<img
 		class="card__img"
-		[src]=[gameCover]
-		alt=""
-		srcset=""
+		[src]="gameCover"
+		alt="Cover"
 	>
+
+	<div class="card__overlay">
+		<button class="btn-buy" (click)="buyGame($event)">
+			<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+			Add to Cart
+		</button>
+	</div>
+
 	<app-card-label
-		gameLabel="{{gameLabel}}"
+		[gameLabel]="gameLabel"
 	>
 	</app-card-label>
+
 	<app-card-pricing
-		gameType="{{gameType}}"
-		gamePrice="{{gamePrice}}"
+		[gameType]="gameType"
+		[gamePrice]="gamePrice"
 	>
 	</app-card-pricing>
 </a>
diff --git a/src/app/components/card/card.component.ts b/src/app/components/card/card.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { CartService } from '../../services/cart.service';
 
 @Component({
   selector: 'app-card',
@@ -16,9 +17,15 @@ export class CardComponent implements OnInit {
 	@Input()
 	gamePrice:string = "R$ 399,90"
 
-  constructor() { }
+  constructor(private cartService: CartService) { }
 
   ngOnInit(): void {
   }
 
+  buyGame(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.cartService.addToCart();
+  }
+
 }
diff --git a/src/app/components/menu-bar/menu-bar.component.css b/src/app/components/menu-bar/menu-bar.component.css
@@ -1,44 +1,100 @@
-.menu-bar__container{
+.menu-bar__container {
 	display: flex;
-	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	height: 80px;
+	padding: 0 40px;
 	position: fixed;
+	top: 15px;
+	left: 50%;
+	transform: translateX(-50%);
+	width: calc(100% - 40px);
+	max-width: 1400px;
 	z-index: 999;
-	background-color: #ffffff;
+	border-radius: 20px;
+}
+
+.menu-bar__logo {
+	display: flex;
+	align-items: center;
+}
+
+.menu-bar__search {
+	flex-grow: 1;
+	max-width: 500px;
+	margin: 0 30px;
+	position: relative;
+}
+
+.search-input {
 	width: 100%;
-	height: 40px;
-	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
+	background: rgba(255, 255, 255, 0.1);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	padding: 10px 20px;
+	border-radius: 10px;
+	color: white;
+	outline: none;
+	transition: all 0.3s ease;
+}
+
+.search-input:focus {
+	background: rgba(255, 255, 255, 0.15);
+	border-color: var(--ps-neon);
+	box-shadow: 0 0 15px rgba(0, 114, 206, 0.3);
+}
+
+.menu-bar__item ul {
+	display: flex;
+	list-style: none;
+}
+
+.menu-bar__item ul li {
+	margin: 0 15px;
+}
+
+.menu-bar__item ul li a {
+	font-weight: 500;
+	color: rgba(255, 255, 255, 0.8);
+	transition: color 0.3s;
+	font-size: 0.9rem;
 }
 
-.menu-bar__logo{
-  margin-left: 30px;
-  display: flex;
-  align-items: center;
+.menu-bar__item ul li a:hover {
+	color: var(--ps-neon);
 }
 
-.menu-bar__item{
-  display: flex;
-  margin:auto;
-  align-items: center;
+.menu-bar__cart {
+	margin-left: 20px;
+	cursor: pointer;
 }
 
-.menu-bar__item > ul{
+.cart-icon-wrapper {
+	position: relative;
 	display: flex;
-	list-style-type: none;
+	align-items: center;
+	justify-content: center;
+	transition: transform 0.2s;
 }
 
-.menu-bar__item > ul > li {
-	padding: 5px;
-	margin-right: 15px;
+.cart-icon-wrapper:hover {
+	transform: scale(1.1);
 }
 
-.menu-bar__item > ul > li > a {
-	text-decoration: none;
-	padding: 5px;
-	color: rgb(7, 7, 7);
-	font-family: 'Segoe UI';
+.cart-badge {
+	position: absolute;
+	top: -8px;
+	right: -8px;
+	background: var(--ps-neon);
+	color: white;
+	font-size: 0.7rem;
+	font-weight: bold;
+	padding: 2px 6px;
+	border-radius: 10px;
+	border: 2px solid #020205;
 }
 
-.menu-bar__item > ul > li > a:hover {
-	color: blue;
-	font-weight: 600;
+@media (max-width: 768px) {
+	.menu-bar__search, .menu-bar__item {
+		display: none;
+	}
 }