From 2992d4104849335408dc8ba3706f1de1b20ab2f2 Mon Sep 17 00:00:00 2001 From: Rufaisashah Date: Thu, 16 Apr 2026 14:23:09 +0200 Subject: [PATCH 1/6] resolve footer visibility and layout structure in RootLayout --- .../components/EventDetail/EventDetail.jsx | 59 ++++++++++- .../src/components/EventList/EventList.jsx | 34 ++----- .../app-vite/src/components/Layout/Layout.jsx | 15 ++- templates/app/app-vite/src/main.css | 98 +++++++++++++++++++ 4 files changed, 176 insertions(+), 30 deletions(-) diff --git a/templates/app/app-vite/src/components/EventDetail/EventDetail.jsx b/templates/app/app-vite/src/components/EventDetail/EventDetail.jsx index 69c89f9b..225d00ed 100644 --- a/templates/app/app-vite/src/components/EventDetail/EventDetail.jsx +++ b/templates/app/app-vite/src/components/EventDetail/EventDetail.jsx @@ -1,11 +1,60 @@ -// TODO: display at least date, time, venue, city, and description for one event -// TODO: use useParams() to get the event id from the URL -// TODO: fetch the event from GET /events/:id instead of using mock data +// src/components/EventDetail/EventDetail.jsx +import events from "../../data/events.js"; +import { Link } from "react-router-dom"; + +// Week 3: replace hardcoded index with useParams() + fetch GET /events/:id +const event = events[0]; export default function EventDetail() { return ( -
-

Event detail — coming soon.

+
+ + + ← Back to all events + + + {event.category} + +

{event.name}

+ +
+
+ Date + {event.date} +
+
+ Time + {event.time} +
+
+ Venue + {event.venue} +
+
+ City + {event.city} +
+
+ Price + + {event.price === 0 ? "Free" : `€${event.price}`} + +
+
+ Availability + + {event.ticketsAvailable === 0 + ? "Sold out" + : `${event.ticketsAvailable} tickets left`} + +
+
+ +
+

About this event

+

{event.description}

+
+
); } \ No newline at end of file diff --git a/templates/app/app-vite/src/components/EventList/EventList.jsx b/templates/app/app-vite/src/components/EventList/EventList.jsx index 0436d091..5c5d8d4b 100644 --- a/templates/app/app-vite/src/components/EventList/EventList.jsx +++ b/templates/app/app-vite/src/components/EventList/EventList.jsx @@ -1,30 +1,16 @@ import events from "../../data/events.js"; - -// TODO: split each event below into its own EventCard component -// TODO: add a "Buy ticket" button to each event card -// TODO: replace the mock data import with a fetch call to GET /events +import EventCard from "../EventCard/EventCard.jsx"; +import "./EventList.css"; export default function EventList() { return ( - +
+

Upcoming Events

+
+ {events.map((event) => ( + + ))} +
+
); } diff --git a/templates/app/app-vite/src/components/Layout/Layout.jsx b/templates/app/app-vite/src/components/Layout/Layout.jsx index 407fb917..b50864e7 100644 --- a/templates/app/app-vite/src/components/Layout/Layout.jsx +++ b/templates/app/app-vite/src/components/Layout/Layout.jsx @@ -52,7 +52,20 @@ export default function Layout() { -
{/* Footer content goes here */}
+
+

+ © 2026 HYF Events · Browse Events +

+
); } diff --git a/templates/app/app-vite/src/main.css b/templates/app/app-vite/src/main.css index 49066e3f..fa7a862a 100644 --- a/templates/app/app-vite/src/main.css +++ b/templates/app/app-vite/src/main.css @@ -6,3 +6,101 @@ body, height: 100%; width: 100%; } +/* ── EventCard ─────────────────────────────── */ +.event-card { + border: 1px solid #e0e0e0; + border-radius: 8px; + padding: 20px; + max-width: 420px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.event-category { + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #666; +} + +.event-title { + margin: 0; + font-size: 18px; +} + +.event-meta { + display: flex; + flex-direction: column; + gap: 4px; + color: #444; + font-size: 14px; +} + +.event-meta p { margin: 0; } + +.event-footer { + display: flex; + align-items: center; + gap: 12px; + margin-top: 4px; +} + +.event-price { font-weight: 700; font-size: 16px; } + +.sold-out { color: #c0392b; font-size: 13px; } +.available { color: #27ae60; font-size: 13px; } + +.event-link { + margin-left: auto; + font-size: 14px; + color: #0066cc; + text-decoration: none; +} + +/* ── EventDetail ───────────────────────────── */ +.event-detail { + max-width: 680px; + margin: 40px auto; + padding: 0 20px; + display: flex; + flex-direction: column; + gap: 24px; +} + +.back-link { + font-size: 14px; + color: #0066cc; + text-decoration: none; +} + +.event-detail-title { margin: 0; font-size: 28px; } + +.event-detail-meta { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + background: #f9f9f9; + border-radius: 8px; + padding: 20px; +} + +.meta-item { + display: flex; + flex-direction: column; + gap: 4px; +} + +.meta-label { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: #999; +} + +.meta-value { font-size: 15px; color: #222; } + +.event-description h2 { font-size: 18px; margin-bottom: 8px; } +.event-description p { line-height: 1.7; color: #444; } \ No newline at end of file From b31b8cb88b76f6b8fe86bc8b068355cd9ffd5f85 Mon Sep 17 00:00:00 2001 From: Rufaisashah Date: Thu, 16 Apr 2026 14:23:54 +0200 Subject: [PATCH 2/6] update entry point to support new component routing --- templates/app/app-vite/src/main.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/templates/app/app-vite/src/main.jsx b/templates/app/app-vite/src/main.jsx index 73a36f4d..5e3d6e52 100644 --- a/templates/app/app-vite/src/main.jsx +++ b/templates/app/app-vite/src/main.jsx @@ -7,6 +7,7 @@ import EventList from "./components/EventList/EventList.jsx"; import Login from "./components/Login/Login.jsx"; import Register from "./components/Register/Register.jsx"; import { AuthProvider } from "./context/AuthContext.jsx"; +import EventDetail from "./components/EventDetail/EventDetail.jsx"; import "./main.css"; // Cart model: cart items are stored in localStorage via CartContext (no backend needed). // At checkout, the cart is POSTed to POST /api/orders and then cleared. @@ -19,6 +20,7 @@ const router = createBrowserRouter([ children: [ { index: true, element: }, { path: "events", element: }, + { path: "events/:id", element: } ], }, { path: "/login", element: }, From dd6582363393acd36e8e7e63a549e985b090bace Mon Sep 17 00:00:00 2001 From: Rufaisashah Date: Thu, 16 Apr 2026 14:25:25 +0200 Subject: [PATCH 3/6] split event cards --- .../src/components/EventCard/EventCard.css | 110 ++++++++++++++++++ .../src/components/EventCard/EventCard.jsx | 50 ++++++++ 2 files changed, 160 insertions(+) create mode 100644 templates/app/app-vite/src/components/EventCard/EventCard.css create mode 100644 templates/app/app-vite/src/components/EventCard/EventCard.jsx diff --git a/templates/app/app-vite/src/components/EventCard/EventCard.css b/templates/app/app-vite/src/components/EventCard/EventCard.css new file mode 100644 index 00000000..5cb09763 --- /dev/null +++ b/templates/app/app-vite/src/components/EventCard/EventCard.css @@ -0,0 +1,110 @@ +.event-card { + border: 1px solid #ddd; + border-radius: 8px; + padding: 20px; + background-color: #f9f9f9; + display: flex; + flex-direction: column; + gap: 12px; + transition: all 0.3s ease; +} + +.event-card:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); +} + +.event-category { + display: inline-block; + background-color: #f5f5f5; + color: #000; + padding: 4px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + width: fit-content; +} + +.event-title { + margin: 0; + font-size: 18px; + font-weight: 600; + color: #333; +} + +.event-meta { + display: flex; + flex-direction: column; + gap: 8px; + margin: 8px 0; +} + +.event-meta p { + margin: 0; + color: #666; + font-size: 14px; +} + +.event-footer { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + margin-top: 12px; + padding-top: 12px; + border-top: 1px solid #eee; +} + +.event-price { + font-size: 18px; + font-weight: 700; + color: #000; +} + +.event-availability { + font-size: 13px; + font-weight: 600; + color: #28a745; + padding: 4px 8px; + background-color: #e8f5e9; + border-radius: 4px; +} + +.event-availability.sold-out { + color: #dc3545; + background-color: #ffebee; +} + +.event-link { + padding: 8px 16px; + background-color: #f0f0f0; + color: #000; + text-decoration: none; + border-radius: 4px; + font-weight: 600; + font-size: 13px; + transition: background-color 0.2s ease; + border: 1px solid #ddd; +} + +.event-link:hover { + background-color: #e0e0e0; + text-decoration: none; +} + +@media (max-width: 768px) { + .event-card { + padding: 16px; + } + + .event-footer { + flex-direction: column; + align-items: flex-start; + } + + .event-link { + width: 100%; + text-align: center; + } +} diff --git a/templates/app/app-vite/src/components/EventCard/EventCard.jsx b/templates/app/app-vite/src/components/EventCard/EventCard.jsx new file mode 100644 index 00000000..7773e073 --- /dev/null +++ b/templates/app/app-vite/src/components/EventCard/EventCard.jsx @@ -0,0 +1,50 @@ +// src/components/EventCard/EventCard.jsx +import { Link } from "react-router-dom"; +import "./EventCard.css"; + +export default function EventCard({ event }) { + const { + id, + name, + date, + time, + venue, + city, + category, + price, + ticketsAvailable, + } = event; + + return ( +
+ {category} + +

{name}

+ +
+

+ 📅 {date} at {time} +

+

+ 📍 {venue}, {city} +

+
+ +
+ + {price === 0 ? "Free" : `€${price}`} + + + {ticketsAvailable === 0 + ? "Sold out" + : `${ticketsAvailable} tickets left`} + + + View details → + +
+
+ ); +} From 08258ed775dc6ccc697795b125598f50d3eeff14 Mon Sep 17 00:00:00 2001 From: Rufaisashah Date: Thu, 16 Apr 2026 14:26:25 +0200 Subject: [PATCH 4/6] add styling to event card --- .../src/components/EventList/EventList.css | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 templates/app/app-vite/src/components/EventList/EventList.css diff --git a/templates/app/app-vite/src/components/EventList/EventList.css b/templates/app/app-vite/src/components/EventList/EventList.css new file mode 100644 index 00000000..9a07c638 --- /dev/null +++ b/templates/app/app-vite/src/components/EventList/EventList.css @@ -0,0 +1,29 @@ +.event-list-container { + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; +} + +.event-list-container h1 { + text-align: center; + margin-bottom: 30px; + font-size: 32px; + color: #333; +} + +.event-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 24px; +} + +@media (max-width: 768px) { + .event-list-container { + padding: 20px 16px; + } + + .event-list-container h1 { + font-size: 24px; + margin-bottom: 20px; + } +} From b56f5fce85534d597734afa36dc6404d779b4783 Mon Sep 17 00:00:00 2001 From: Rufaisashah Date: Sun, 19 Apr 2026 12:14:51 +0200 Subject: [PATCH 5/6] =?UTF-8?q?Added=20=20week=201=20final=20=E2=80=94=20h?= =?UTF-8?q?ero=20homepage,=20footer=20link,=20CSS=20cleanup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/app/app-vite/package-lock.json | 9 +- templates/app/app-vite/package.json | 4 +- .../src/components/EventCard/EventCard.css | 90 +++---------- .../src/components/EventCard/EventCard.jsx | 2 +- .../components/EventDetail/EventDetail.css | 63 ++++++++++ .../components/EventDetail/EventDetail.jsx | 14 +-- .../src/components/HomePage/HomePage.css | 52 ++++++++ .../src/components/HomePage/HomePage.jsx | 30 ++--- .../app-vite/src/components/Layout/Layout.css | 119 ++++++++++++++++++ .../app-vite/src/components/Layout/Layout.jsx | 98 ++++++++------- templates/app/app-vite/src/data/events.js | 2 +- templates/app/app-vite/src/main.css | 96 -------------- templates/app/app-vite/src/main.jsx | 2 +- 13 files changed, 336 insertions(+), 245 deletions(-) create mode 100644 templates/app/app-vite/src/components/EventDetail/EventDetail.css create mode 100644 templates/app/app-vite/src/components/HomePage/HomePage.css create mode 100644 templates/app/app-vite/src/components/Layout/Layout.css diff --git a/templates/app/app-vite/package-lock.json b/templates/app/app-vite/package-lock.json index aea80d61..9cf4512a 100644 --- a/templates/app/app-vite/package-lock.json +++ b/templates/app/app-vite/package-lock.json @@ -22,7 +22,7 @@ "json-server": "^0.17.4", "json-server-auth": "^2.1.0", "nodemon": "^3.1.0", - "prettier": "^3.2.5", + "prettier": "^3.8.3", "vite": "^5.2.0" }, "engines": { @@ -4991,10 +4991,11 @@ } }, "node_modules/prettier": { - "version": "3.2.5", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", - "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz", + "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, diff --git a/templates/app/app-vite/package.json b/templates/app/app-vite/package.json index 1d8bc2b2..3a241c1f 100644 --- a/templates/app/app-vite/package.json +++ b/templates/app/app-vite/package.json @@ -25,13 +25,13 @@ "@eslint/js": "^9.0.0", "@vitejs/plugin-react": "^4.2.1", "concurrently": "^9.1.0", - "nodemon": "^3.1.0", "eslint": "^8.57.0", "eslint-plugin-react": "^7.34.1", "globals": "^15.0.0", "json-server": "^0.17.4", "json-server-auth": "^2.1.0", - "prettier": "^3.2.5", + "nodemon": "^3.1.0", + "prettier": "^3.8.3", "vite": "^5.2.0" } } diff --git a/templates/app/app-vite/src/components/EventCard/EventCard.css b/templates/app/app-vite/src/components/EventCard/EventCard.css index 5cb09763..1a350b1f 100644 --- a/templates/app/app-vite/src/components/EventCard/EventCard.css +++ b/templates/app/app-vite/src/components/EventCard/EventCard.css @@ -1,110 +1,54 @@ .event-card { - border: 1px solid #ddd; + border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; - background-color: #f9f9f9; + max-width: 420px; display: flex; flex-direction: column; gap: 12px; - transition: all 0.3s ease; } - -.event-card:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - transform: translateY(-2px); -} - .event-category { - display: inline-block; - background-color: #f5f5f5; - color: #000; - padding: 4px 12px; - border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; - width: fit-content; + letter-spacing: 0.05em; + color: #666; } - .event-title { margin: 0; font-size: 18px; - font-weight: 600; - color: #333; } - .event-meta { display: flex; flex-direction: column; - gap: 8px; - margin: 8px 0; + gap: 4px; + color: #444; + font-size: 14px; } - .event-meta p { margin: 0; - color: #666; - font-size: 14px; } - .event-footer { display: flex; - justify-content: space-between; align-items: center; gap: 12px; - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid #eee; + margin-top: 4px; } - .event-price { - font-size: 18px; font-weight: 700; - color: #000; + font-size: 16px; } - -.event-availability { +.sold-out { + color: #c0392b; font-size: 13px; - font-weight: 600; - color: #28a745; - padding: 4px 8px; - background-color: #e8f5e9; - border-radius: 4px; } - -.event-availability.sold-out { - color: #dc3545; - background-color: #ffebee; -} - -.event-link { - padding: 8px 16px; - background-color: #f0f0f0; - color: #000; - text-decoration: none; - border-radius: 4px; - font-weight: 600; +.available { + color: #27ae60; font-size: 13px; - transition: background-color 0.2s ease; - border: 1px solid #ddd; } - -.event-link:hover { - background-color: #e0e0e0; +.event-link { + margin-left: auto; + font-size: 14px; + color: #0066cc; text-decoration: none; } - -@media (max-width: 768px) { - .event-card { - padding: 16px; - } - - .event-footer { - flex-direction: column; - align-items: flex-start; - } - - .event-link { - width: 100%; - text-align: center; - } -} diff --git a/templates/app/app-vite/src/components/EventCard/EventCard.jsx b/templates/app/app-vite/src/components/EventCard/EventCard.jsx index 7773e073..70dde3ed 100644 --- a/templates/app/app-vite/src/components/EventCard/EventCard.jsx +++ b/templates/app/app-vite/src/components/EventCard/EventCard.jsx @@ -1,7 +1,7 @@ -// src/components/EventCard/EventCard.jsx import { Link } from "react-router-dom"; import "./EventCard.css"; + export default function EventCard({ event }) { const { id, diff --git a/templates/app/app-vite/src/components/EventDetail/EventDetail.css b/templates/app/app-vite/src/components/EventDetail/EventDetail.css new file mode 100644 index 00000000..382e3fee --- /dev/null +++ b/templates/app/app-vite/src/components/EventDetail/EventDetail.css @@ -0,0 +1,63 @@ +/* ── EventDetail ───────────────────────────── */ +.event-detail { + max-width: 680px; + margin: 40px auto; + padding: 0 20px; + display: flex; + flex-direction: column; + gap: 24px; +} + +.back-link { + font-size: 14px; + color: #0066cc; + text-decoration: none; +} + +.event-detail-title { + margin: 0; + font-size: 28px; +} + +.event-detail-meta { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + background: #f9f9f9; + border-radius: 8px; + padding: 20px; +} + +.meta-item { + display: flex; + flex-direction: column; + gap: 4px; +} + +.meta-label { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: #999; +} + +.meta-value { + font-size: 15px; + color: #222; +} + +.event-description h2 { + font-size: 18px; + margin-bottom: 8px; +} +.event-description p { + line-height: 1.7; + color: #444; +} +.sold-out { + color: #c0392b; +} +.available { + color: #27ae60; +} diff --git a/templates/app/app-vite/src/components/EventDetail/EventDetail.jsx b/templates/app/app-vite/src/components/EventDetail/EventDetail.jsx index 225d00ed..476d3c36 100644 --- a/templates/app/app-vite/src/components/EventDetail/EventDetail.jsx +++ b/templates/app/app-vite/src/components/EventDetail/EventDetail.jsx @@ -1,14 +1,11 @@ -// src/components/EventDetail/EventDetail.jsx import events from "../../data/events.js"; import { Link } from "react-router-dom"; - -// Week 3: replace hardcoded index with useParams() + fetch GET /events/:id -const event = events[0]; +import "./EventDetail.css"; export default function EventDetail() { + const event = events[0]; return (
- ← Back to all events @@ -42,7 +39,9 @@ export default function EventDetail() {
Availability - + {event.ticketsAvailable === 0 ? "Sold out" : `${event.ticketsAvailable} tickets left`} @@ -54,7 +53,6 @@ export default function EventDetail() {

About this event

{event.description}

- ); -} \ No newline at end of file +} diff --git a/templates/app/app-vite/src/components/HomePage/HomePage.css b/templates/app/app-vite/src/components/HomePage/HomePage.css new file mode 100644 index 00000000..ac402463 --- /dev/null +++ b/templates/app/app-vite/src/components/HomePage/HomePage.css @@ -0,0 +1,52 @@ +.hero { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 80px 24px; + gap: 20px; +} + +.hero-badge { + background: #eef2ff; + color: #3730a3; + font-size: 13px; + font-weight: 600; + padding: 6px 14px; + border-radius: 20px; + letter-spacing: 0.03em; +} + +.hero-title { + font-size: 48px; + font-weight: 700; + line-height: 1.15; + color: #111; + margin: 0; + max-width: 600px; +} + +.hero-subtitle { + font-size: 18px; + color: #666; + max-width: 480px; + line-height: 1.6; + margin: 0; +} + +.hero-cta { + display: inline-block; + background: #3730a3; + color: #fff; + text-decoration: none; + padding: 14px 32px; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + margin-top: 8px; + transition: background 0.15s; +} + +.hero-cta:hover { + background: #312e81; +} diff --git a/templates/app/app-vite/src/components/HomePage/HomePage.jsx b/templates/app/app-vite/src/components/HomePage/HomePage.jsx index 88fa881a..6c2bf790 100644 --- a/templates/app/app-vite/src/components/HomePage/HomePage.jsx +++ b/templates/app/app-vite/src/components/HomePage/HomePage.jsx @@ -1,18 +1,20 @@ -// Feel free to replace the content of this component with your own -function HomePage() { +import { Link } from "react-router-dom"; +import "./HomePage.css"; + +export default function HomePage() { return ( -
- Welcome to the homepage! +
+ 🎟 Events platform +

+ Discover events
happening near you +

+

+ Conferences, workshops, and hackathons — find your next experience and + grab your ticket in seconds. +

+ + Browse events → +
); } - -export default HomePage; diff --git a/templates/app/app-vite/src/components/Layout/Layout.css b/templates/app/app-vite/src/components/Layout/Layout.css new file mode 100644 index 00000000..6dcbc6c0 --- /dev/null +++ b/templates/app/app-vite/src/components/Layout/Layout.css @@ -0,0 +1,119 @@ +/* src/components/Layout/Layout.css */ +.site-wrapper { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.site-header { + border-bottom: 1px solid #e0e0e0; + background: #fff; + position: sticky; + top: 0; + z-index: 100; +} + +.site-nav { + max-width: 1100px; + margin: 0 auto; + padding: 0 24px; + height: 64px; + display: flex; + align-items: center; + gap: 32px; +} + +.nav-logo { + display: flex; + align-items: center; +} +.nav-logo img { + display: block; +} + +.nav-links { + display: flex; + list-style: none; + margin: 0; + padding: 0; + gap: 4px; + flex: 1; +} + +.nav-link { + padding: 6px 12px; + border-radius: 6px; + text-decoration: none; + color: #444; + font-size: 15px; + transition: background 0.15s; +} + +.nav-link:hover { + background: #f3f3f3; +} +.nav-link.active { + background: #eef2ff; + color: #3730a3; + font-weight: 500; +} + +.nav-auth { + display: flex; + align-items: center; + gap: 8px; + margin-left: auto; +} + +.nav-user { + font-size: 14px; + color: #666; +} + +.btn-signout { + padding: 6px 14px; + border: 1px solid #e0e0e0; + border-radius: 6px; + background: #fff; + cursor: pointer; + font-size: 14px; + color: #444; +} + +.btn-login { + padding: 6px 14px; + border-radius: 6px; + text-decoration: none; + font-size: 14px; + color: #444; + border: 1px solid #e0e0e0; +} + +.btn-register { + padding: 6px 14px; + border-radius: 6px; + text-decoration: none; + font-size: 14px; + color: #fff; + background: #3730a3; +} + +.site-main { + flex: 1; + max-width: 1100px; + margin: 0 auto; + padding: 32px 24px; + width: 100%; +} + +.site-footer { + border-top: 1px solid #eee; + padding: 20px 24px; + text-align: center; + color: #999; + font-size: 14px; +} +.site-footer a { + color: #3082a3; + text-decoration: underline; +} \ No newline at end of file diff --git a/templates/app/app-vite/src/components/Layout/Layout.jsx b/templates/app/app-vite/src/components/Layout/Layout.jsx index b50864e7..95c1d294 100644 --- a/templates/app/app-vite/src/components/Layout/Layout.jsx +++ b/templates/app/app-vite/src/components/Layout/Layout.jsx @@ -1,69 +1,77 @@ -import { Link, Outlet } from "react-router-dom"; +import { Link, Outlet, NavLink } from "react-router-dom"; import hyfLogo from "../../assets/hyf.svg"; import { useAuth } from "../../context/AuthContext.jsx"; +import "./Layout.css"; export default function Layout() { const { user, logout } = useAuth(); return ( -
-
-
diff --git a/templates/app/app-vite/src/components/Layout/Layout.css b/templates/app/app-vite/src/components/Layout/Layout.css index 6dcbc6c0..922419cc 100644 --- a/templates/app/app-vite/src/components/Layout/Layout.css +++ b/templates/app/app-vite/src/components/Layout/Layout.css @@ -1,4 +1,3 @@ -/* src/components/Layout/Layout.css */ .site-wrapper { min-height: 100vh; display: flex; @@ -116,4 +115,4 @@ .site-footer a { color: #3082a3; text-decoration: underline; -} \ No newline at end of file +}