← 返回列表
block

Purple Hero

Hero Section with purple CTA button - Landing 页首屏 Hero,含标题、副标题、紫色 CTA 按钮。适用于产品介绍、活动页首屏。

"use client";

import React from "react";

export interface HeroSectionProps {
  title: string;
  subtitle?: string;
  ctaText?: string;
  ctaHref?: string;
}

export function HeroSection({
  title,
  subtitle = "Build something amazing with our platform",
  ctaText = "Get Started",
  ctaHref = "#",
}: HeroSectionProps) {
  return (
    <section className="py-24 px-6 text-center">
      <h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-6">
        {title}
      </h1>
      <p className="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
        {subtitle}
      </p>
      <a
        href={ctaHref}
        className="inline-flex items-center justify-center rounded-md bg-purple-600 px-8 py-3 text-sm font-medium text-white shadow hover:bg-purple-700"
      >
        {ctaText}
      </a>
    </section>
  );
}