Skip to content

Commit

Permalink
feat(ui): Home. Installs fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
netpoe committed Apr 17, 2024
1 parent 7a309b0 commit 535f67d
Show file tree
Hide file tree
Showing 20 changed files with 173 additions and 38 deletions.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
4 changes: 2 additions & 2 deletions app/public/locales/en/head.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"head.og.description": "Chat with your files. Intelligent PDF file reader.",
"head.og.title": "AI File Agent"
"head.og.description": "Súper Únderground Artists, Collections & Events",
"head.og.title": "svpervnder"
}
3 changes: 3 additions & 0 deletions app/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Head from "next/head";

import { HomeLayout } from "layouts/home-layout/HomeLayout";
import { Home } from "ui/svpervnder/home/Home";

const Index: NextPage = () => {
const { t } = useTranslation("head");
Expand All @@ -17,6 +18,8 @@ const Index: NextPage = () => {
<meta property="og:description" content={t("head.og.description")} />
<meta property="og:url" content="https://fileagent.ai/" />
</Head>

<Home />
</HomeLayout>
);
};
Expand Down
2 changes: 1 addition & 1 deletion app/src/theme/globals.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ html {
@media (max-width: $mq-medium) {
font-size: 14px;
}
font-size: 16px;
font-size: 14px;
}

html,
Expand Down
9 changes: 5 additions & 4 deletions app/src/theme/variants/_svpervnder.scss
Original file line number Diff line number Diff line change
Expand Up @@ -95,16 +95,17 @@ body[data-theme="lease-721"] {
// Typography
--color-typography-headline-1: var(--color-white);
--color-typography-headline-2: var(--color-white);
--color-typography-headline-3: var(--color-white);
--color-typography-headline-4: var(--color-white);
--color-typography-headline-5: var(--color-white);
--color-typography-headline-3: var(--color-dark-4);
--color-typography-headline-4: var(--color-dark-4);
--color-typography-headline-5: var(--color-dark-4);
--color-typography-headline-6: var(--color-white);
--color-typography-text: var(--color-white);
--color-typography-text-lead: var(--color-dark-4);
--color-typography-text-bold: var(--color-white);
--color-typography-subtitle: var(--color-dark-5);
--color-typography-button-label: var(--color-white);
--color-typography-mini-button-label: var(--color-white);
--color-typography-description: var(--color-status-warning);
--color-typography-description: var(--color-dark-4);
--color-typography-mini-description: var(--color-dark-5);
--color-typography-link: var(--color-secondary-shade-mid);
--color-typography-link-hover: var(--color-secondary-shade-low);
Expand Down
22 changes: 22 additions & 0 deletions app/src/ui/svpervnder/home/Home.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
@import "src/theme/base";

.home {
display: block;

&__hero {
display: flex;
flex-direction: column;
justify-content: center;
height: 50vh;
text-align: left;
background-color: var(--color-background);
}

&__latest-collections {
text-align: right;

&--artist-name {
color: var(--color-primary);
}
}
}
19 changes: 19 additions & 0 deletions app/src/ui/svpervnder/home/Home.module.scss.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export type Styles = {
home: string;
home__hero: string;
"home__latest-collections": string;
"home__latest-collections--artist-name": string;
"z-depth-0": string;
"z-depth-1": string;
"z-depth-1-half": string;
"z-depth-2": string;
"z-depth-3": string;
"z-depth-4": string;
"z-depth-5": string;
};

export type ClassNames = keyof Styles;

declare const styles: Styles;

export default styles;
13 changes: 13 additions & 0 deletions app/src/ui/svpervnder/home/Home.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { screen, render } from "tests";

import { Home } from "./Home";

describe("Home", () => {
it("renders children correctly", () => {
render(<Home>Home</Home>);

const element = screen.getByText("Home");

expect(element).toBeInTheDocument();
});
});
53 changes: 53 additions & 0 deletions app/src/ui/svpervnder/home/Home.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import clsx from "clsx";

import { Typography } from "ui/typography/Typography";
import { Grid } from "ui/grid/Grid";
import { Button } from "ui/button/Button";

import { HomeProps } from "./Home.types";
import styles from "./Home.module.scss";

export const Home: React.FC<HomeProps> = ({ children, className }) => (
<div className={clsx(styles.home, className)}>
<Grid.Container>
<Grid.Row>
<Grid.Col lg={6} sm={12} xs={12}>
<section className={styles.home__hero}>
<Typography.Headline1>Súper Únderground</Typography.Headline1>
<Typography.TextLead>Artists, Collections & Events</Typography.TextLead>
</section>
</Grid.Col>
<Grid.Col lg={6} sm={12} xs={12}>
<div />
</Grid.Col>
</Grid.Row>
</Grid.Container>
<Grid.Container>
<Grid.Row justify="end">
<Grid.Col lg={8} sm={12} xs={12}>
<div />
</Grid.Col>
<Grid.Col lg={4} sm={12} xs={12}>
<div className={styles["home__latest-collections"]}>
<Typography.Headline5>Latest Collection</Typography.Headline5>
<Typography.Headline4 className={styles["home__latest-collections--artist-name"]}>
larskristo: hellheads
</Typography.Headline4>
<Typography.Description>31/150 Sold</Typography.Description>
<Typography.Text>
Lars Kristoffer Hormander’s Hellheads is the latest from its #darkart creations. Featuring an astonishing
150 items series of digital handcraft mastery. Own one of this limited art today.
</Typography.Text>
<Grid.Row>
<Grid.Col>
<Button color="secondary" size="s" variant="outlined">
See Artist
</Button>
</Grid.Col>
</Grid.Row>
</div>
</Grid.Col>
</Grid.Row>
</Grid.Container>
</div>
);
6 changes: 6 additions & 0 deletions app/src/ui/svpervnder/home/Home.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { ReactNode } from "react";

export type HomeProps = {
children?: ReactNode;
className?: string;
};
19 changes: 19 additions & 0 deletions app/src/ui/typography/Typography.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,25 @@
@import "./variables";
@import "./mixins";

@font-face {
font-weight: 375;
font-family: "PPNeueMachina";
font-style: normal;
src: url("/fonts/PPNeueMachina-InktrapRegular.otf");
src: url("/fonts/PPNeueMachina-InktrapRegular.woff") format("woff"),
url("/fonts/PPNeueMachina-InktrapRegular.woff2") format("woff2"),
url("/fonts/PPNeueMachina-InktrapRegular.ttf") format("truetype");
}
@font-face {
font-weight: 600;
font-family: "PPNeueMachina";
font-style: normal;
src: url("/fonts/PPNeueMachina-InktrapSemibold.otf");
src: url("/fonts/PPNeueMachina-InktrapSemibold.woff") format("woff"),
url("/fonts/PPNeueMachina-InktrapSemibold.woff2") format("woff2"),
url("/fonts/PPNeueMachina-InktrapSemibold.ttf") format("truetype");
}

.typography {
position: relative;

Expand Down
16 changes: 8 additions & 8 deletions app/src/ui/typography/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@mixin headline1 {
@include font-properties($typography-headline-1);
@include normalizeTypography;
margin-bottom: $space-s;
margin-bottom: $space-default;
color: var(--color-typography-headline-1);
}
@mixin headline2 {
Expand All @@ -19,13 +19,13 @@
@mixin headline3 {
@include font-properties($typography-headline-3);
@include normalizeTypography;
margin-bottom: $space-s;
margin-bottom: $space-default;
color: var(--color-typography-headline-3);
}
@mixin headline4 {
@include font-properties($typography-headline-4);
@include normalizeTypography;
margin-bottom: $space-s;
margin-bottom: $space-default;
color: var(--color-typography-headline-4);

[class^="icon-"],
Expand All @@ -37,14 +37,14 @@
@include font-properties($typography-headline-5);
@include normalizeTypography;
margin-top: $space-default;
margin-bottom: $space-xs;
margin-bottom: $space-default;
color: var(--color-typography-headline-5);
}
@mixin headline6 {
@include font-properties($typography-headline-6);
@include normalizeTypography;
margin-top: $space-default;
margin-bottom: $space-xs;
margin-bottom: $space-default;
color: var(--color-typography-headline-6);
}
@mixin text {
Expand All @@ -62,7 +62,7 @@
@include font-properties($typography-text-lead);
@include normalizeTypography;
margin-bottom: $space-m;
color: var(--color-typography-text);
color: var(--color-typography-text-lead);
}
@mixin textBold {
@include font-properties($typography-text-bold);
Expand All @@ -72,13 +72,13 @@
@mixin subtitle {
@include font-properties($typography-subtitle);
@include normalizeTypography;
margin-bottom: $space-xs;
margin-bottom: $space-default;
color: var(--color-typography-subtitle);
}
@mixin description {
@include font-properties($typography-description);
@include normalizeTypography;
margin-bottom: $space-xs;
margin-bottom: $space-default;
color: var(--color-typography-description);
}
@mixin miniDescription {
Expand Down
45 changes: 22 additions & 23 deletions app/src/ui/typography/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
$font-family-display: "Figtree", "Manrope", "korolev", "quiche-sans", "desire-pro", "Helvetica Neue", "Helvetica", Arial,
sans-serif !default;
$font-family-text: "Figtree", "Manrope", "aglet-sans", "brother-1816", "houschka-pro", "input-mono-narrow",
"Helvetica Neue", "Helvetica", Arial, sans-serif !default;
$font-family-display: "PPNeueMachina", "Figtree", "Manrope", "korolev", "quiche-sans", "desire-pro", "Helvetica Neue",
"Helvetica", Arial, sans-serif !default;
$font-family-text: "PPNeueMachina", "Figtree", "Manrope", "aglet-sans", "brother-1816", "houschka-pro",
"input-mono-narrow", "Helvetica Neue", "Helvetica", Arial, sans-serif !default;
$font-family-monospace: "GT America Mono" !default;
$font-family-base: $font-family-text !default;
$font-size-base: 16 !default;
$font-weight-regular: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 700 !default;

$font-size-headline-1: rem-calc(31);
$font-size-headline-2: rem-calc(24);
$font-size-headline-3: rem-calc(21);
$font-size-headline-4: rem-calc(18);
$font-size-headline-5: rem-calc(16);
$font-size-headline-6: rem-calc(14);
$font-size-headline-7: rem-calc(12);
$font-size-text: rem-calc(16);
$font-size-input-label: rem-calc(13);
$font-size-input-text: rem-calc(12);
$font-size-text-lead: 1.25rem;
$font-size-base: 14 !default;
$font-weight-regular: 375 !default;
$font-weight-medium: 600 !default;
$font-weight-bold: 600 !default;

$font-size-headline-1: rem-calc(52);
$font-size-headline-2: rem-calc(42);
$font-size-headline-3: rem-calc(32);
$font-size-headline-4: rem-calc(26);
$font-size-headline-5: rem-calc(20);
$font-size-headline-6: rem-calc(18);
$font-size-text: rem-calc(14);
$font-size-input-label: rem-calc(14);
$font-size-input-text: rem-calc(14);
$font-size-text-lead: rem-calc(18);
$font-size-text-bold: $font-size-text;
$font-size-subtitle: rem-calc(16);
$font-size-subtitle-semi-bold: $font-size-subtitle;
Expand All @@ -32,7 +31,7 @@ $font-size-mini-description: rem-calc(11);
$typography-headline-1: (
font: (
size: $font-size-headline-1,
weight: $font-weight-bold,
weight: $font-weight-regular,
fontFamily: $font-family-display,
lineHeight: 1.3,
),
Expand All @@ -42,7 +41,7 @@ $typography-headline-2: (
font: (
size: $font-size-headline-2,
fontFamily: $font-family-display,
weight: $font-weight-bold,
weight: $font-weight-regular,
lineHeight: 1.4,
),
);
Expand All @@ -51,7 +50,7 @@ $typography-headline-3: (
font: (
size: $font-size-headline-3,
fontFamily: $font-family-display,
weight: $font-weight-bold,
weight: $font-weight-regular,
lineHeight: 1.4,
),
);
Expand Down

0 comments on commit 535f67d

Please sign in to comment.