Skip to content

Commit 535f67d

Browse files
netpoenetpoe
committed
feat(ui): Home. Installs fonts
1 parent 7a309b0 commit 535f67d

20 files changed

+173
-38
lines changed

‎app/public/fonts/PPNeueMachina-InktrapRegular.otf

118 KB
Binary file not shown.

‎app/public/fonts/PPNeueMachina-InktrapRegular.ttf

144 KB
Binary file not shown.

‎app/public/fonts/PPNeueMachina-InktrapRegular.woff

60.1 KB
Binary file not shown.

‎app/public/fonts/PPNeueMachina-InktrapRegular.woff2

49.6 KB
Binary file not shown.

‎app/public/fonts/PPNeueMachina-InktrapSemibold.otf

120 KB
Binary file not shown.

‎app/public/fonts/PPNeueMachina-InktrapSemibold.ttf

144 KB
Binary file not shown.

‎app/public/fonts/PPNeueMachina-InktrapSemibold.woff

60.7 KB
Binary file not shown.

‎app/public/fonts/PPNeueMachina-InktrapSemibold.woff2

50.1 KB
Binary file not shown.

‎app/public/locales/en/head.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"head.og.description": "Chat with your files. Intelligent PDF file reader.",
3-
"head.og.title": "AI File Agent"
2+
"head.og.description": "Súper Únderground Artists, Collections & Events",
3+
"head.og.title": "svpervnder"
44
}

‎app/src/pages/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
44
import Head from "next/head";
55

66
import { HomeLayout } from "layouts/home-layout/HomeLayout";
7+
import { Home } from "ui/svpervnder/home/Home";
78

89
const Index: NextPage = () => {
910
const { t } = useTranslation("head");
@@ -17,6 +18,8 @@ const Index: NextPage = () => {
1718
<meta property="og:description" content={t("head.og.description")} />
1819
<meta property="og:url" content="https://fileagent.ai/" />
1920
</Head>
21+
22+
<Home />
2023
</HomeLayout>
2124
);
2225
};

‎app/src/theme/globals.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ html {
88
@media (max-width: $mq-medium) {
99
font-size: 14px;
1010
}
11-
font-size: 16px;
11+
font-size: 14px;
1212
}
1313

1414
html,

‎app/src/theme/variants/_svpervnder.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -95,16 +95,17 @@ body[data-theme="lease-721"] {
9595
// Typography
9696
--color-typography-headline-1: var(--color-white);
9797
--color-typography-headline-2: var(--color-white);
98-
--color-typography-headline-3: var(--color-white);
99-
--color-typography-headline-4: var(--color-white);
100-
--color-typography-headline-5: var(--color-white);
98+
--color-typography-headline-3: var(--color-dark-4);
99+
--color-typography-headline-4: var(--color-dark-4);
100+
--color-typography-headline-5: var(--color-dark-4);
101101
--color-typography-headline-6: var(--color-white);
102102
--color-typography-text: var(--color-white);
103+
--color-typography-text-lead: var(--color-dark-4);
103104
--color-typography-text-bold: var(--color-white);
104105
--color-typography-subtitle: var(--color-dark-5);
105106
--color-typography-button-label: var(--color-white);
106107
--color-typography-mini-button-label: var(--color-white);
107-
--color-typography-description: var(--color-status-warning);
108+
--color-typography-description: var(--color-dark-4);
108109
--color-typography-mini-description: var(--color-dark-5);
109110
--color-typography-link: var(--color-secondary-shade-mid);
110111
--color-typography-link-hover: var(--color-secondary-shade-low);

‎app/src/ui/svpervnder/home/Home.module.scss

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import "src/theme/base";
2+
3+
.home {
4+
display: block;
5+
6+
&__hero {
7+
display: flex;
8+
flex-direction: column;
9+
justify-content: center;
10+
height: 50vh;
11+
text-align: left;
12+
background-color: var(--color-background);
13+
}
14+
15+
&__latest-collections {
16+
text-align: right;
17+
18+
&--artist-name {
19+
color: var(--color-primary);
20+
}
21+
}
22+
}

‎app/src/ui/svpervnder/home/Home.module.scss.d.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export type Styles = {
2+
home: string;
3+
home__hero: string;
4+
"home__latest-collections": string;
5+
"home__latest-collections--artist-name": string;
6+
"z-depth-0": string;
7+
"z-depth-1": string;
8+
"z-depth-1-half": string;
9+
"z-depth-2": string;
10+
"z-depth-3": string;
11+
"z-depth-4": string;
12+
"z-depth-5": string;
13+
};
14+
15+
export type ClassNames = keyof Styles;
16+
17+
declare const styles: Styles;
18+
19+
export default styles;

‎app/src/ui/svpervnder/home/Home.test.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { screen, render } from "tests";
2+
3+
import { Home } from "./Home";
4+
5+
describe("Home", () => {
6+
it("renders children correctly", () => {
7+
render(<Home>Home</Home>);
8+
9+
const element = screen.getByText("Home");
10+
11+
expect(element).toBeInTheDocument();
12+
});
13+
});

‎app/src/ui/svpervnder/home/Home.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import clsx from "clsx";
2+
3+
import { Typography } from "ui/typography/Typography";
4+
import { Grid } from "ui/grid/Grid";
5+
import { Button } from "ui/button/Button";
6+
7+
import { HomeProps } from "./Home.types";
8+
import styles from "./Home.module.scss";
9+
10+
export const Home: React.FC<HomeProps> = ({ children, className }) => (
11+
<div className={clsx(styles.home, className)}>
12+
<Grid.Container>
13+
<Grid.Row>
14+
<Grid.Col lg={6} sm={12} xs={12}>
15+
<section className={styles.home__hero}>
16+
<Typography.Headline1>Súper Únderground</Typography.Headline1>
17+
<Typography.TextLead>Artists, Collections & Events</Typography.TextLead>
18+
</section>
19+
</Grid.Col>
20+
<Grid.Col lg={6} sm={12} xs={12}>
21+
<div />
22+
</Grid.Col>
23+
</Grid.Row>
24+
</Grid.Container>
25+
<Grid.Container>
26+
<Grid.Row justify="end">
27+
<Grid.Col lg={8} sm={12} xs={12}>
28+
<div />
29+
</Grid.Col>
30+
<Grid.Col lg={4} sm={12} xs={12}>
31+
<div className={styles["home__latest-collections"]}>
32+
<Typography.Headline5>Latest Collection</Typography.Headline5>
33+
<Typography.Headline4 className={styles["home__latest-collections--artist-name"]}>
34+
larskristo: hellheads
35+
</Typography.Headline4>
36+
<Typography.Description>31/150 Sold</Typography.Description>
37+
<Typography.Text>
38+
Lars Kristoffer Hormander’s Hellheads is the latest from its #darkart creations. Featuring an astonishing
39+
150 items series of digital handcraft mastery. Own one of this limited art today.
40+
</Typography.Text>
41+
<Grid.Row>
42+
<Grid.Col>
43+
<Button color="secondary" size="s" variant="outlined">
44+
See Artist
45+
</Button>
46+
</Grid.Col>
47+
</Grid.Row>
48+
</div>
49+
</Grid.Col>
50+
</Grid.Row>
51+
</Grid.Container>
52+
</div>
53+
);

‎app/src/ui/svpervnder/home/Home.types.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { ReactNode } from "react";
2+
3+
export type HomeProps = {
4+
children?: ReactNode;
5+
className?: string;
6+
};

‎app/src/ui/typography/Typography.module.scss

+19
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,25 @@
22
@import "./variables";
33
@import "./mixins";
44

5+
@font-face {
6+
font-weight: 375;
7+
font-family: "PPNeueMachina";
8+
font-style: normal;
9+
src: url("/fonts/PPNeueMachina-InktrapRegular.otf");
10+
src: url("/fonts/PPNeueMachina-InktrapRegular.woff") format("woff"),
11+
url("/fonts/PPNeueMachina-InktrapRegular.woff2") format("woff2"),
12+
url("/fonts/PPNeueMachina-InktrapRegular.ttf") format("truetype");
13+
}
14+
@font-face {
15+
font-weight: 600;
16+
font-family: "PPNeueMachina";
17+
font-style: normal;
18+
src: url("/fonts/PPNeueMachina-InktrapSemibold.otf");
19+
src: url("/fonts/PPNeueMachina-InktrapSemibold.woff") format("woff"),
20+
url("/fonts/PPNeueMachina-InktrapSemibold.woff2") format("woff2"),
21+
url("/fonts/PPNeueMachina-InktrapSemibold.ttf") format("truetype");
22+
}
23+
524
.typography {
625
position: relative;
726

‎app/src/ui/typography/_mixins.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@mixin headline1 {
88
@include font-properties($typography-headline-1);
99
@include normalizeTypography;
10-
margin-bottom: $space-s;
10+
margin-bottom: $space-default;
1111
color: var(--color-typography-headline-1);
1212
}
1313
@mixin headline2 {
@@ -19,13 +19,13 @@
1919
@mixin headline3 {
2020
@include font-properties($typography-headline-3);
2121
@include normalizeTypography;
22-
margin-bottom: $space-s;
22+
margin-bottom: $space-default;
2323
color: var(--color-typography-headline-3);
2424
}
2525
@mixin headline4 {
2626
@include font-properties($typography-headline-4);
2727
@include normalizeTypography;
28-
margin-bottom: $space-s;
28+
margin-bottom: $space-default;
2929
color: var(--color-typography-headline-4);
3030

3131
[class^="icon-"],
@@ -37,14 +37,14 @@
3737
@include font-properties($typography-headline-5);
3838
@include normalizeTypography;
3939
margin-top: $space-default;
40-
margin-bottom: $space-xs;
40+
margin-bottom: $space-default;
4141
color: var(--color-typography-headline-5);
4242
}
4343
@mixin headline6 {
4444
@include font-properties($typography-headline-6);
4545
@include normalizeTypography;
4646
margin-top: $space-default;
47-
margin-bottom: $space-xs;
47+
margin-bottom: $space-default;
4848
color: var(--color-typography-headline-6);
4949
}
5050
@mixin text {
@@ -62,7 +62,7 @@
6262
@include font-properties($typography-text-lead);
6363
@include normalizeTypography;
6464
margin-bottom: $space-m;
65-
color: var(--color-typography-text);
65+
color: var(--color-typography-text-lead);
6666
}
6767
@mixin textBold {
6868
@include font-properties($typography-text-bold);
@@ -72,13 +72,13 @@
7272
@mixin subtitle {
7373
@include font-properties($typography-subtitle);
7474
@include normalizeTypography;
75-
margin-bottom: $space-xs;
75+
margin-bottom: $space-default;
7676
color: var(--color-typography-subtitle);
7777
}
7878
@mixin description {
7979
@include font-properties($typography-description);
8080
@include normalizeTypography;
81-
margin-bottom: $space-xs;
81+
margin-bottom: $space-default;
8282
color: var(--color-typography-description);
8383
}
8484
@mixin miniDescription {

‎app/src/ui/typography/_variables.scss

+22-23
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
1-
$font-family-display: "Figtree", "Manrope", "korolev", "quiche-sans", "desire-pro", "Helvetica Neue", "Helvetica", Arial,
2-
sans-serif !default;
3-
$font-family-text: "Figtree", "Manrope", "aglet-sans", "brother-1816", "houschka-pro", "input-mono-narrow",
4-
"Helvetica Neue", "Helvetica", Arial, sans-serif !default;
1+
$font-family-display: "PPNeueMachina", "Figtree", "Manrope", "korolev", "quiche-sans", "desire-pro", "Helvetica Neue",
2+
"Helvetica", Arial, sans-serif !default;
3+
$font-family-text: "PPNeueMachina", "Figtree", "Manrope", "aglet-sans", "brother-1816", "houschka-pro",
4+
"input-mono-narrow", "Helvetica Neue", "Helvetica", Arial, sans-serif !default;
55
$font-family-monospace: "GT America Mono" !default;
66
$font-family-base: $font-family-text !default;
7-
$font-size-base: 16 !default;
8-
$font-weight-regular: 400 !default;
9-
$font-weight-medium: 500 !default;
10-
$font-weight-bold: 700 !default;
11-
12-
$font-size-headline-1: rem-calc(31);
13-
$font-size-headline-2: rem-calc(24);
14-
$font-size-headline-3: rem-calc(21);
15-
$font-size-headline-4: rem-calc(18);
16-
$font-size-headline-5: rem-calc(16);
17-
$font-size-headline-6: rem-calc(14);
18-
$font-size-headline-7: rem-calc(12);
19-
$font-size-text: rem-calc(16);
20-
$font-size-input-label: rem-calc(13);
21-
$font-size-input-text: rem-calc(12);
22-
$font-size-text-lead: 1.25rem;
7+
$font-size-base: 14 !default;
8+
$font-weight-regular: 375 !default;
9+
$font-weight-medium: 600 !default;
10+
$font-weight-bold: 600 !default;
11+
12+
$font-size-headline-1: rem-calc(52);
13+
$font-size-headline-2: rem-calc(42);
14+
$font-size-headline-3: rem-calc(32);
15+
$font-size-headline-4: rem-calc(26);
16+
$font-size-headline-5: rem-calc(20);
17+
$font-size-headline-6: rem-calc(18);
18+
$font-size-text: rem-calc(14);
19+
$font-size-input-label: rem-calc(14);
20+
$font-size-input-text: rem-calc(14);
21+
$font-size-text-lead: rem-calc(18);
2322
$font-size-text-bold: $font-size-text;
2423
$font-size-subtitle: rem-calc(16);
2524
$font-size-subtitle-semi-bold: $font-size-subtitle;
@@ -32,7 +31,7 @@ $font-size-mini-description: rem-calc(11);
3231
$typography-headline-1: (
3332
font: (
3433
size: $font-size-headline-1,
35-
weight: $font-weight-bold,
34+
weight: $font-weight-regular,
3635
fontFamily: $font-family-display,
3736
lineHeight: 1.3,
3837
),
@@ -42,7 +41,7 @@ $typography-headline-2: (
4241
font: (
4342
size: $font-size-headline-2,
4443
fontFamily: $font-family-display,
45-
weight: $font-weight-bold,
44+
weight: $font-weight-regular,
4645
lineHeight: 1.4,
4746
),
4847
);
@@ -51,7 +50,7 @@ $typography-headline-3: (
5150
font: (
5251
size: $font-size-headline-3,
5352
fontFamily: $font-family-display,
54-
weight: $font-weight-bold,
53+
weight: $font-weight-regular,
5554
lineHeight: 1.4,
5655
),
5756
);

0 commit comments

Comments
 (0)