From c1788538d6ee04311cb402c0e4df37f9219963af Mon Sep 17 00:00:00 2001 From: Jpaulo06972 Date: Sat, 11 Apr 2026 00:38:20 -0300 Subject: [PATCH] feat: redesign PSN Store with premium UI, data services, and shopping cart --- src/app/app.component.html | 1 - .../card/card-label/card-label.component.css | 26 +-- .../card-pricing/card-pricing.component.css | 42 +++-- .../card-pricing/card-pricing.component.html | 11 +- .../card-pricing/card-pricing.component.ts | 8 + src/app/components/card/card.component.css | 73 ++++++-- src/app/components/card/card.component.html | 22 ++- src/app/components/card/card.component.ts | 9 +- .../menu-bar/menu-bar.component.css | 108 +++++++++--- .../menu-bar/menu-bar.component.html | 28 ++- .../components/menu-bar/menu-bar.component.ts | 7 +- src/app/models/game.ts | 9 + src/app/pages/home/home.component.css | 164 +++++++++++++++++- src/app/pages/home/home.component.html | 71 +++++--- src/app/pages/home/home.component.ts | 23 ++- src/app/services/cart.service.ts | 20 +++ src/app/services/game.service.ts | 83 +++++++++ src/styles.css | 42 ++++- 18 files changed, 623 insertions(+), 124 deletions(-) create mode 100644 src/app/models/game.ts create mode 100644 src/app/services/cart.service.ts create mode 100644 src/app/services/game.service.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 2e9100f..4d94e1b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,2 @@ - diff --git a/src/app/components/card/card-label/card-label.component.css b/src/app/components/card/card-label/card-label.component.css index 54f3eb9..5ec6c36 100644 --- 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 index 7a172d8..aeeee63 100644 --- 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 index 21cce82..27c0b95 100644 --- 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 @@
-

Play it Now!

+

{{gameType}}

-
- | -

{{gameType}}

-
-
-

{{gamePrice}}

-
+ R$ +

{{gamePriceAmount}}

diff --git a/src/app/components/card/card-pricing/card-pricing.component.ts b/src/app/components/card/card-pricing/card-pricing.component.ts index 5dc831e..b109641 100644 --- 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 index 7564e12..02b3d46 100644 --- 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 index 736eb2c..df31533 100644 --- a/src/app/components/card/card.component.html +++ b/src/app/components/card/card.component.html @@ -1,17 +1,25 @@ - + + +
+ +
+ + diff --git a/src/app/components/card/card.component.ts b/src/app/components/card/card.component.ts index d2c9e49..d295592 100644 --- 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 index b90bbc7..7813814 100644 --- 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; + } } diff --git a/src/app/components/menu-bar/menu-bar.component.html b/src/app/components/menu-bar/menu-bar.component.html index 44067d8..ec2207a 100644 --- a/src/app/components/menu-bar/menu-bar.component.html +++ b/src/app/components/menu-bar/menu-bar.component.html @@ -1,18 +1,34 @@ -
+
+ +
+ + +
+
+ +
+
+ + + + + + {{ cartCount$ | async }} +
+
diff --git a/src/app/components/menu-bar/menu-bar.component.ts b/src/app/components/menu-bar/menu-bar.component.ts index 056da3c..a4d04a1 100644 --- a/src/app/components/menu-bar/menu-bar.component.ts +++ b/src/app/components/menu-bar/menu-bar.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { CartService } from '../../services/cart.service'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-menu-bar', @@ -6,8 +8,11 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./menu-bar.component.css'] }) export class MenuBarComponent implements OnInit { + cartCount$: Observable; - constructor() { } + constructor(private cartService: CartService) { + this.cartCount$ = this.cartService.cartCount$; + } ngOnInit(): void { } diff --git a/src/app/models/game.ts b/src/app/models/game.ts new file mode 100644 index 0000000..89de7a0 --- /dev/null +++ b/src/app/models/game.ts @@ -0,0 +1,9 @@ +export interface Game { + id: number; + cover: string; + label: string; + type: string; + price: string; + title: string; + category: 'PS4' | 'PS5' | 'Exclusive' | 'All'; +} diff --git a/src/app/pages/home/home.component.css b/src/app/pages/home/home.component.css index d04b0ce..e5dba4f 100644 --- a/src/app/pages/home/home.component.css +++ b/src/app/pages/home/home.component.css @@ -1,10 +1,162 @@ -.home__container{ +.home__container { + padding-top: 110px; + padding-bottom: 50px; width: 90%; - margin: auto; - padding-top: 50px; + max-width: 1400px; + margin: 0 auto; +} + +/* Hero Section */ +.home__hero { + display: flex; + padding: 60px; + border-radius: 30px; + margin-bottom: 40px; + align-items: center; + overflow: hidden; + position: relative; +} + +.hero__content { + flex: 1; + z-index: 1; +} + +.hero__label { + background: var(--ps-neon); + color: white; + padding: 4px 12px; + border-radius: 5px; + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; +} + +.hero__title { + font-size: 3.5rem; + margin: 20px 0; + font-weight: 700; + line-height: 1.1; + background: linear-gradient(to right, #fff, #aaa); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero__description { + color: rgba(255, 255, 255, 0.7); + font-size: 1.1rem; + line-height: 1.6; + margin-bottom: 30px; + max-width: 500px; +} + +.hero__actions { + display: flex; + gap: 15px; +} + +.btn { + padding: 12px 30px; + border-radius: 30px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s; + font-size: 0.95rem; +} + +.btn-primary { + background: white; + color: var(--ps-deep); +} + +.btn-primary:hover { + transform: scale(1.05); + box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.1); + color: white; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.2); +} + +.hero__image { + flex: 0.8; + display: flex; + justify-content: flex-end; +} + +.hero__image img { + width: 100%; + max-width: 600px; + border-radius: 20px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); + transform: rotate(2deg); +} + +/* Filters */ +.home__filters { display: flex; + gap: 10px; + margin-bottom: 30px; + overflow-x: auto; + padding-bottom: 5px; +} + +.home__filters button { + background: transparent; + color: rgba(255, 255, 255, 0.6); + padding: 8px 20px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + cursor: pointer; + white-space: nowrap; + transition: all 0.3s; +} + +.home__filters button:hover { + background: rgba(255, 255, 255, 0.05); + color: white; +} + +.home__filters button.active { + background: var(--ps-blue); + color: white; + border-color: var(--ps-blue); +} + +/* Grid */ +.home__grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 30px; +} - justify-content: space-around; - align-items: baseline; - flex-wrap: wrap; +@media (max-width: 1024px) { + .home__hero { + flex-direction: column; + padding: 40px; + text-align: center; + } + + .hero__description { + margin: 0 auto 30px; + } + + .hero__actions { + justify-content: center; + } + + .hero__image { + margin-top: 40px; + } + + .hero__title { + font-size: 2.5rem; + } } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 4613fb7..079b255 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,31 +1,46 @@ -
- - - - - + +
+
+ {{ heroGame.label }} +

{{ heroGame.title }}

+

Experience the epic continuation of Kratos and Atreus' journey. Master the elements and face the Norse gods.

+
+ + +
+
+
+ +
+
+ + + + + +
+ - - - + +
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 007fef0..9e52c13 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { GameService } from '../../services/game.service'; +import { Game } from '../../models/game'; @Component({ selector: 'app-home', @@ -6,10 +8,29 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { + games: Game[] = []; + filteredGames: Game[] = []; + heroGame!: Game; + selectedCategory: string = 'All'; - constructor() { } + constructor(private gameService: GameService) { + this.heroGame = this.gameService.getHeroGame(); + } ngOnInit(): void { + this.gameService.getGames().subscribe(data => { + this.games = data; + this.filteredGames = data; + }); + } + + filterByCategory(category: string) { + this.selectedCategory = category; + if (category === 'All') { + this.filteredGames = this.games; + } else { + this.filteredGames = this.games.filter(game => game.category === category); + } } } diff --git a/src/app/services/cart.service.ts b/src/app/services/cart.service.ts new file mode 100644 index 0000000..a88d637 --- /dev/null +++ b/src/app/services/cart.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class CartService { + private cartCount = new BehaviorSubject(0); + cartCount$ = this.cartCount.asObservable(); + + constructor() { } + + addToCart() { + this.cartCount.next(this.cartCount.value + 1); + } + + getCartCount() { + return this.cartCount.value; + } +} diff --git a/src/app/services/game.service.ts b/src/app/services/game.service.ts new file mode 100644 index 0000000..f8a2372 --- /dev/null +++ b/src/app/services/game.service.ts @@ -0,0 +1,83 @@ +import { Injectable } from '@angular/core'; +import { Game } from '../models/game'; +import { Observable, of } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class GameService { + private games: Game[] = [ + { + id: 1, + title: "Battlefield 1", + cover: "assets/bt-1.jpg", + label: "DIGITAL", + type: "DIGITAL | PS4", + price: "R$ 129,99", + category: "PS4" + }, + { + id: 2, + title: "Battlefield 4", + cover: "assets/bt-4.jpg", + label: "EXCLUSIVE", + type: "DISC | PS5", + price: "R$ 269,99", + category: "PS5" + }, + { + id: 3, + title: "Assassin's Creed", + cover: "assets/ac-cover.jpg", + label: "BEST OF YEAR", + type: "DIGITAL | PS5", + price: "R$ 369,99", + category: "Exclusive" + }, + { + id: 4, + title: "Battlefield Hardline", + cover: "assets/bt-hardline.jpg", + label: "NEW", + type: "DIGITAL | PS3 PS4 PS5", + price: "R$ 369,99", + category: "PS4" + }, + { + id: 5, + title: "Battlefield 5", + cover: "assets/bt-5.jpg", + label: "DIGITAL", + type: "DIGITAL | PS5", + price: "R$ 189,99", + category: "PS5" + }, + { + id: 6, + title: "Battlefield Bad Company 2", + cover: "assets/bt-bad-company-2.jpg", + label: "CLASSIC", + type: "DIGITAL | PS3", + price: "R$ 79,99", + category: "PS4" + } + ]; + + constructor() { } + + getGames(): Observable { + return of(this.games); + } + + getHeroGame(): Game { + return { + id: 0, + title: "God of War Ragnarök", + cover: "https://image.api.playstation.com/vulcan/ap/rnd/202207/1210/67vMo97o0Y8Nq7u0B6eN6i0u.png", + label: "MUST PLAY", + type: "DIGITAL | PS4 PS5", + price: "R$ 349,99", + category: "Exclusive" + }; + } +} diff --git a/src/styles.css b/src/styles.css index 64880fb..8563e9a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,12 +1,48 @@ -/* You can add global styles to this file, and also import other style files */ +@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap'); + +:root { + --ps-blue: #00439c; + --ps-neon: #0072ce; + --ps-deep: #020205; + --ps-glass: rgba(255, 255, 255, 0.05); + --ps-glass-border: rgba(255, 255, 255, 0.1); + --font-main: 'Outfit', sans-serif; +} + *{ padding: 0; margin: 0; border: 0; box-sizing: border-box; + font-family: var(--font-main); } body{ - background: rgb(2,0,36); - background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(9,9,121,1) 100%); + background: radial-gradient(circle at top right, #001f3f 0%, #020205 60%); + background-attachment: fixed; + color: #ffffff; + min-height: 100vh; + overflow-x: hidden; +} + +a { + text-decoration: none; + color: inherit; +} + +/* Glassmorphism Helper */ +.glass { + background: var(--ps-glass); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid var(--ps-glass-border); +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.fade-in { + animation: fadeIn 0.8s ease forwards; }