diff --git a/app/public/fonts/PPNeueMachina-InktrapRegular.otf b/app/public/fonts/PPNeueMachina-InktrapRegular.otf new file mode 100644 index 00000000..d45a16e4 Binary files /dev/null and b/app/public/fonts/PPNeueMachina-InktrapRegular.otf differ diff --git a/app/public/fonts/PPNeueMachina-InktrapRegular.ttf b/app/public/fonts/PPNeueMachina-InktrapRegular.ttf new file mode 100644 index 00000000..5498da9b Binary files /dev/null and b/app/public/fonts/PPNeueMachina-InktrapRegular.ttf differ diff --git a/app/public/fonts/PPNeueMachina-InktrapRegular.woff b/app/public/fonts/PPNeueMachina-InktrapRegular.woff new file mode 100644 index 00000000..b08c2e5d Binary files /dev/null and b/app/public/fonts/PPNeueMachina-InktrapRegular.woff differ diff --git a/app/public/fonts/PPNeueMachina-InktrapRegular.woff2 b/app/public/fonts/PPNeueMachina-InktrapRegular.woff2 new file mode 100644 index 00000000..cbbbcbb4 Binary files /dev/null and b/app/public/fonts/PPNeueMachina-InktrapRegular.woff2 differ diff --git a/app/public/fonts/PPNeueMachina-InktrapSemibold.otf b/app/public/fonts/PPNeueMachina-InktrapSemibold.otf new file mode 100644 index 00000000..341c1581 Binary files /dev/null and b/app/public/fonts/PPNeueMachina-InktrapSemibold.otf differ diff --git a/app/public/fonts/PPNeueMachina-InktrapSemibold.ttf b/app/public/fonts/PPNeueMachina-InktrapSemibold.ttf new file mode 100644 index 00000000..6f2bc3c6 Binary files /dev/null and b/app/public/fonts/PPNeueMachina-InktrapSemibold.ttf differ diff --git a/app/public/fonts/PPNeueMachina-InktrapSemibold.woff b/app/public/fonts/PPNeueMachina-InktrapSemibold.woff new file mode 100644 index 00000000..c5dc10db Binary files /dev/null and b/app/public/fonts/PPNeueMachina-InktrapSemibold.woff differ diff --git a/app/public/fonts/PPNeueMachina-InktrapSemibold.woff2 b/app/public/fonts/PPNeueMachina-InktrapSemibold.woff2 new file mode 100644 index 00000000..553759ef Binary files /dev/null and b/app/public/fonts/PPNeueMachina-InktrapSemibold.woff2 differ diff --git a/app/public/locales/en/head.json b/app/public/locales/en/head.json index 37842636..178c7bd6 100644 --- a/app/public/locales/en/head.json +++ b/app/public/locales/en/head.json @@ -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" } diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx index 9b0fee42..b34986d1 100644 --- a/app/src/pages/index.tsx +++ b/app/src/pages/index.tsx @@ -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"); @@ -17,6 +18,8 @@ const Index: NextPage = () => { + + ); }; diff --git a/app/src/theme/globals.scss b/app/src/theme/globals.scss index f2018e2d..99e5db14 100644 --- a/app/src/theme/globals.scss +++ b/app/src/theme/globals.scss @@ -8,7 +8,7 @@ html { @media (max-width: $mq-medium) { font-size: 14px; } - font-size: 16px; + font-size: 14px; } html, diff --git a/app/src/theme/variants/_svpervnder.scss b/app/src/theme/variants/_svpervnder.scss index 8a03c17f..6bf5f5d4 100644 --- a/app/src/theme/variants/_svpervnder.scss +++ b/app/src/theme/variants/_svpervnder.scss @@ -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); diff --git a/app/src/ui/svpervnder/home/Home.module.scss b/app/src/ui/svpervnder/home/Home.module.scss new file mode 100644 index 00000000..91f5d76f --- /dev/null +++ b/app/src/ui/svpervnder/home/Home.module.scss @@ -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); + } + } +} diff --git a/app/src/ui/svpervnder/home/Home.module.scss.d.ts b/app/src/ui/svpervnder/home/Home.module.scss.d.ts new file mode 100644 index 00000000..6592f49f --- /dev/null +++ b/app/src/ui/svpervnder/home/Home.module.scss.d.ts @@ -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; diff --git a/app/src/ui/svpervnder/home/Home.test.tsx b/app/src/ui/svpervnder/home/Home.test.tsx new file mode 100644 index 00000000..362f2d91 --- /dev/null +++ b/app/src/ui/svpervnder/home/Home.test.tsx @@ -0,0 +1,13 @@ +import { screen, render } from "tests"; + +import { Home } from "./Home"; + +describe("Home", () => { + it("renders children correctly", () => { + render(Home); + + const element = screen.getByText("Home"); + + expect(element).toBeInTheDocument(); + }); +}); diff --git a/app/src/ui/svpervnder/home/Home.tsx b/app/src/ui/svpervnder/home/Home.tsx new file mode 100644 index 00000000..77802067 --- /dev/null +++ b/app/src/ui/svpervnder/home/Home.tsx @@ -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 = ({ children, className }) => ( +
+ + + +
+ Súper Únderground + Artists, Collections & Events +
+ + +
+ + + + + + +
+ + +
+ Latest Collection + + larskristo: hellheads + + 31/150 Sold + + 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. + + + + + + +
+ + + +
+); diff --git a/app/src/ui/svpervnder/home/Home.types.ts b/app/src/ui/svpervnder/home/Home.types.ts new file mode 100644 index 00000000..66d356e6 --- /dev/null +++ b/app/src/ui/svpervnder/home/Home.types.ts @@ -0,0 +1,6 @@ +import { ReactNode } from "react"; + +export type HomeProps = { + children?: ReactNode; + className?: string; +}; diff --git a/app/src/ui/typography/Typography.module.scss b/app/src/ui/typography/Typography.module.scss index 24aa70e6..e07053c7 100644 --- a/app/src/ui/typography/Typography.module.scss +++ b/app/src/ui/typography/Typography.module.scss @@ -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; diff --git a/app/src/ui/typography/_mixins.scss b/app/src/ui/typography/_mixins.scss index 26b02853..d879870d 100644 --- a/app/src/ui/typography/_mixins.scss +++ b/app/src/ui/typography/_mixins.scss @@ -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 { @@ -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-"], @@ -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 { @@ -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); @@ -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 { diff --git a/app/src/ui/typography/_variables.scss b/app/src/ui/typography/_variables.scss index e2cadb28..0b3ffd54 100644 --- a/app/src/ui/typography/_variables.scss +++ b/app/src/ui/typography/_variables.scss @@ -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; @@ -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, ), @@ -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, ), ); @@ -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, ), );