From cc3dcaa08bb01f699060ddb4f68206e5e8390058 Mon Sep 17 00:00:00 2001 From: Ingrihka Date: Thu, 15 Oct 2026 15:27:33 +0200 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20hero-del=20p=C3=A5=20startsiden=20(?= =?UTF-8?q?#39)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/home/HomePage.css | 72 ++++++++++++++++++++++++++++ frontend/src/pages/home/HomePage.tsx | 44 +++++++++++++++++ 2 files changed, 116 insertions(+) create mode 100644 frontend/src/pages/home/HomePage.css create mode 100644 frontend/src/pages/home/HomePage.tsx diff --git a/frontend/src/pages/home/HomePage.css b/frontend/src/pages/home/HomePage.css new file mode 100644 index 0000000..432c9aa --- /dev/null +++ b/frontend/src/pages/home/HomePage.css @@ -0,0 +1,72 @@ +.home { + min-height: 100vh; + background: var(--bg-page); + color: var(--text-primary); + font-family: var(--font-ui); + text-align: left; +} + +/* Innholdet holdes innenfor samme bredde som i Figma (1312px) */ +.home__hero { + max-width: 1312px; + margin: 0 auto; + padding: 64px 48px; + box-sizing: border-box; +} + +.hero { + display: flex; + flex-direction: column; + gap: 24px; + max-width: 660px; +} + +.hero__eyebrow { + margin: 0; + font: 500 11px var(--font-mono); + letter-spacing: 0.06em; + color: var(--text-accent); +} + +.hero__title { + margin: 0; + font-size: 78px; + font-weight: 500; + line-height: 82px; + letter-spacing: -0.04em; +} + +/* «lappen»: kursiv serif. Farge og font kommer fra theme.css (h1 em) */ +.hero__title em { + font-size: 92px; + letter-spacing: -0.01em; +} + +.hero__lead { + max-width: 520px; + margin: 0 0 4px; + font-size: 18px; + line-height: 28px; + color: var(--text-secondary); +} + +.hero__stats { + margin: 0; + font: 500 10px var(--font-mono); + letter-spacing: 0.06em; + color: var(--text-muted); +} + +/* Mobil: mindre overskrift og luft */ +@media (max-width: 600px) { + .home__hero { + padding: 32px 16px; + } + .hero__title { + font-size: 44px; + line-height: 48px; + } + .hero__title em { + font-size: 52px; + } +} diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx new file mode 100644 index 0000000..1caaa4e --- /dev/null +++ b/frontend/src/pages/home/HomePage.tsx @@ -0,0 +1,44 @@ +import "./HomePage.css"; +import "../../components/searchfield/Searchfield.css"; +import "../../components/button/Button.css"; + +function HomePage() { + return ( +
+
+
+

HANDLELAPPEN · VOL. 01 · HØST 2026

+ +

+ Hva skal på
+ lappen i dag? +

+ +

+ Søk etter en vare, eller bla deg gjennom en kategori. Lappen holder + styr på resten, og viser hva det koster i hver kjede. +

+ +
+
+
+
+ ); +} + +export default HomePage; From e99bccae73535536c670f8fcc7bf84e4e42f94ff Mon Sep 17 00:00:00 2001 From: Ingrihka Date: Thu, 15 Oct 2026 15:34:53 +0200 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20aktiv=20handlelapp=20p=C3=A5=20star?= =?UTF-8?q?tsiden=20(#39)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/home/HomePage.css | 137 +++++++++++++++++++++++++++ frontend/src/pages/home/HomePage.tsx | 59 ++++++++++++ 2 files changed, 196 insertions(+) diff --git a/frontend/src/pages/home/HomePage.css b/frontend/src/pages/home/HomePage.css index 432c9aa..9d4683f 100644 --- a/frontend/src/pages/home/HomePage.css +++ b/frontend/src/pages/home/HomePage.css @@ -12,6 +12,9 @@ margin: 0 auto; padding: 64px 48px; box-sizing: border-box; + display: grid; + grid-template-columns: minmax(0, 1fr) 340px; + gap: 64px; } .hero { @@ -56,6 +59,140 @@ letter-spacing: 0.06em; color: var(--text-muted); } +/* ---------- Den aktive lappen ---------- */ +.active-note { + width: 340px; + max-width: 100%; +} + +.active-note__fig { + margin: 0 0 24px; + font: 500 10px var(--font-mono); + letter-spacing: 0.06em; + color: var(--annotation); +} + +.active-note__stack { + position: relative; +} + +/* Arket som ligger bak, litt skjevt */ +.active-note__back { + position: absolute; + inset: 30px -8px -12px 8px; + background: var(--note-tint); + border: 1.25px solid var(--border-strong); + border-radius: 2px; + transform: rotate(4deg); +} + +/* Selve lappen */ +.active-note__paper { + position: relative; + display: flex; + flex-direction: column; + gap: 4px; + padding: 34px 26px 26px 46px; + background: var(--note-paper); + border: 1.25px solid var(--border-strong); + border-radius: 2px; + transform: rotate(-2deg); + box-shadow: 3px 16px 22px -10px rgba(64, 5, 18, 0.1); +} + +/* Den røde margen til venstre */ +.active-note__paper::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 30px; + width: 1.25px; + background: var(--note-margin); +} + +/* Tapen øverst */ +.active-note__tape { + position: absolute; + top: -13px; + left: 50%; + width: 78px; + height: 20px; + background: var(--note-tape); + transform: translateX(-50%) rotate(4deg); +} + +.active-note__label, +.active-note__meta { + margin: 0; + font: 500 10px var(--font-mono); + letter-spacing: 0.06em; +} + +.active-note__label { + color: var(--text-accent); +} + +.active-note__meta { + color: var(--text-muted); +} + +.active-note__title { + margin: 0; + font: 700 34px/42px var(--font-note); + color: var(--note-ink); +} + +.active-note__list { + margin: 8px 0 0; + padding: 0; + list-style: none; +} + +.active-note__list .note-item { + cursor: pointer; +} + +/* Avkrysset vare blir grå og strøket ut */ +.note-item:has(.checkbox:checked) .note-item__name { + color: var(--text-muted); + text-decoration: line-through; +} + +.active-note__more { + margin: 0; + font: 400 17px var(--font-note); + color: var(--text-muted); +} + +.active-note__total { + display: flex; + justify-content: space-between; + align-items: flex-end; + margin-top: 10px; +} + +.active-note__sum { + font: 700 28px/32px var(--font-note); + color: var(--note-ink); +} + +.active-note__button { + justify-content: center; + width: 100%; + margin-top: 10px; +} + +/* Smal skjerm: lappen legger seg under teksten */ +@media (max-width: 1000px) { + .home__hero { + grid-template-columns: 1fr; + } + + .active-note { + justify-self: center; + } +} /* Mobil: mindre overskrift og luft */ @media (max-width: 600px) { diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx index 1caaa4e..3a7973c 100644 --- a/frontend/src/pages/home/HomePage.tsx +++ b/frontend/src/pages/home/HomePage.tsx @@ -1,6 +1,17 @@ import "./HomePage.css"; import "../../components/searchfield/Searchfield.css"; import "../../components/button/Button.css"; +import "../../components/noteItem/NoteItem.css"; +import "../../components/checkbox/Checkbox.css"; + +// Midlertidige data. Byttes ut med ekte data fra backend senere. +const noteItems = [ + { name: "Lettmelk", count: "×2" }, + { name: "Norvegia 26 %" }, + { name: "Mozzarella", count: "×2" }, + { name: "Bananer", checked: true }, + { name: "Tomater", count: "×4" }, +]; function HomePage() { return ( @@ -36,6 +47,54 @@ function HomePage() { 12 400 VARER · 6 KJEDER · OPPDATERT DAGLIG

+ ); From a5c141fa8cb3ecde452ed7843e26132ae1d77b22 Mon Sep 17 00:00:00 2001 From: Ingrihka Date: Thu, 15 Oct 2026 18:30:38 +0200 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20kategorier=20og=20bunntekst=20p?= =?UTF-8?q?=C3=A5=20startsiden=20(#39)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/home/HomePage.css | 93 ++++++++++++++++++++++++++++ frontend/src/pages/home/HomePage.tsx | 71 +++++++++++++++++++++ 2 files changed, 164 insertions(+) diff --git a/frontend/src/pages/home/HomePage.css b/frontend/src/pages/home/HomePage.css index 9d4683f..4f4e1f4 100644 --- a/frontend/src/pages/home/HomePage.css +++ b/frontend/src/pages/home/HomePage.css @@ -182,6 +182,80 @@ width: 100%; margin-top: 10px; } +/* ---------- Kategorier ---------- */ +.home__categories { + border-top: 1px solid var(--border-hairline); + border-bottom: 1px solid var(--border-hairline); +} + +.categories { + max-width: 1312px; + margin: 0 auto; + padding: 32px 48px 42px; + box-sizing: border-box; +} + +.categories__header { + display: flex; + justify-content: space-between; + align-items: flex-end; + gap: 16px; + margin-bottom: 28px; +} + +.categories__title { + display: flex; + align-items: flex-end; + gap: 16px; + margin: 0; + font-size: 32px; + font-weight: 500; + letter-spacing: -0.03em; +} + +.categories__number { + font: 500 12px var(--font-mono); + letter-spacing: 0.06em; + color: var(--text-accent); +} + +.categories__link { + margin: 0; + font: 500 10px var(--font-mono); + letter-spacing: 0.06em; + color: var(--text-muted); +} + +.categories__grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 24px 20px; + margin: 0; + padding: 0; + list-style: none; +} + +.categories__grid .category-card { + width: 100%; + max-width: none; +} + +/* ---------- Bunntekst ---------- */ +.home__footer { + display: flex; + justify-content: space-between; + max-width: 1312px; + margin: 0 auto; + padding: 16px 48px 32px; + box-sizing: border-box; + font: 500 10px var(--font-mono); + letter-spacing: 0.06em; + color: var(--text-muted); +} + +.home__footer p { + margin: 0; +} /* Smal skjerm: lappen legger seg under teksten */ @media (max-width: 1000px) { @@ -192,6 +266,10 @@ .active-note { justify-self: center; } + + .categories__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } /* Mobil: mindre overskrift og luft */ @@ -206,4 +284,19 @@ .hero__title em { font-size: 52px; } + + .categories, + .home__footer { + padding-left: 16px; + padding-right: 16px; + } + + .categories__header { + flex-direction: column; + align-items: flex-start; + } + + .categories__grid { + grid-template-columns: 1fr; + } } diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx index 3a7973c..a557a81 100644 --- a/frontend/src/pages/home/HomePage.tsx +++ b/frontend/src/pages/home/HomePage.tsx @@ -3,6 +3,7 @@ import "../../components/searchfield/Searchfield.css"; import "../../components/button/Button.css"; import "../../components/noteItem/NoteItem.css"; import "../../components/checkbox/Checkbox.css"; +import "../../components/categoryCard/CategoryCard.css"; // Midlertidige data. Byttes ut med ekte data fra backend senere. const noteItems = [ @@ -13,6 +14,29 @@ const noteItems = [ { name: "Tomater", count: "×4" }, ]; +const categories = [ + { + name: "Frukt og grønt", + description: "Frukt, grønnsaker, urter", + count: 214, + }, + { name: "Meieri og egg", description: "Melk, yoghurt, egg", count: 96 }, + { name: "Ost", description: "Hvitost, brunost, smøreost", count: 148 }, + { + name: "Brød og bakst", + description: "Brød, knekkebrød, lefser", + count: 122, + }, + { + name: "Kjøtt og fisk", + description: "Kylling, kjøttdeig, laks", + count: 187, + }, + { name: "Tørrvarer", description: "Pasta, ris, havregryn", count: 263 }, + { name: "Frysevarer", description: "Pizza, grønnsaker, is", count: 91 }, + { name: "Drikke", description: "Kaffe, te, juice", count: 175 }, +]; + function HomePage() { return (
@@ -96,6 +120,53 @@ function HomePage() { +
+
+
+

+ 01 + Kategorier +

+

+ {categories.length} AVDELINGER · BLA I KATALOGEN → +

+
+ +
    + {categories.map((category, index) => ( +
  • + +
    • + ))} +
+
+
+ +
); }