import React from "react"; // Customizable text content const content = { primaryHeading: "Topography", secondaryHeading: "Section", description: "Conquer the peaks with our top-of-the-line mountaineering gear. Designed for adventurers who push the limits.", buttonPrimary: "Explore Gear", buttonSecondary: "Our Legacy", }; // Customizable theme configuration const theme = { gradientDirection: "to-br", // Gradient direction for backgrounds and text bgGradientFrom: "from-gray-950", bgGradientTo: "to-gray-900", highlightTextFrom: "from-yellow-400", highlightTextTo: "to-orange-500", buttonGradientFrom: "from-yellow-500", buttonGradientTo: "to-orange-600", border: "border-gray-800/30", hoverBorder: "hover:border-yellow-500/50", iconBg: "bg-orange-900/30", iconColor: "text-orange-400", }; // Header component const Header: React.FC = () => (

{content.primaryHeading.toUpperCase()}
{content.secondaryHeading.toUpperCase()}

); // Description component const Description: React.FC = () => (

{content.description}

); const ChevronRight: React.FC<{ className?: string }> = ({ className = '' }) => ( ); // Button component interface ButtonProps { label: string; primary?: boolean; } const Button: React.FC = ({ label, primary }) => { const baseStyle = "px-8 py-4 text-lg font-bold uppercase rounded-xl tracking-wider transition-all duration-300 ease-in-out"; const primaryStyle = "border border-[#929aac] bg-gray-800 text-white hover:bg-gray-700"; const secondaryStyle = "bg-gray-800 text-gray-200 border-[#929aac] hover:bg-gray-800 hover:text-white"; return ( ); }; const TopographyHero: React.FC = () => { return (

); }; export default TopographyHero; const TopographyPattern = (props: any) => (

);

{content.primaryHeading.toUpperCase()} {content.secondaryHeading.toUpperCase()}

{content.primaryHeading.toUpperCase()}
{content.secondaryHeading.toUpperCase()}

Pattern Components

Topography Hero