Finish main page hero

src/components/common/Typography/index.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
 
 // v1 variants
@@ -25,7 +26,7 @@ function isStandardVariant(variant: V2Variant): variant is V2StandardVariant {
 // shared
 type Variant = V1Variant | V2Variant;
 
-type ComponentType = Heading | 'p' | 'span' | 'div' | 'a';
+type ComponentType = Heading | 'p' | 'span' | 'div';
 
 function isV1Variant(variant: Variant): variant is V1Variant {
   return HEADINGS.some(h => h === variant.split('/')[0]);
@@ -232,6 +233,21 @@ const variantToCSS = (variant: Variant): CSSProperties => {
 const Typography = (props: PropsWithChildren<TypographyProps>) => {
   const { variant, component, style, children, ...restProps } = props;
 
+  if (restProps.href) {
+    return (
+      <Link
+        href={restProps.href}
+        style={{
+          ...variantToCSS(variant),
+          ...style, // other styles can be customized via style prop
+        }}
+        {...restProps}
+      >
+        {children}
+      </Link>
+    );
+  }
+
   const Component = component || 'div';
 
   return (

src/components/home/Hero/index.tsx

@@ -45,21 +45,14 @@ const Hero = ({ firstName, points, checkin }: HeroProps) => {
         <div className={styles.header}>
           <Typography variant="display/light/medium" className={styles.heading} component="span">
             {'Welcome to ACM, '}
-            <Typography
-              variant="display/heavy/medium"
-              className={styles.heading}
-              component="a"
-              href={config.profileRoute}
-            >
-              {firstName}
-            </Typography>
+            <strong>
+              <Link href={config.profileRoute}>{firstName}</Link>
+            </strong>
             !
           </Typography>
           <Typography variant="h4/regular" component="span" className={styles.subheading}>
             {'You have '}
-            <Typography variant="h4/bold" component="span" className={styles.subheading}>
-              {points}
-            </Typography>
+            <strong>{points}</strong>
             {' membership points.'}
           </Typography>
         </div>

src/components/home/Hero/style.module.scss

@@ -1,9 +1,5 @@
 @use 'src/styles/vars.scss' as vars;
 
-.inline {
-  display: inline;
-}
-
 @media screen and (width <= vars.$breakpoint-md) {
   .subheading {
     font-size: 1rem !important;
@@ -37,8 +33,6 @@
       gap: 0.5rem;
 
       .heading {
-        display: inline;
-
         @media screen and (width <= vars.$breakpoint-md) {
           font-size: 2rem !important;
           line-height: 2.5rem !important;

src/components/home/Hero/style.module.scss.d.ts

@@ -8,7 +8,6 @@ export type Styles = {
   heading: string;
   hero: string;
   image: string;
-  inline: string;
   link: string;
   mobile: string;
   subheading: string;