跳到主要内容
返回画廊
PAID · 已付费

Cybersecurity Hero v2

Heroheropage_type: hero2026-05-16

PROMPT:

Build a dark, premium SaaS landing page hero section for a product called "Xero" — a data encryption service. Use React + TypeScript + Vite + Tailwind CSS + the shaders package (shaders/react) + lucide-react. Font: Inter (weights 300, 400, 500, 600, 700, 800) from Google Fonts.

PAGE STRUCTURE:

The page has a dark background (#0a0a0f) with 14px body padding. Everything is centered in a flex column. The structure is: Navbar > Hero Card > Brand Logos row.

NAVBAR:

  • Full-width, max-width 1600px, using CSS Grid with 3 columns: 1fr auto 1fr
  • Left: Logo text "Xero" — font-size 1.05rem, weight 700, letter-spacing -0.01em, white
  • Center: 3 navigation links ("Method", "Pricing", "Docs") — font-size 0.85rem, weight 400, color #8888a8, hover to white, 32px gap between links
  • Right: Two buttons — "Login" (ghost pill: rgba(255,255,255,0.06) background, 1px border rgba(255,255,255,0.08), white text, font-size 0.82rem, weight 500, border-radius 999px, padding 7px 18px) and "Sign Up" (solid white pill: white background, dark text #0a0a0f, font-size 0.82rem, weight 600, border-radius 999px, padding 7px 18px)
  • Mobile (768px): Hamburger menu toggle (2 spans that animate into an X via translateY/rotate). Full-screen overlay menu slides in from right with transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1). Links become 1.2rem centered vertically. Buttons become full-width stacked.

HERO CARD:

  • Container: max-width 1600px, border-radius 20px, 1px border rgba(255,255,255,0.07), overflow: hidden, position relative, background #0d0b12, padding 80px 40px 70px, flex column centered, min-height 640px, text-align center.

Layer 1 — Shader Background (z-index 0): Position absolute, inset 0, overflow hidden, border-radius 20px, pointer-events none, 100% width/height. Inner div and canvas forced to 100% width/height, position absolute inset 0.

Shader composition (from shaders/react):

<Shader>
  <SolidColor color="#08071a" />
  <SineWave amplitude={0.36} blendMode="normal-oklch" color="#0582e8" frequency={0.2} position={{ x: 0.65, y: 0.67 }} softness={0.55} speed={0.3} thickness={0.72} />
  <SineWave amplitude={0.17} blendMode="normal-oklch" color="#f00e94" frequency={0.2} position={{ x: 0.6, y: 0.51 }} softness={0.54} speed={0.5} thickness={0.35} />
  <WaveDistortion angle={299} frequency={0.3} speed={0.2} strength={1} />
  <FilmGrain strength={0.07} />
</Shader>

Layer 2 — Radial Gradient Arc (::before pseudo-element, z-index 0): A radial-gradient positioned at circle at 50% -70%:

  • Transparent from 0-60%
  • Gradually builds pink/magenta (rgba(176, 48, 136, ...)) from 63% to 79% with increasing opacity (0.03 to 0.82)
  • Transitions to lighter pink at 85-87% (rgba(210,70,175,0.92), rgba(240,110,210,0.88))
  • Near-white at 91-93% (rgba(255,205,250,0.92), rgba(255,240,255,0.98))
  • Pure white at 95%
  • Second radial gradient: circle at 50% 35%, rgba(120, 40, 180, 0.08) center, transparent at 50%

Layer 3 — Grid Overlay (z-index 0): Position absolute inset 0. Background: two linear-gradients creating a 40px grid with rgba(255,255,255,0.07) 1px lines. Masked with radial-gradient(circle at 50% -70%, transparent 60%, black 78%) so the grid only shows where the arc glows.

ICON PIPELINE (z-index 1, margin-bottom 52px):

A horizontal row of 3 icon nodes connected by lines, with an animated beam traveling between them.

  • Left node (46px circle, background #1a1a24): SVG layers/stack icon (polygon + 2 polylines). Neumorphic box-shadow. Dotted border ring (7px outset). Class node-light-right — has a ::before pseudo with a radial-gradient highlight on the right side that fades in/out (opacity transition 0.3s) when .active class is toggled.

  • Center node (64px circle, background #1e1e2c): Custom Xero "X" SVG logo (a circular pinwheel shape, white fill). Larger neumorphic shadows. Wrapped in a container with a .splash element — a 100px radial gradient circle (rgba(255, 77, 200, 0.6)) that animates scale 0.4 to 1.4 while fading out over 0.8s.

  • Right node (46px circle): Shield icon with checkmark. Class node-light-left — same as left but highlight on the left side with a purple tint (rgba(200, 100, 255, 0.5)).

  • Connecting lines: 160px wide, 1px height, gradient from rgba(255,255,255,0.15) to rgba(255,255,255,0.07) (reversed for right line).

  • Beam Animation (requestAnimationFrame loop):

    • SVG overlay with a linearGradient (#beam-gradient): 5-stop gradient from transparent pink to white center to transparent purple.
    • Two <path> elements use refs — one for glow (strokeWidth 2, filter blur, opacity 0.6) and one crisp (strokeWidth 0.8).
    • Path coordinates computed dynamically from node positions via getBoundingClientRect().
    • Animation states: p1 (800ms, beam travels 0-50%, left node pulses active at 0-40%), splash (800ms pause, beam hidden, center splash animates), p2 (800ms, beam travels 50-100%, right node activates at 60-100%), idle (1000ms pause). Loop repeats.
    • Beam position is controlled by shifting linearGradient x1/x2 attributes.

HERO CONTENT (z-index 1, max-width 620px):

  • Heading: <h1> with text "The simple way" (weight 300, white) and <strong> block "encryption your data" (weight 400, gradient text: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0.6)) with background-clip text). Font-size: clamp(2.4rem, 5.5vw, 4rem), line-height 1.1, letter-spacing -0.02em, margin-bottom 24px.

  • Subtitle: "Fully managed data encrypting service and annotation platform for teams of all industries." — font-size 0.9rem, weight 400, line-height 1.6, color rgba(255,255,255,0.4), max-width 440px, centered, margin-bottom 36px. Has a <br> after "annotation".

  • CTA Button: "Get Started" — white background, dark text, font-size 0.88rem, weight 600, padding 12px 32px, border-radius 999px. Hover: opacity 0.9, translateY(-1px).

BRAND LOGOS ROW (below hero card):

  • Flex row, centered, gap 64px, padding 32px 24px 10px, flex-wrap.
  • 5 brand items: Expedia, asana, zenefits, HubSpot (with a superscript dot replacing the "o"), loom.
  • Each: flex row, gap 10px, color rgba(255,255,255,0.35), font-size 1.1rem, weight 500.
  • Each has a simple 22px SVG icon in matching muted color (geometric/abstract representations, not actual brand logos).

CSS VARIABLES:

--bg: #0a0a0f
--surface: #111118
--text: #f0f0f5
--text-muted: #8888a8
--accent: #c8a0e0
--accent-pink: #b04090
--border: rgba(255, 255, 255, 0.08)

RESPONSIVE BREAKPOINTS:

  • 860px: Pipeline lines shrink to 80px
  • 768px: Body padding 10px, hamburger menu activates, hero card padding 60px 20px, pipeline margin-bottom 32px, nodes shrink (38px/52px), <br> tags hidden, brands gap 32px
  • 480px: Hero card border-radius 16px, brands gap 24px

DEPENDENCIES:

"shaders": "^2.5.124",
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"@supabase/supabase-js": "^2.57.4"

Tailwind CSS 3.4, Vite 5.4, TypeScript 5.5.

回到全部 177 条