feat: implement hero section with responsive layout and tests

Fix some bugs

Author: attarchi

next.config.js

@@ -1,6 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'export',
   images: {
     unoptimized: true,
   },

package.json

@@ -14,6 +14,7 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.511.0",

public/avatar.png

@@ -11,12 +11,29 @@ import {
   Section,
   Heading,
   Text,
+  Hero,
 } from "@/components/ui";
 import { ThemeToggle } from '../components/ui/ThemeToggle'
 
 export default function Home() {
   return (
     <div className="min-h-screen bg-background text-text">
+      <Hero
+        title="Senior Full-Stack Developer"
+        description="Building modern web applications with React, Next.js, and TypeScript. Passionate about creating beautiful, performant, and accessible user experiences."
+        location="San Francisco, CA"
+        avatarSrc="/avatar.png"
+        avatarAlt="Profile picture"
+        ctaPrimary={{
+          text: "Contact Me",
+          link: "/contact",
+        }}
+        ctaSecondary={{
+          text: "View Work",
+          link: "/work",
+        }}
+      />
+
       <Section variant="surface" spacing="lg" className="border-b border-accent/20">
         <div className="container mx-auto flex justify-between items-center">
           <Heading as="h1" size="h2" className="text-accent">UI Component Showcase</Heading>

src/app/page.tsx

@@ -1,7 +1,8 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 import { Loader2 } from 'lucide-react';
-import React from 'react';
+import React, { forwardRef } from 'react';
+import { Slot } from "@radix-ui/react-slot";
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
@@ -36,12 +37,14 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   isLoading?: boolean;
+  asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, isLoading, children, ...props }, ref) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, isLoading, children, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
     return (
-      <button
+      <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         disabled={isLoading}
@@ -55,7 +58,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ) : (
           children
         )}
-      </button>
+      </Comp>
     );
   }
 );

src/components/ui/Button.tsx

@@ -0,0 +1,133 @@
+import { Button } from "./Button";
+import { Heading, Text } from "./Typography";
+import { Section } from "./Section";
+import { Badge } from "./Badge";
+import Link from "next/link";
+import Image from "next/image";
+
+interface HeroProps {
+  title: string;
+  description: string;
+  location?: string;
+  avatarSrc?: string;
+  avatarAlt?: string;
+  ctaPrimary?: {
+    text: string;
+    link: string;
+  };
+  ctaSecondary?: {
+    text: string;
+    link: string;
+  };
+  className?: string;
+}
+
+export function Hero({
+  title,
+  description,
+  location,
+  avatarSrc,
+  avatarAlt = "Profile picture",
+  ctaPrimary,
+  ctaSecondary,
+  className = "",
+}: HeroProps) {
+  return (
+    <Section
+      variant="surface"
+      spacing="xl"
+      className={`relative min-h-[calc(100vh-4rem)] flex items-center justify-center overflow-hidden ${className}`}
+    >
+      <div className="container mx-auto max-w-4xl text-center">
+        {avatarSrc && (
+          <div className="mb-8 relative w-32 h-32 mx-auto">
+            <Image
+              src={avatarSrc}
+              alt={avatarAlt}
+              fill
+              className="rounded-full object-cover border-4 border-accent"
+              priority
+            />
+          </div>
+        )}
+        
+        <Heading
+          as="h1"
+          size="h1"
+          className="mb-4 bg-gradient-to-r from-accent to-accent/80 bg-clip-text text-transparent"
+        >
+          {title}
+        </Heading>
+
+        {location && (
+          <Badge variant="secondary" className="mb-6">
+            {location}
+          </Badge>
+        )}
+
+        <Text size="xl" className="mb-8 text-muted max-w-2xl mx-auto">
+          {description}
+        </Text>
+
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          {ctaPrimary && (
+            <Button
+              asChild
+              size="lg"
+              className="inline-flex items-center gap-2"
+            >
+              <Link href={ctaPrimary.link}>
+                {ctaPrimary.text}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="m12 5 7 7-7 7" />
+                </svg>
+              </Link>
+            </Button>
+          )}
+
+          {ctaSecondary && (
+            <Button
+              asChild
+              variant="outline"
+              size="lg"
+            >
+              <Link href={ctaSecondary.link}>
+                {ctaSecondary.text}
+              </Link>
+            </Button>
+          )}
+        </div>
+
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
+          <svg
+            data-testid="scroll-indicator"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="text-accent"
+          >
+            <path d="M12 5v14" />
+            <path d="m19 12-7 7-7-7" />
+          </svg>
+        </div>
+      </div>
+    </Section>
+  );
+} 

src/components/ui/Hero.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils";
+import { VariantProps, cva } from "class-variance-authority";
+import { forwardRef } from "react";
+
+const textVariants = cva("", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+    },
+    variant: {
+      default: "text-text",
+      muted: "text-muted",
+      subtle: "text-subtle",
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+    },
+  },
+  defaultVariants: {
+    size: "base",
+    variant: "default",
+    weight: "normal",
+  },
+});
+
+interface TextProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    VariantProps<typeof textVariants> {}
+
+const Text = forwardRef<HTMLParagraphElement, TextProps>(
+  ({ className, size, variant, weight, ...props }, ref) => {
+    return (
+      <p
+        className={cn(textVariants({ size, variant, weight, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Text.displayName = "Text";
+
+export { Text, textVariants };