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

Stellar Launch

Landing Pageheropage_type: landing2026-05-13

Build a Launchex Awards landing page using React + Vite + Tailwind CSS + TypeScript + lucide-react. The page has 3 sections plus persistent overlay navigation elements. Use the fonts "Inter" (body) and "TT Firs Neue" (display headings). The entire page lives inside a white container with 20px padding (p-3 on mobile, p-5 on desktop) creating an inset card effect with large rounded corners (28px mobile, 36px desktop). The scrollable content lives in an absolutely-positioned div inside this container with hidden scrollbars.

FONTS

Load via <link> in index.html:

  • Google Fonts Inter: weights 300, 400, 500, 600, 700
  • TT Firs Neue from: https://db.onlinewebfonts.com/c/69f2576e7ca287875bf8d089130e292c?family=TT+Firs+Neue

In CSS define:

html, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #ffffff;
}
.font-firs {
  font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif;
}
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

COLOR PALETTE

  • Primary dark: #154359
  • Teal accent: #066377
  • Light background: #F0F0F0 (nominations section)
  • Lighter background: #F0F5F7 (about section)
  • Gradient text: linear-gradient(294deg, #185B7B 20%, #4BBDF0)
  • Nomination stroke: rgba(6, 99, 119, 0.25)

OUTER SHELL STRUCTURE

div.h-screen.bg-white.p-3.sm:p-5
  div.relative.w-full.h-full.overflow-hidden.rounded-[28px].sm:rounded-[36px].bg-white
    div.absolute.inset-0.overflow-y-auto.overflow-x-hidden.no-scrollbar
      [SECTIONS GO HERE]
    [NAV BAR - absolute positioned]
    [BOTTOM OVERLAYS - absolute positioned]

SECTION 1: HERO

  • Full viewport height: min-height: calc(100vh - 40px)
  • Background: autoplaying, looping, muted video filling the section with object-cover
    • Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_151648_2bdfbd1c-6bde-4f5d-a967-f57cbced97f6.mp4
  • Overlay gradient on the video: bg-gradient-to-b from-black/10 via-transparent to-black/20

Top bar (z-20): flex row, justify-between, px-4 sm:px-10, pt-5 sm:pt-8

  • Left: Logo using lucide-react Sparkles icon (w-5 h-5 sm:w-6 sm:h-6, strokeWidth 1.5) + text "launchex" (14px sm:15px, font-semibold, tracking-tight) and "awards" below (10px sm:11px, font-light, opacity-90, -mt-0.5). All white.
  • Right: CTA button "Send in your entry form" (hidden on mobile, shows "Enter" on mobile). Teal background #066377, white text, 10px sm:11px, uppercase, tracking-[0.14em], font-medium. Has a chamfered/clipped shape using clipPath: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px). Includes ArrowUpRight icon (w-3.5 h-3.5) that moves on hover (translate-x-0.5, -translate-y-0.5). Button has hover:brightness-125 transition.

Center content (z-10): flex-col, items-center, text-center, color #154359, pt-32 sm:pt-40, pb-24

  • Eyebrow: "Prize for ventures" - 11px sm:12px, uppercase, tracking-[0.3em], font-medium, mb-6, opacity-90
  • Heading: "launchex prizes" (two lines with <br/>), using .font-firs, font-normal, tracking-[-0.04em], leading-[0.9], sizes: 48px / 76px / 100px / 120px (responsive breakpoints)
  • Subtext: "Bridging visions with reality, helping ventures soar up to the stars" - 12px sm:14px, uppercase, tracking-[0.22em], font-medium, max-w-md, leading-[1.8], opacity-90, mt-8

SECTION 2: SUBMISSIONS (NOMINATIONS)

  • Background: #F0F0F0
  • Padding: py-20 sm:py-28, px-6 sm:px-10
  • Overflow hidden, relative positioning

Layout: 3-column on large (left nominations | center video | right nominations), stacked on mobile (center first, then left, then right). max-w-5xl, mx-auto, gap-10 lg:gap-12.

Center column:

  • Header text: "[submissions]" (12px, tracking-[0.24em], uppercase) and "submissions" below (font-firs, 44px sm:54px, font-semibold, tracking-tight, uppercase). Color #154359.
  • Video below (mt-6 sm:mt-8): 220px/380px/460px square (responsive), object-cover
    • URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260514_154120_b89bfedd-530d-4ebb-9eb7-42eeafe08667.mp4
    • autoPlay, loop, muted, playsInline

Left nominations (3 cards), pushed down with lg:mt-36:

  1. "Lead" / "AI venture for commerce"
  2. "Emerging innovations" / "in food commerce"
  3. "The finest innovations" / "for learners and young students"

Right nominations (3 cards), pushed down with lg:mt-36:

  1. "Innovations for advanced" / "career training"
  2. "The finest innovations" / "in finance"
  3. "Categories" / "coming soon"

NominationCard component:

  • <a> tag, max-w-[20em], h-[5em], hover:-translate-y-0.5 transition
  • Contains an SVG with a chamfered rectangle (polygon points="14,0 100,0 100,86 86,100 0,100 0,14") as border - stroke rgba(6, 99, 119, 0.25), strokeWidth 1, vectorEffect non-scaling-stroke, fill none, preserveAspectRatio="none", viewBox="0 0 100 100"
  • Text centered inside: title in 13px font-semibold, subtitle in 12px font-normal opacity-80. Color #154359.

Bottom fade gradient (pointer-events-none, absolute, bottom-0, full width, h-40 sm:h-56, z-10):

  • linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)

SECTION 3: ABOUT THE FOUNDERS

  • Background: #F0F5F7
  • Padding: py-20 sm:py-28, px-6 sm:px-10
  • max-w-7xl mx-auto

Top row: flex-col on mobile, flex-row on lg. Color #154359.

  • Left: Heading "About the founders" (two lines) - font-firs, 36px/48px/54px, font-semibold, uppercase, tracking-tight, leading-[0.95]
  • Right: max-w-xl column
    • Two paragraphs (17px sm:18px, leading-[1.5]):
      • "Launchex.Hub is a platform that is part of a portfolio of companies Launchex, for sourcing and showcasing groundbreaking innovations."
      • "Launchex.Hub's mission is to offer every local-language innovator the chance to reshape our world with their pioneering creation."
    • Link "Launchex.Hub website" with arrow icon (mt-6, 14px, font-medium). Arrow in a chamfered 32x32 box with border in #154359, clipPath polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px). Hover: -translate-y-0.5. Links to https://base.launchex.vc/

Stats grid (mt-14): 1 col / 2 col md / 3 col lg, gap-5. Three cards:

Card 1: "7+ years" / "Launchex has served the market, guiding ventures and their journeys"

  • Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154203_6c6f94dc-a07e-4ba5-8688-106f01ccd2c8.png&w=1280&q=85
  • No vertical offset
  • clipPath: polygon(64px 0, calc(100% - 14px) 0, calc(100% - 4px) 4px, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px), 0 64px)
  • Text position: left-6 right-6 bottom-6

Card 2: "15000+" / "innovation ventures moved through the Launchex pipeline"

  • Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154151_45c62c60-3bcc-4f21-8f9d-03722ebb5df8.png&w=1280&q=85
  • Offset: lg:mt-24 (pushed down on desktop)
  • clipPath: polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 64px 100%, 0 calc(100% - 64px))
  • Text position: left-6 bottom-20

Card 3: "120+" / "accelerator sessions delivered by Launchex across Eastern Europe"

  • Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_152238_24ec8db4-d728-4739-bb30-e985533e9637.png&w=1280&q=85
  • No vertical offset
  • clipPath: polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 64px), calc(100% - 64px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px))
  • Text position: left-6 right-28 bottom-6

Each stat card structure:

  • Outer div: w-full, h-[280px] sm:h-[340px], backgroundColor rgba(255, 255, 255, 0.8), padding 1.5px (acts as border), clipPath applied
  • Inner div: w-full h-full, overflow-hidden, background-image set to the image URL, bg-cover bg-center, same clipPath applied, mixBlendMode: 'plus-darker'
  • Text overlay (absolute positioned): value in font-firs, font-semibold, uppercase, 36px sm:52px, gradient text (linear-gradient(294deg, #185B7B 20%, #4BBDF0) with background-clip text, color transparent). Description in 14px, leading-[1.4], color #154359, mt-3. Max-width 66%.

Bottom fade gradient (same as section 2):

  • linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)

PERSISTENT OVERLAY ELEMENTS (inside the outer rounded container, outside the scrollable area)

Top navigation bar:

  • Hidden on mobile (hidden md:flex), absolute, top-0, centered horizontally (left-1/2 -translate-x-1/2), z-40
  • White background, border-bottom-left-radius and border-bottom-right-radius: 28px
  • Padding: px-6 lg:px-10, py-4, gap-6 lg:gap-10
  • Links: "About", "Submissions", "Venue", "Judges", "Connect" - 11px, uppercase, tracking-[0.14em], font-medium, text-neutral-800, hover:text-neutral-500
  • Two decorative <span> elements on left (-left-6) and right (-right-6) that create inverted rounded corners using radial-gradient masks:
    • Left: radial-gradient(circle at 0 100%, transparent 24px, black 25px)
    • Right: radial-gradient(circle at 100% 100%, transparent 24px, black 25px)

Bottom-right page indicator:

  • pointer-events-none, absolute, bottom-4 sm:bottom-6, right-4 sm:right-8, z-40
  • "01" [line] "05" - flex, gap-3, text-white/80, 10px, font-medium, uppercase, tracking-[0.18em], mix-blend-difference
  • Line is a span: w-8 h-px bg-white/40

Bottom-left scroll indicator:

  • pointer-events-none, absolute, bottom-4 sm:bottom-6, left-4 sm:left-8, z-40
  • "Scroll to discover" - text-white/80, 10px, font-medium, uppercase, tracking-[0.18em], mix-blend-difference

KEY IMPLEMENTATION DETAILS

  • All clip-paths use the polygon() function with pixel-based chamfers creating angular/geometric cut corners
  • The page is fully responsive with sm/md/lg breakpoints
  • Videos use autoPlay, loop, muted, playsInline attributes
  • Use lucide-react for Sparkles and ArrowUpRight icons only
  • The stat card images use mix-blend-mode: plus-darker for a deeper tonal effect
  • No scrollbar is visible (custom CSS utility)
  • All transitions are subtle: translate, color changes, brightness
  • The outer container clips all content with its rounded corners - the scroll happens inside
回到全部 177 条