Files
HugoBlox-kit/templates/startup-landing-page/content/_index.md
T
George Cushen f584ad1610 fix(parse_block_v3): replace section_break mask-image with gradient overlay
The mask-image approach for section_break was wrong: making pixels
transparent reveals the body background, not the next sibling section
(which sits below in document flow, not behind in z-order). When the
body bg didn't match the adjacent section, this produced a visible
white/light strip between sections — exactly what the fade was
supposed to prevent.

Replace mask-image with absolutely-positioned gradient overlay divs at
the section's top/bottom edges. The overlay fades from transparent to
a user-specified colour matching the adjacent sibling's background.
Explicit colour declaration is required because Hugo can't reliably
auto-detect the next sibling's bg at parse time.

API change (no backward-compat — feature was added this session, no
sites depend on the legacy string form):

  # before
  section_break: fade-bottom

  # after
  section_break:
    fade_bottom: "#101828"   # CSS colour matching next section's bg
    fade_top:    "#0a0e27"   # optional, independent
    size:        "6rem"      # optional, default 6rem

Update the landing page hero (fade-bottom into dark logos band) and
cta-card (fade-top from white FAQ section above) to the new form.
2026-05-02 18:25:18 +01:00

14 KiB

title, date, type, sections
title date type sections
Home 2023-10-24 landing
block content design
hero
eyebrow title text primary_action secondary_action announcement trust
The open-source page builder Build your landing page with [Hugo Blox] Production-grade blocks. Edit in Markdown and YAML. Deploy anywhere — for free.
text url icon style
Get Started https://hugoblox.com/templates/ rocket-launch gradient
text url icon style
Read the docs https://docs.hugoblox.com book-open ghost
badge text link
text color
NEW primary
Hugo Blox v1 is here.
text url
Read more /blog/
stars text
5 Loved by **10,000+** developers · Trusted by teams at Google, OpenAI, NVIDIA
spacing css_class section_break background
padding margin
0
0
0
0
0
0
0
0
dark
fade_bottom
#101828
color gradient gradient_mesh
#0a0e27
type start end position shape size
radial rgba(124,58,237,0.45) transparent 50% -10% ellipse 80% 80%
enable style intensity animation colors orb_count positions sizes
true orbs medium pulse
primary-500/25
secondary-500/25
2
top-1/3 left-1/4
bottom-1/3 right-1/4
w-[32rem] h-[32rem]
w-[26rem] h-[26rem]
block content design
logos
title items
Trusted by teams at
icon name
brands/github GitHub
icon name
brands/google Google
icon name
brands/microsoft Microsoft
icon name
brands/nvidia NVIDIA
icon name
brands/openai OpenAI
icon name
brands/anthropic Anthropic
icon name
brands/stripe Stripe
icon name
brands/vercel Vercel
layout logo_style logo_size marquee_speed css_class spacing
marquee white md 35 dark bg-gray-900
padding
2rem
0
2rem
0
block content design
stats
items
statistic description
1M+ Websites built with Hugo Blox
statistic description
10k+ GitHub stars since 2016
statistic description
3k+ Discord community for support
layout numbers_gradient css_class spacing
minimal true bg-white dark:bg-gray-900
padding
3rem
0
3rem
0
block content design
steps
title text items
Get started in minutes No credit card required. Deploy to GitHub Pages in one click.
title text icon
Choose a template Pick from our library of production-ready templates — academic CV, startup landing page, research lab, and more. rectangle-stack
title text icon
Customise your content Edit in simple YAML and Markdown. No coding required — everything configured through intuitive parameters. pencil-square
title text icon
Deploy everywhere Push to GitHub and your site deploys automatically. Free hosting on GitHub Pages, Netlify, or Vercel. rocket-launch
layout marker_style connector
horizontal icon none
block id content design
features features
subtitle title text items
Why Hugo Blox Build sites in blocks, not code Production-grade page-building blocks. Edit in Markdown and YAML. Deploy anywhere.
name icon description
Swappable blocks rectangle-group Compose pages from a curated catalog of pre-designed sections — heroes, pricing, FAQs, comparison tables, testimonials, and more. Mix, match, and customise without touching the underlying HTML.
name icon description
Lightning fast bolt Sub-3-second builds and 100/100 Lighthouse scores by default — Tailwind CSS plus Hugo's native speed.
name icon description
No-code editing code-bracket Edit content in Markdown and configure with readable YAML. No JavaScript required.
name icon description
SEO out of the box magnifying-glass Automatic sitemaps, RSS feeds, JSON-LD, and rich metadata — SEO and syndication handled.
name icon description
Deploy anywhere rocket-launch Push to GitHub and deploy to Pages, Netlify, Vercel, or Cloudflare in minutes.
name icon description
Loved by the community star 10,000+ GitHub stars and 3,000+ Discord members. Rated 5-stars by the community.
layout css_class
bento bg-gray-50 dark:bg-gray-900/50
block id content design
comparison-table compare
subtitle title text competitors rows cta
How we compare Why teams switch to Hugo Blox We picked the categories that matter to teams shipping today.
name tagline highlight badge
Hugo Blox Open-source page builder true Recommended
name tagline
WordPress Self-hosted CMS
name tagline
Squarespace Hosted website builder
name tagline
Webflow Visual web builder
feature category
Performance true
feature note values
Build time 100 pages, cold cache
<3s
60s+
—
20s+
feature values
Lighthouse score
100
70
90
95
feature category
Cost & ownership true
feature values
Free tier
true
true
false
false
feature values
Self-hosted
true
true
false
false
feature values highlight
Source code access
true
true
false
false
true
feature values
Monthly cost
Free
$5+ hosting
$23/mo
$29/mo
feature category
Developer experience true
feature values
Git-based content
true
false
false
false
feature values
AI site builder
true
false
false
partial
feature values
Custom code
true
true
limited
limited
text url icon
Start free https://hugoblox.com/templates/ hero/arrow-right
row_striping css_class
true bg-gray-50 dark:bg-gray-900/50
block id content
pricing pricing
title subtitle billing_toggle tiers
Simple, transparent pricing Start for free. Upgrade when you're ready. No credit card required.
enabled monthly_label yearly_label yearly_discount
true Monthly Yearly Save 20%
name description price price_note highlight cta features
Starter Perfect for personal projects and portfolios.
monthly yearly currency
0 0 $
Free forever false
text url icon style
Get started free https://hugoblox.com/templates/ hero/arrow-right outline
text included
5 pages true
text included
1 GB storage true
text included
Custom domain false
text included
Analytics dashboard false
text included
Priority support false
name badge description price price_suffix price_note_monthly price_note_yearly highlight cta features
Pro Most popular For freelancers and teams building seriously.
monthly yearly currency
19 15 $
/month Billed monthly Billed annually true
text url icon style
Start free trial https://hugoblox.com/templates/ hero/arrow-right primary
text included
Unlimited pages true
text included
10 GB storage true
text included
Custom domain true
text included
Analytics dashboard true
text included
Priority support false
name description price price_suffix price_note_monthly price_note_yearly highlight cta features
Business Scale with confidence and dedicated support.
monthly yearly currency
49 39 $
/month Billed monthly Billed annually false
text url icon style
Start free trial https://hugoblox.com/templates/ hero/arrow-right outline
text included
Unlimited pages true
text included
100 GB storage true
text included
Custom domain true
text included
Analytics dashboard true
text included
Priority support true
block id content design
cta-image-paragraph solutions
items
title text feature_icon features image button
Build your future-proof website As easy as 1, 2, 3! check
Future-proof - edit your content in text files
Website is generated by a single app, Hugo
No JavaScript knowledge required
build-website.png
text url
Get Started https://hugoblox.com/templates/
title text feature_icon features image button
Large Community Join our large community on Discord - ask questions and get live responses bolt
Dedicated support channel
3,000+ users on Discord
Share your site and get feedback
coffee.jpg
text url
Join Discord https://discord.gg/z8wNYzb
css_class
bg-gray-100 dark:bg-gray-900
block content design
testimonials
title text items
name role image text
Hugo Smith Marketing Executive at X testimonial-1.jpg Awesome, so easy to use and saved me so much work with the swappable pre-designed sections!
spacing
padding
6rem
0
0
0
block id content
faq faq
title subtitle items
Frequently asked questions Everything you need to know before getting started.
question answer
Do I need to know how to code? No. Hugo Blox is designed for everyone — edit your site in plain Markdown and YAML. If you do know code, every block is open source and customisable down to the CSS.
question answer
Where is my site hosted? Anywhere you like. Hugo Blox builds a static site you can deploy to GitHub Pages, Netlify, Vercel, Cloudflare Pages, or any static host — many on a free tier.
question answer
Can I migrate from WordPress, Squarespace, or Webflow? Yes. Your content lives in Markdown files, so you own it and can move it freely. We provide migration guides for the most common platforms.
question answer
Is it really free? The framework, blocks, and starter templates are MIT-licensed and free forever. Premium templates and the AI site builder are optional paid upgrades that fund continued development.
question answer
Can I use my own domain? Yes — every host we recommend (GitHub Pages, Netlify, Vercel, Cloudflare) supports custom domains for free.
question answer
How does the AI site builder work? Describe what you want and the AI assembles a full site from our block catalog — copy, layout, theme, and content scaffolding included. Everything generated is yours to edit, version, and deploy.
block content design
cta-card
title text button
Ready to ship your site? Free, open source, and production-grade. Deploy your first site in minutes.
text url
Get Started Free https://hugoblox.com/templates/
section_break card
fade_top
#ffffff
css_class css_style
bg-gradient-to-br from-primary-500 via-primary-600 to-secondary-600 text-white shadow-2xl