Skip to content

Commit 69bc743

Browse files
KaiUweCZEKaiUweCZE
committed
feat: about page
1 parent ed34bc4 commit 69bc743

9 files changed

Lines changed: 719 additions & 0 deletions

File tree

‎apps/herbatika/src/app/o-nas/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type { Metadata } from "next";
2+
import { AboutPage } from "@/components/about/about-page";
3+
4+
export const metadata: Metadata = {
5+
title: "O našom tíme | Herbatika",
6+
description:
7+
"Spoznajte príbeh značky Herbatica, jej začiatky, tím, nároky na kvalitu, vlastné produkty a víziu do budúcnosti.",
8+
};
9+
10+
export default function AboutPageRoute() {
11+
return <AboutPage />;
12+
}

‎apps/herbatika/src/assets/about/1.avif‎

23.1 KB
Binary file not shown.

‎apps/herbatika/src/assets/about/2.avif‎

72.5 KB
Binary file not shown.

‎apps/herbatika/src/assets/about/3.avif‎

85.1 KB
Binary file not shown.

‎apps/herbatika/src/components/about/about-page-sections.tsx‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
import NextLink from "next/link";
2+
import { Fragment } from "react";
3+
import { ABOUT_PAGE } from "./about-page.data";
4+
import {
5+
AboutImageFrame,
6+
AboutParagraphText,
7+
SectionHeader,
8+
aboutParagraphClassName,
9+
} from "./about-page.shared";
10+
11+
const iconLinkClassName =
12+
"inline-flex h-800 w-800 items-center justify-center rounded-full border border-border-secondary bg-surface text-fg-primary transition-colors hover:border-primary hover:bg-primary-light";
13+
14+
function AboutLogoMeaning() {
15+
return (
16+
<section className="border-border-secondary border-t pt-650">
17+
<div className="max-w-5xl border-primary border-l-4 pl-400">
18+
{ABOUT_PAGE.logoMeaning.paragraphs.map((paragraph, index) => (
19+
<AboutParagraphText
20+
key={`logo-meaning-${index}`}
21+
paragraph={paragraph}
22+
/>
23+
))}
24+
</div>
25+
</section>
26+
);
27+
}
28+
29+
export function AboutArticleSections({
30+
group = "beforeMilestones",
31+
}: {
32+
group?: "afterMilestones" | "beforeMilestones";
33+
}) {
34+
const sections =
35+
group === "beforeMilestones"
36+
? ABOUT_PAGE.sections.slice(0, 3)
37+
: ABOUT_PAGE.sections.slice(3);
38+
39+
return (
40+
<div className="space-y-650">
41+
{sections.map((section, index) => (
42+
<Fragment key={section.title}>
43+
<section className="grid gap-500 border-border-secondary border-t pt-650 first:border-t-0 first:pt-0 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,34rem)] lg:items-start">
44+
<div className="max-w-5xl space-y-300">
45+
<SectionHeader title={section.title} />
46+
<div className="space-y-300">
47+
{section.paragraphs.map((paragraph, paragraphIndex) => (
48+
<AboutParagraphText
49+
key={`${section.title}-${paragraphIndex}`}
50+
paragraph={paragraph}
51+
/>
52+
))}
53+
</div>
54+
</div>
55+
56+
{section.image ? (
57+
<AboutImageFrame image={section.image} />
58+
) : null}
59+
</section>
60+
61+
{group === "beforeMilestones" && index === 0 ? (
62+
<AboutLogoMeaning />
63+
) : null}
64+
</Fragment>
65+
))}
66+
</div>
67+
);
68+
}
69+
70+
export function AboutMilestones() {
71+
return (
72+
<section className="space-y-400 border-border-secondary border-t pt-650">
73+
<SectionHeader title="Kľúčové míľniky našej histórie" />
74+
<ol className="space-y-250">
75+
{ABOUT_PAGE.milestones.map((milestone, index) => (
76+
<li
77+
className="grid gap-150 border-border-secondary border-t py-250 first:border-t-0 sm:grid-cols-[5rem_minmax(0,1fr)]"
78+
key={`${milestone.year}-${index}`}
79+
>
80+
<p className="text-xl leading-tight font-bold text-primary">
81+
{milestone.year}
82+
</p>
83+
<AboutParagraphText paragraph={milestone.description} />
84+
</li>
85+
))}
86+
</ol>
87+
</section>
88+
);
89+
}
90+
91+
export function AboutClosingStatement() {
92+
return (
93+
<p className="mx-auto max-w-5xl text-center text-2xl leading-snug font-bold text-primary">
94+
{ABOUT_PAGE.closingStatement}
95+
</p>
96+
);
97+
}
98+
99+
export function AboutPrinciples() {
100+
return (
101+
<section className="grid gap-500 border-border-secondary border-t pt-650 md:grid-cols-3">
102+
{ABOUT_PAGE.principles.map((principle) => (
103+
<article className="space-y-250" key={principle.title}>
104+
<h2 className="flex items-center gap-200 text-2xl leading-tight font-bold text-fg-primary">
105+
<span
106+
aria-hidden="true"
107+
className="token-icon-leaf text-icon-lg text-primary"
108+
/>
109+
{principle.title}
110+
</h2>
111+
<p className={aboutParagraphClassName}>{principle.description}</p>
112+
</article>
113+
))}
114+
</section>
115+
);
116+
}
117+
118+
function AboutSocialLinks() {
119+
return (
120+
<ul className="flex flex-wrap gap-150">
121+
{ABOUT_PAGE.socialLinks.map((link) => (
122+
<li key={link.href}>
123+
<NextLink
124+
aria-label={link.label}
125+
className={iconLinkClassName}
126+
href={link.href}
127+
rel="noreferrer noopener"
128+
target="_blank"
129+
>
130+
<span
131+
aria-hidden="true"
132+
className={`${link.icon} text-icon-lg`}
133+
/>
134+
</NextLink>
135+
</li>
136+
))}
137+
</ul>
138+
);
139+
}
140+
141+
function AboutRatingStars() {
142+
return (
143+
<div
144+
aria-label="5 z 5 hviezdičiek"
145+
className="flex items-center gap-100 text-warning"
146+
role="img"
147+
>
148+
{Array.from({ length: 5 }).map((_, index) => (
149+
<span
150+
aria-hidden="true"
151+
className="token-icon-star text-icon-lg"
152+
key={`about-rating-star-${index + 1}`}
153+
/>
154+
))}
155+
</div>
156+
);
157+
}
158+
159+
export function AboutCommunityAndReviews() {
160+
return (
161+
<div className="space-y-650 border-border-secondary border-t pt-650">
162+
<div className="grid gap-500 lg:grid-cols-2">
163+
<div className="space-y-300">
164+
{ABOUT_PAGE.follow.paragraphs.map((paragraph, index) => (
165+
<AboutParagraphText
166+
key={`follow-${index}`}
167+
paragraph={paragraph}
168+
/>
169+
))}
170+
<AboutSocialLinks />
171+
</div>
172+
173+
<div className="space-y-300">
174+
{ABOUT_PAGE.loyalty.paragraphs.map((paragraph, index) => (
175+
<AboutParagraphText
176+
key={`loyalty-${index}`}
177+
paragraph={paragraph}
178+
/>
179+
))}
180+
</div>
181+
</div>
182+
183+
<section className="space-y-300">
184+
<SectionHeader title={ABOUT_PAGE.reviews.title} />
185+
{ABOUT_PAGE.reviews.paragraphs.map((paragraph, index) => (
186+
<AboutParagraphText
187+
key={`reviews-${index}`}
188+
paragraph={paragraph}
189+
/>
190+
))}
191+
<AboutRatingStars />
192+
</section>
193+
</div>
194+
);
195+
}
196+
197+
export function AboutContact() {
198+
return (
199+
<section className="grid gap-500 border-border-secondary border-t pt-650 lg:grid-cols-[minmax(0,1fr)_minmax(16rem,24rem)]">
200+
<div className="space-y-350">
201+
<SectionHeader title={ABOUT_PAGE.contact.title} />
202+
<div className="space-y-300">
203+
{ABOUT_PAGE.contact.paragraphs.map((paragraph, index) => (
204+
<AboutParagraphText
205+
key={`contact-${index}`}
206+
paragraph={paragraph}
207+
/>
208+
))}
209+
</div>
210+
</div>
211+
212+
<address className="not-italic">
213+
<h3 className="mb-250 text-lg leading-tight font-bold text-fg-primary">
214+
Prevádzkovateľ internetového obchodu
215+
</h3>
216+
<ul className="space-y-100 font-verdana text-md leading-relaxed text-fg-secondary">
217+
{ABOUT_PAGE.contact.companyDetails.map((detail) => (
218+
<li key={detail}>{detail}</li>
219+
))}
220+
</ul>
221+
</address>
222+
</section>
223+
);
224+
}

‎apps/herbatika/src/components/about/about-page-top.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ABOUT_PAGE } from "./about-page.data";
2+
import { AboutParagraphText } from "./about-page.shared";
3+
4+
export function AboutHero() {
5+
return (
6+
<section className="max-w-5xl space-y-250">
7+
<h1 className="text-4xl leading-tight font-bold text-fg-primary lg:text-5xl">
8+
{ABOUT_PAGE.hero.title}
9+
</h1>
10+
<AboutParagraphText paragraph={ABOUT_PAGE.hero.lead} />
11+
</section>
12+
);
13+
}

0 commit comments

Comments
 (0)