🧑🏼‍🦯🎾 ↝ Adding some styling for a new & updated landing page

components/ui/Typography.tsx

@@ -0,0 +1,148 @@
+import { CSSProperties, forwardRef, ReactNode } from "react"
+
+import styles from "../../styles/ui/Typography.module.scss"
+
+interface TitleProps {
+    children?: ReactNode
+    className?: string
+    style?: CSSProperties
+    level?: 1 | 2 | 3 | 4 | 5
+}
+
+interface TextProps {
+    children?: ReactNode
+    className?: string
+    style?: CSSProperties
+    type?: "default" | "secondary" | "success" | "warning" | "danger"
+    mark?: boolean
+    code?: boolean
+    strong?: boolean
+    disabled?: boolean
+    underline?: boolean
+    strikethrough?: boolean
+    small?: boolean
+    weight?: number
+    lineHeight?: string
+    align?: "left" | "center" | "right" | "justify"
+}
+
+interface LinkProps {
+    children?: ReactNode
+    className?: string
+    style?: CSSProperties
+    target?: "_blank" | "_self" | "_parent" | "_top" | "framename"
+    href?: string
+    onClick?: any
+}
+
+interface TypographyProps {
+    children?: ReactNode
+    className?: string
+    style?: CSSProperties
+}
+
+function Title(props: TitleProps) {
+    const { children, className = "", style, level = 2 } = props
+
+    const HeadingTag = `h${level}` as keyof JSX.IntrinsicElements
+
+    return (
+        <HeadingTag
+            className={`${styles.title} ${styles[`h${level}`]} ${className}`}
+            style={style}
+        >
+            {children}
+        </HeadingTag>
+    )
+}
+
+function Text(props: TextProps) {
+    const {
+        children,
+        className = "",
+        style,
+        type = "default",
+        mark,
+        code,
+        strong,
+        disabled = false,
+        small = false,
+        underline = false,
+        strikethrough = false,
+        weight,
+        lineHeight
+    } = props
+
+    const Tag =
+        (mark && "mark") || (code && "code") || (strong && "strong") || "span"
+
+    return (
+        <Tag
+            style={{
+                ...(underline
+                    ? {
+                          borderBottom: "1px solid var(--color-n700)"
+                      }
+                    : {}),
+                ...(strikethrough
+                    ? {
+                          textDecoration: "line-through"
+                      }
+                    : {}),
+                ...(weight
+                    ? {
+                          fontWeight: weight
+                      }
+                    : {}),
+                ...(lineHeight
+                    ? {
+                          lineHeight: lineHeight
+                      }
+                    : {}),
+                ...style
+            }}
+            className={`${styles.text} ${styles[type]} ${
+                styles[Tag]
+            } ${className} ${small ? styles.small : ""} ${
+                disabled ? styles.disabled : ""
+            }`}
+        >
+            {children}
+        </Tag>
+    )
+}
+
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+    props,
+    ref
+) {
+    const { children, className, style, target, href, onClick } = props
+
+    return (
+        <a
+            onClick={onClick}
+            className={`${styles.link} ${className}`}
+            href={href}
+            target={target}
+            rel="noopener noreferrer"
+            style={style}
+            ref={ref}
+        >
+            {children}
+        </a>
+    )
+})
+
+export default function Typography(props: TypographyProps) {
+    const { children, className, style } = props
+
+    return (
+        <div style={style} className={`${styles.typography} ${className}`}>
+            {children}
+        </div>
+    )
+}
+
+Typography.Title = Title
+Typography.Text = Text
+Typography.Link = Link

pages/index.tsx

@@ -6,6 +6,13 @@ import CardForum from "../components/Content/DiscussCard";
 import { useRouter } from "next/router";
 import Login from "./login";
 
+import styles from '../styles/Landing.module.css';
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Star Sailors"
+}
+
 export default function Home() {
     const session = useSession();
     const supabase = useSupabaseClient();
@@ -36,6 +43,16 @@ export default function Home() {
     }
 
     return (
-      <Layout>Hello</Layout>
-    )
+      <div className="grid grid-cols-2 h-screen-navbar">
+        <div className="bg-teal border-r">
+          <div className="p-4">
+            <div className="mx-auto tablet:mx-0">
+              <div className="grid grid-cols-1 content-grid home-hero">
+                <h1 className="text-4xl font-bold">Test</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
 }

styles/Landing.module.scss

@@ -0,0 +1,113 @@
+.container {
+    min-width: 300px;
+    background: linear-gradient(90deg, #eaeaea 1px, transparent 1px) 1px 0, #fff;
+    background-size: calc(100% / 4) 1px;
+    background-position: center;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    padding: 3rem 5rem;
+
+    nav {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+    }
+
+    @media screen and (max-width: 550px) {
+        #logo {
+            display: none;
+        }
+
+        justify-content: center;
+    }
+}
+
+.hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 50px;
+    gap: 20px;
+
+    .cover {
+        width: 90%;
+        @media screen and (max-width: 550px) {
+            width: 120%;
+        }
+    }
+}
+
+.featureList {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 100px;
+    margin: 100px 0;
+}
+
+.feature {
+    display: flex;
+    gap: 50px;
+    max-width: 1100px;
+    width: 90%;
+    justify-content: center;
+    align-items: center;
+    min-height: 50px;
+
+    flex-direction: row;
+    text-align: left;
+
+    &.reverse {
+        flex-direction: row-reverse;
+        text-align: right;
+    }
+
+    @media screen and (max-width: 768px) {
+        max-width: 500px;
+        width: 100%;
+    }
+
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+}
+
+.featureImage {
+    width: 50%;
+    height: 300px;
+    background-color: #eeeeee;
+    background-size: cover;
+    background-position: left bottom;
+    flex-shrink: 0;
+    border: 15px solid #fff;
+    border-radius: 0.125rem;
+    box-shadow: 0px 0px 0px 1px #eaeaea;
+
+    @media screen and (max-width: 768px) {
+        width: 80%;
+    }
+}
+
+.featureDescription {
+    width: 50%;
+
+    @media screen and (max-width: 768px) {
+        width: 80%;
+    }
+}
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 200px;
+    height: 150px;
+    background-color: #eaeaea;
+}

styles/ui/Typography.module.scss

@@ -0,0 +1,85 @@
+.title {
+    color: var(--color-n900);
+    margin: 1rem 0;
+    font-weight: 700;
+    &.h1 { font-size: 3rem; }
+    &.h2 { font-size: 2.25rem; }
+    &.h3 { font-size: 1.75rem; }
+    &.h4 { font-size: 1.125rem; }
+    &.h5 { font-size: 1rem; }
+}
+
+.text {
+    font-size: 0.95rem;
+    line-height: 1.6rem;
+    text-align: left;
+
+    &.small {
+        font-size: 0.8rem;
+        line-height: 1.4rem;
+    }
+
+    &.default {
+        color: var(--color-n800);
+    }
+
+    &.secondary {
+        color: var(--color-n600);
+    }
+
+    &.success {
+        color: var(--color-green);
+    }
+
+    &.warning {
+        color: var(--color-yellow);
+    }
+
+    &.danger {
+        color: var(--color-red);
+    }
+
+    &.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    &.mark {
+        padding: 0;
+        background-color: rgb(251, 243, 219);
+    }
+
+    &.code {
+        padding: 0.2em 0.4em 0.1em;
+        background: hsla(0, 0%, 58.8%, 0.1);
+        border: 1px solid hsla(0, 0%, 39.2%, 0.2);
+        border-radius: 3px;
+        font-weight: 500;
+        font-family: "JetBrains Mono", monospace;
+    }
+
+    &.strong {
+        font-weight: 600;
+    }
+
+    &.span {
+        font-weight: 400;
+    }
+}
+
+.link {
+    font-size: 1rem;
+    line-height: 1.6rem;
+    color: var(--color-b400);
+    border-bottom: 1px solid var(--color-b200);
+
+    &:hover {
+        color: var(--color-b500);
+    }
+}
+
+.typography {
+    font-size: 1rem;
+    line-height: 1.6rem;
+    color: var(--color-n800);
+}