BioGenix — Biotech & Pharma
A premium Astro theme for biotech startups, pharma companies, and life science research labs. Immersive fluid backgrounds, scroll-driven storytelling, and 12 production-ready pages — all with zero JavaScript frameworks.
BioGenix is built for companies at the intersection of biology and technology. Whether you're a startup pitching investors, a pharma company showcasing your platform, or a research lab publishing findings — this theme handles every page a science-driven organization needs, without the generic SaaS look.
The design language draws from scientific aesthetics: dark organic backgrounds with fluid SVG gradients, monospace data labels, and a restrained green-on-warm-white palette. Every interaction is crafted to feel precise, credible, and unmistakably premium — not another template that looks like every other startup site.
What's included
Pages
- 12 production-ready pages: Home, Platform, Company, Team, Newsroom, Article, Careers, Contact, Privacy, Terms, 404
- Scroll-driven "What We Do" section with line-by-line text highlight and panel transitions
- Platform page with sticky scroll image + text swap showcase
- Careers page with open positions list and company culture section
- Newsroom with featured article layout + article detail pages
Design & Animation
- Immersive fluid gradient backgrounds — SVG feTurbulence + feDisplacementMap, zero JS, zero dependencies
- Word-by-word text reveal with pixel-block cover animation
- Dual pill navigation: transparent brand pill on hero, frosted nav pill on scroll, auto-hide on scroll-down
- Text roll-up hover on every nav and footer link
- Organic dual-color CTA buttons with arrow slide animation (reusable Button component)
- Giant footer brand text with fluid canvas background
- Full prefers-reduced-motion support — all animations gracefully degrade
SEO & Performance
- Static output — no server required, blazing fast on any host
- Auto-generated sitemap, robots.txt, canonical URLs
- Open Graph + Twitter Card metadata on every page
- JSON-LD structured data (Organization schema)
- Security headers via _headers (X-Frame-Options, CSP, HSTS, Permissions-Policy)
- Trailing slash routing — no 301 redirects
- Lazy-loaded images, system font stack (zero external font requests)
Developer Experience
- No-code editing — config.ts (brand, colors, nav, careers) + data.ts (all page content)
- CSS variables for all design tokens — change one value, update the entire site
- Scoped CSS per page + shared global.css — no Tailwind, no utility classes to learn
- Detailed DESIGN.md with animation SOP, button system, known pitfalls, and modification guide
- Zero npm dependencies beyond Astro + sitemap
Best used for
- Biotech startups pitching investors
- Pharma and therapeutics companies
- Life science research labs
- Diagnostic and precision medicine companies
- AgTech and synthetic biology firms
- Medical device companies
- University research groups
- Science-driven marketing sites
Deploy anywhere
Static output means zero config on any host. Run npm run build and deploy the dist/ folder to Cloudflare Pages, Vercel, Netlify, or GitHub Pages. No environment variables, no server, no database.