Hero Section Glass Web

auto

Installation

Usage

import { HeroSection } from "@/components/ruixen/hero-section-glass-web";
 
export default function App() {
  return (
    <HeroSection
      imageSrc="/hero-background.jpg"
      imageAlt="Hero background"
      kicker="Category: Experimental Design"
      title="Redefining Digital Experiences"
      description="Innovative solutions for modern challenges"
      primaryAction={{
        href: "/get-started",
        label: "Get Started",
      }}
      secondaryAction={{
        href: "/learn-more",
        label: "Learn More",
      }}
      coordinates="34°N 118°W\nLos Angeles, US"
      metaLeft="Established 2020"
      metaCenter="Award Winning"
      metaRight="Global Reach"
    />
  );
}

Props

Prop	Type	Default	Description
`imageSrc`	`string`	Required	Background image URL
`imageAlt`	`string`	`""`	Alt text for background image
`kicker`	`string`	`"Category: Experimental Design"`	Small text above title
`title`	`string`	Required	Main hero title
`description`	`string`	-	Optional description text
`primaryAction`	`Action`	-	Primary CTA button
`secondaryAction`	`Action`	-	Secondary CTA button
`coordinates`	`string`	-	Location coordinates (top-right)
`metaLeft`	`string`	-	Left metadata text (bottom)
`metaCenter`	`string`	-	Center metadata text (bottom)
`metaRight`	`string`	-	Right metadata text (bottom)
`className`	`string`	-	Additional CSS classes

Action Type

type Action = {
  href: string;
  label: string;
};

Features

Glassmorphism: Frosted glass effect on content overlay
Full-Screen Design: Minimum 92vh height for impact
Image Background: High-quality image with gradient overlays
Metadata Display: Coordinates and bottom metadata sections
Dual CTAs: Primary and secondary action buttons
Responsive Layout: Adapts to all screen sizes
Dark Theme: Optimized for dark backgrounds
Professional Typography: Clean, modern text hierarchy

Design Elements

Background Layers

Base Image: Full-screen background image with 90% opacity
Radial Gradient: Vignette effect from center
Linear Gradient: Left-to-right fade for depth
Glow Accent: Soft white glow on left side

Content Container

Glassmorphism: Semi-transparent white background
Backdrop Blur: Frosted glass effect
Border: Subtle white border
Shadow: Elevated appearance
Max Width: 640px for readability
Padding: Generous spacing for content

Typography Hierarchy

Kicker: Small, uppercase, tracking wide
Title: 4xl-6xl, bold, gradient text
Description: Large, muted color
Metadata: Extra small, tracking widest

Customization

Custom Background

<HeroSection
  imageSrc="https://images.unsplash.com/photo-..."
  imageAlt="Custom background"
  // ... other props
/>

Single CTA

<HeroSection
  primaryAction={{
    href: "/start",
    label: "Get Started Now",
  }}
  // No secondaryAction
/>

Without Metadata

<HeroSection
  imageSrc="/hero.jpg"
  title="Simple Hero"
  // No coordinates, metaLeft, metaCenter, metaRight
/>

Custom Gradient Text

// Modify the title gradient in your CSS
.bg-gradient-to-r {
  background: linear-gradient(to right, #60a5fa, #a78bfa);
}

Layout Sections

Top-Right Coordinates

Position: Absolute top-right
Format: Multi-line text (use \n)
Visibility: Hidden on mobile, shown on md+
Styling: Small, tracking wide, white/70

Bottom Metadata Bar

Layout: Three-column grid
Alignment: Left, center, right
Visibility: Hidden on mobile, shown on md+
Separator: Vertical lines between items

Use Cases

Landing Pages: Professional hero sections
Portfolio Sites: Showcase work with style
Product Launches: Announce new products
Agency Websites: Display services elegantly
Event Pages: Promote events with impact
Corporate Sites: Professional brand presence

Examples

Product Launch

<HeroSection
  imageSrc="/product-hero.jpg"
  kicker="New Release: 2024"
  title="Introducing Our Latest Innovation"
  description="Revolutionary features that change everything"
  primaryAction={{ href: "/buy", label: "Pre-Order Now" }}
  secondaryAction={{ href: "/specs", label: "View Specs" }}
  metaLeft="Ships Q1 2024"
  metaCenter="Limited Edition"
  metaRight="$999 MSRP"
/>

Agency Portfolio

<HeroSection
  imageSrc="/agency-work.jpg"
  kicker="Creative Studio"
  title="Crafting Digital Masterpieces"
  description="Award-winning design and development"
  primaryAction={{ href: "/contact", label: "Start Project" }}
  secondaryAction={{ href: "/portfolio", label: "View Work" }}
  coordinates="40°N 74°W\nNew York, US"
  metaLeft="Since 2015"
  metaCenter="100+ Projects"
  metaRight="Global Clients"
/>

Event Announcement

<HeroSection
  imageSrc="/conference-venue.jpg"
  kicker="Annual Conference 2024"
  title="Join Us for Three Days of Innovation"
  description="Connect with industry leaders and innovators"
  primaryAction={{ href: "/register", label: "Register Now" }}
  secondaryAction={{ href: "/agenda", label: "View Agenda" }}
  coordinates="37°N 122°W\nSan Francisco, US"
  metaLeft="June 15-17, 2024"
  metaCenter="500+ Attendees"
  metaRight="50+ Speakers"
/>

Performance

Image Optimization: Use optimized images (WebP, AVIF)
Lazy Loading: Consider lazy loading for images
Backdrop Filter: Hardware-accelerated blur
Minimal Reflows: Fixed positioning and transforms

Accessibility

Semantic HTML: Proper section and heading tags
Alt Text: Descriptive image alt attributes
Keyboard Navigation: All buttons keyboard accessible
Focus Indicators: Clear focus states
Color Contrast: High contrast text on backgrounds
ARIA Labels: Proper labeling for screen readers