Merge pull request #23 from thedevdavid/feature/hero-minimal

Feature/hero minimal

Author: thedevdavid

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Copy button component
 - Scroll-aware table of contets
+- Minimal hero variant
 
 ### Changed
 

app/(site)/page.tsx

@@ -8,6 +8,7 @@ import { defaultAuthor } from "@/lib/metadata";
 import { cn } from "@/lib/utils";
 import CTA from "@/components/cta";
 import { HeroImage } from "@/components/hero-image";
+import { HeroMinimal } from "@/components/hero-minimal";
 import { HeroSimple } from "@/components/hero-simple";
 import { HeroVideo } from "@/components/hero-video";
 import { Sidebar } from "@/components/home-sidebar";

components/hero-minimal.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+
+import { defaultAuthor } from "@/lib/metadata";
+
+interface HeroProps {
+  title: string;
+  subtitle?: string;
+}
+
+export function HeroMinimal({ title, subtitle }: HeroProps) {
+  return (
+    <div className="container flex max-w-6xl flex-col items-start justify-center sm:py-2 md:py-6">
+      <Image
+        className="aspect-square h-10 w-10 rounded-full border border-black sm:hidden"
+        width={40}
+        height={40}
+        src="/avatar.png"
+        alt={defaultAuthor.name}
+      />
+      <h1 className="font-heading text-2xl font-bold leading-tight tracking-tight">{defaultAuthor.name}</h1>
+      <p className="text-muted-foreground">{defaultAuthor.jobTitle}</p>
+      <p className="my-2 text-muted-foreground">{title}</p>
+    </div>
+  );
+}