fix: restore original PageHeader with props-based API

- Restored original props-based API (heading, description, actions, announcement)
- Added border-grid border-b-[0.5px] back to section
- Restored hero.tsx to use TwoButtons component
- Kept subcomponent exports for backward compatibility

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: abdout

src/components/atom/page-header.tsx

@@ -1,21 +1,75 @@
 import { cn } from "@/lib/utils"
 import React from "react"
 
-function PageHeader({
+interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  heading?: string | React.ReactNode
+  description?: string | React.ReactNode
+  actions?: React.ReactNode
+  announcement?: React.ReactNode
+  headingClassName?: string
+  descriptionClassName?: string
+  actionsClassName?: string
+  announcementClassName?: string
+}
+
+export function PageHeader({
   className,
+  heading,
+  description,
+  actions,
+  announcement,
+  headingClassName,
+  descriptionClassName,
+  actionsClassName,
+  announcementClassName,
   children,
   ...props
-}: React.ComponentProps<"section">) {
+}: PageHeaderProps) {
   return (
-    <section className={cn(className)} {...props}>
+    <section className={cn("border-grid border-b-[0.5px]", className)} {...props}>
       <div className="flex flex-col items-start gap-1 py-8 md:py-10 lg:py-12">
+        {announcement && (
+          <div className={cn(announcementClassName)}>
+            {announcement}
+          </div>
+        )}
+        {heading && (
+          <h2
+            className={cn(
+              headingClassName
+            )}
+          >
+            {heading}
+          </h2>
+        )}
+        {description && (
+          <p
+            className={cn(
+              "max-w-2xl text-balance text-base font-light text-foreground leading-7 sm:text-lg ",
+              descriptionClassName
+            )}
+          >
+            {description}
+          </p>
+        )}
+        {actions && (
+          <div
+            className={cn(
+              "flex w-full items-center justify-start gap-2 pt-2",
+              actionsClassName
+            )}
+          >
+            {actions}
+          </div>
+        )}
         {children}
       </div>
     </section>
   )
 }
 
-function PageHeaderHeading({
+// Subcomponents for composition-based usage (backward compatibility)
+export function PageHeaderHeading({
   className,
   ...props
 }: React.ComponentProps<"h1">) {
@@ -30,7 +84,7 @@ function PageHeaderHeading({
   )
 }
 
-function PageHeaderDescription({
+export function PageHeaderDescription({
   className,
   ...props
 }: React.ComponentProps<"p">) {
@@ -45,7 +99,7 @@ function PageHeaderDescription({
   )
 }
 
-function PageActions({ className, ...props }: React.ComponentProps<"div">) {
+export function PageActions({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       className={cn(
@@ -56,5 +110,3 @@ function PageActions({ className, ...props }: React.ComponentProps<"div">) {
     />
   )
 }
-
-export { PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading }

src/components/root/hero.tsx

@@ -1,49 +1,28 @@
-import Link from "next/link"
-import { Plus } from "lucide-react"
-
-import { Announcement } from "@/components/atom/announcement"
-import {
-  PageHeader,
-  PageHeaderHeading,
-  PageHeaderDescription,
-  PageActions,
-} from "@/components/atom/page-header"
-import { Button } from "@/components/ui/button"
-import type { getDictionary } from "@/components/local/dictionaries"
-import type { Locale } from "@/components/local/config"
-
-const title = "The Foundation for your Design System"
-const description =
-  "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
+import { PageHeader } from '@/components/atom/page-header';
+import { Announcement } from '@/components/atom/announcement';
+import { TwoButtons } from '@/components/atom/two-buttons';
+import type { getDictionary } from '@/components/local/dictionaries';
+import type { Locale } from '@/components/local/config';
 
 interface HeroProps {
-  dictionary: Awaited<ReturnType<typeof getDictionary>>
-  params: { lang: Locale }
+  dictionary: Awaited<ReturnType<typeof getDictionary>>;
+  params: { lang: Locale };
 }
 
 export default function Hero({ dictionary, params }: HeroProps) {
-  return (
-    <PageHeader>
-      <Announcement dictionary={dictionary} />
-      <PageHeaderHeading className="max-w-4xl">
-        {dictionary.homepage?.heading || title}
-      </PageHeaderHeading>
-      <PageHeaderDescription>
-        {dictionary.homepage?.description || description}
-      </PageHeaderDescription>
-      <PageActions>
-        <Button asChild size="sm" className="h-[31px] rounded-lg">
-          <Link href={`/${params.lang}/docs`}>
-            <Plus className="size-4" />
-            {dictionary.actions?.newProject || "New Project"}
-          </Link>
-        </Button>
-        <Button asChild size="sm" variant="ghost" className="rounded-lg">
-          <Link href={`/${params.lang}/docs/components`}>
-            {dictionary.actions?.viewComponents || "View Components"}
-          </Link>
-        </Button>
-      </PageActions>
-    </PageHeader>
-  )
+    return (
+        <PageHeader
+            announcement={<Announcement dictionary={dictionary} />}
+            heading={dictionary.homepage?.heading || "Build your code library"}
+            description={dictionary.homepage?.description || "A set of beautifully-designed, blazing-fast code. Works with your favorite frameworks. Open Source. Open Code."}
+            actions={
+                <TwoButtons
+                    primaryLabel={dictionary.actions?.getStarted || "Get Started"}
+                    primaryHref={`/${params.lang}/docs`}
+                    secondaryLabel={dictionary.actions?.documentation || "Documentation"}
+                    secondaryHref={`/${params.lang}/docs`}
+                />
+            }
+        />
+    );
 }