It is the better fit when a technology business needs more than a single landing page — room for services, a real project portfolio, a team, pricing, and a blog, all polished across three different homepage styles and ready to grow from the same codebase.

By The Numbers

• AI-Ready (AGENTS.md, SKILLS.md, RULES)
• 03 Homepage Demos
• 13+ Inner Pages
• 29+ Prebuilt Sections
• Projects Portfolio (Masonry, Grid, Carousel)
• Blog Grid + Creative + Category + Tag + Pagination Layouts
• 3 Form Provider Integrations

AI-Ready, Built For Vibe Coding

Techlo ships with first-class AI coding support, so you can build and customize with AI assistants from day one instead of explaining the project to them first.

• AGENTS.md — the full project playbook: structure, section conventions, schema, styling, and verification rules that agents read before writing code.
• SKILLS.md — task-by-task recipes for the common jobs: add a section, add a page, add a language, rebrand the palette, configure forms.
• RULES/ — editor rules so each tool understands the theme out of the box: .cursor/rules/ for Cursor, .github/copilot-instructions.md for GitHub Copilot, and CLAUDE.md for Claude.

Point Cursor, Copilot, or Claude at the project and AI edits follow the theme’s real patterns — same components, schema, and design tokens — instead of fighting them.

Three Homepages For Three Kinds Of Tech Brand

Techlo ships three distinct homepage demos, so you can pick the entry point that matches your business instead of forcing one layout to do everything:

• Home 01 — the full IT solutions and services layout, built around services, projects, and a clear path to contact.
• Home 02 — a startup-focused variant that leads with the team and product delivery story.
• Home 03 — a darker, more agency-styled presentation for studios that want a bolder first impression.

Each one reuses the same sections and content files, so switching the lead style does not mean rebuilding the site.

A Full Page Set For A Technology Business

Techlo includes the pages an IT firm or software agency actually needs before launch:

• Home (01)
• Home Two (02)
• Home Three (03)
• About
• Services
• Service Single
• Projects (Masonry)
• Projects Grid
• Project Single
• Team
• Team Single
• Blog
• Blog Creative
• Blog Single
• Blog Category
• Blog Tag
• Pricing
• FAQ
• Testimonials
• Contact
• Components (style reference)
• Privacy Policy
• Terms & Conditions
• 404 Page

That mix makes Techlo useful for both a first launch and later expansion.

Built To Turn Capability Into Leads

Techlo is more than a design skin. The structure is set up for technology businesses that need to explain what they do, show proof, and convert.

It helps you:

• Present services clearly with index and single pages
• Show real work through a projects portfolio instead of stock screenshots
• Introduce the team and build credibility
• Answer objections on FAQ and pricing
• Run a blog next to service and project pages
• Push visitors to the contact form with clearer calls to action

A Real Projects Portfolio, Not Just Cards

This is where Techlo separates itself from most service themes. Projects are a first-class content collection with multiple layouts you control from frontmatter.

• Masonry, grid, and carousel layouts
• Overlay and masonry card styles
• 2, 3, or 4 column options
• Project detail pages with image galleries and an information block
• Paginated project archives

options:
  layout: "masonry" # masonry | grid | carousel
  cardStyle: "overlay" # overlay | masonry
  columns: 3 # 2 | 3 | 4
  limit: 6 # false | number

That makes Techlo a strong fit for studios and agencies whose work is the strongest sales argument.

Navigation That Can Carry A Larger Site

Techlo includes a navigation system designed for a site with services, projects, blog, and support pages.

• Mega menu and multi-level dropdown support
• Header offcanvas panel with social links and a call-to-action
• Navigation badges (for example, a “NEW” tag on Components)
• A configurable header navigation button
• Localized menu files per language
• Scroll-aware sticky header

{
  "name": "Projects",
  "hasChildren": true,
  "children": [
    { "name": "Masonry", "url": "/projects/" },
    { "name": "Grid", "url": "/projects/grid/" },
    { "name": "Single", "url": "/projects/custom-project-slug/" }
  ]
}

The menu is driven by JSON, so the navigation grows without touching header code.

Config That Saves Time During Build And Handoff

The main controls live in predictable files:

• src/config/config.toml
• src/config/menu.en.json
• src/config/menu.fr.json
• src/config/social.json
• src/config/fonts.json
• src/config/language.json

From config.toml you can control the sticky header, contact form provider, smooth scroll, animation behavior, multilingual settings, Mailchimp subscription, contact info, and SEO defaults — without digging through components.

[settings]
stickyHeader = true
contactFormProvider = "formsubmit.co"

[settings.navigationButton]
enable = true
url = "/contact/"

Motion And Interaction, Tuned From Config

Techlo ships with a modern motion layer that you tune from one place instead of editing scripts.

• Lenis smooth scrolling, with a reduced-motion safeguard
• A config-driven scroll reveal system (distance, blur, easing, threshold) — no extra animation library to wire up
• Animated number counters for stats
• Four button hover effects: text-flip, creative-fill, magnetic, and magnetic-text-flip
• Video modal and media zoom support

[settings.smoothScroll]
enable = true
respectReducedMotion = true
duration = 1.1
easing = "expo"

[settings.animation]
enable = true
distance = "2rem"
blur = "10px"
threshold = 0.14

Multilingual Without Rework

Techlo includes English and French structure in the source project, with matching content folders and menu files.

If you do not need the second language:

npm run remove-multilingual

If you need to generate it again later:

npm run generate-multilingual-content

This keeps the project flexible instead of locking you into one setup.

Content System For Real Publishing

Techlo is built for content, not just marketing copy.

• Markdown and MDX support
• Shiki syntax highlighting (WCAG-AA contrast theme)
• Optional table of contents
• Blog collections with grid and creative layouts, category and tag pages, and pagination
• Services and projects collections
• A Components page that documents the available markup and elements
• Frontmatter-based SEO control

[settings.markup.tableOfContents]
enable = true
expanded = false
startLevel = 1
endLevel = 5

That makes it useful for technical service pages, project write-ups, and long articles.

Contact And Lead Capture

Techlo supports three contact form providers out of the box:

• formsubmit.co
• formspree
• netlify

It also includes a Mailchimp subscription form in the footer. You can start with the fastest option now and switch providers later from config without rewriting the form layer.

SEO And Technical Basics

Techlo includes the technical groundwork a serious business site should have from day one.

• Sitemap and robots.txt generation
• Open Graph and Twitter card metadata
• JSON-LD structured data
• Canonical URL and per-page SEO overrides
• Language-aware routing
• Static page generation for fast, host-anywhere output

The Stack

Techlo is built on a current, low-maintenance stack:

• Astro 7 and Tailwind CSS 4
• Preline UI components (accordion, dropdown, tabs, tooltip, overlay, select)
• Lenis smooth scroll
• Lucide icons
• Generated local fonts via astro-font, defaulting to Sora

The brand palette is an electric blue with a lime accent, defined as theme tokens in src/styles/theme.css so a rebrand is a few variables, not a find-and-replace.

Why Developers Will Actually Like It

Techlo is easy to hand off.

• Config files for global settings
• JSON files for menus and social links
• Content collections for pages, services, projects, team, blog, and sections
• Separate language folders
• Scripts for favicons and multilingual cleanup or generation
• A documented sections.schema.ts so section options are discoverable

That means less time digging through random components and more time shipping client work.

AI-Assisted Coding Ready

Techlo ships with built-in instructions for AI coding assistants, so tools like Claude, OpenAI Codex, Cursor, GitHub Copilot, Gemini, and Windsurf understand the theme from the first prompt — its structure, content model, and conventions.

Instead of guessing, your assistant follows the same rules the theme is built on: where sections, content, and schemas live, which shared components to reuse, and how to stay on the design system.

• AGENTS.md — full project rules for any agent (also read natively by OpenAI Codex)
• CLAUDE.md — guidance for Claude and Claude Code
• GEMINI.md — guidance for the Gemini CLI
• SKILLS.md — step-by-step recipes for the jobs you do most (add a section or page, rebrand, manage languages, add an icon)
• .cursor/rules, .github/copilot-instructions.md, .windsurf/rules — editor rules for Cursor, GitHub Copilot, and Windsurf

The payoff: faster edits, fewer mistakes, and AI output that matches the theme instead of fighting it.

Final Take

Techlo is an Astro theme for IT firms and software agencies with a real technology-site structure behind it — three homepages, a proper projects portfolio, services, team, pricing, blog, and contact.

If you run a technology business and need a website that looks credible, shows your work, and moves visitors toward a project request — Techlo is the fastest way to get there.