import { ChevronRightIcon } from "@heroicons/react/20/solid"; import React, { FC } from "react"; // Customizable content configuration const content = { headingPrimary: "MOUNTAIN", headingHighlight: "WONDERER", 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 = { bgImage: "https://images.unsplash.com/photo-1547626740-02cb6aed9ef8?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", bgOverlay: "bg-black opacity-50", headingText: "text-6xl md:text-8xl font-extrabold text-white leading-tight tracking-tighter", highlightText: "inline-block text-gray-900 bg-white px-6 py-2 rounded-md", descriptionText: "text-xl text-gray-200 max-w-lg mx-auto lg:mx-0", buttonPrimary: "group px-8 py-4 bg-white text-gray-900 text-lg font-bold uppercase tracking-wider transition-all duration-300 ease-in-out hover:bg-gray-100 relative overflow-hidden", buttonSecondary: "px-8 py-4 bg-transparent text-white text-lg font-bold uppercase tracking-wider border-2 border-white transition-all duration-300 ease-in-out hover:bg-white hover:text-gray-900", }; interface HeadingProps { primary: string; highlight: string; theme: any; } const Heading: FC = ({ primary, highlight, theme }) => (

{primary}
{highlight}

); interface ButtonProps { label: string; theme: string; icon?: JSX.Element; } const Button: FC = ({ label, theme, icon }) => ( ); const MountaineeringHero: FC = () => (

{content.description}

); export default MountaineeringHero;

{primary} {highlight}

{primary}
{highlight}

Photography Components

Adventure Hero