small landing page fixes

trysupernova · Sep 8, 2023 · 74867ca · 74867ca
1 parent 8773b42
commit 74867ca
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/apps/www/app/download/page.tsx b/apps/www/app/download/page.tsx
@@ -6,6 +6,7 @@ import { Manrope } from "next/font/google";
 import { twMerge } from "tailwind-merge";
 import { Button } from "../../components/button";
 import { BsDownload } from "react-icons/bs";
+import { H2 } from "@/components/typography";
 
 const manrope = Manrope({ subsets: ["latin"] });
 
@@ -27,7 +28,7 @@ const DownloadPage = () => {
       </Link>
 
       <div className="flex flex-col items-center justify-center gap-3">
-        <h2 className="text-xl font-extrabold">Download</h2>
+        <H2>Download</H2>
         <hr className="w-4" />
         <div className="flex items-center gap-3">
           <Link href={darwinURL} target="_blank">

diff --git a/apps/www/app/page.tsx b/apps/www/app/page.tsx
@@ -57,7 +57,7 @@ export default function Home() {
       <Navbar />
       <div className="flex relative lg:flex-row flex-col gap-5 items-center justify-between pt-15">
         <div className="flex flex-col items-center justify-start gap-[5px]">
-          <H2 className="text-center">Your superhuman productivity sidekick</H2>
+          <H1 className="text-center">Your superhuman productivity sidekick</H1>
           <br />
           <Paragraph className="text-center max-w-sm">
             Supernova is a productivity app that helps you focus on what matters

diff --git a/apps/www/components/horizontal-logo.tsx b/apps/www/components/horizontal-logo.tsx
@@ -13,7 +13,14 @@ export const HorizontalLogo = () => {
         priority
         alt="Supernova's logo, a ball with linear gradient from left to right, light teal to orange"
       />
-      <H3>Supernova</H3>
+      <H3
+        className="text-shadow-whiteHalo"
+        style={{
+          textShadow: "0px 4px 10px rgba(255, 255, 255, 0.40)",
+        }}
+      >
+        Supernova
+      </H3>
     </div>
   );
 };

diff --git a/apps/www/components/typography.tsx b/apps/www/components/typography.tsx
@@ -1,35 +1,33 @@
 import { twMerge } from "tailwind-merge";
 import { manrope } from "./font";
 
-interface Props
+interface TypographyHeadingProps
   extends React.DetailedHTMLProps<
     React.HTMLAttributes<HTMLHeadingElement>,
     HTMLHeadingElement
   > {}
 
-export const H1 = (props: Props) => {
+export const H1 = (props: TypographyHeadingProps) => {
   return (
     <h1
+      {...props}
       className={twMerge(
-        "text-white text-5xl tracking-[-0.576px]",
+        "text-white text-4xl tracking-[-0.576px]",
         props.className,
         manrope.className
       )}
-      style={{
-        textShadow: "0px 4px 10px rgba(255, 255, 255, 0.40)",
-        ...props.style,
-      }}
     >
       {props.children}
     </h1>
   );
 };
 
-export const H2 = (props: Props) => {
+export const H2 = (props: TypographyHeadingProps) => {
   return (
     <h2
+      {...props}
       className={twMerge(
-        "text-white text-4xl tracking-[-0.576px]",
+        "text-white text-3xl tracking-[-0.576px]",
         props.className,
         manrope.className
       )}
@@ -39,17 +37,18 @@ export const H2 = (props: Props) => {
   );
 };
 
-export const H3 = (props: Props) => {
+export const H3 = (props: TypographyHeadingProps) => {
   return (
-    <h2
+    <h3
+      {...props}
       className={twMerge(
         "text-white text-2xl tracking-[-0.576px]",
         props.className,
         manrope.className
       )}
     >
       {props.children}
-    </h2>
+    </h3>
   );
 };
 
@@ -60,7 +59,7 @@ export const Paragraph = (
   >
 ) => {
   return (
-    <p className={twMerge("text-base text-white", props.className)}>
+    <p {...props} className={twMerge("text-base text-white", props.className)}>
       {props.children}
     </p>
   );