# Techlo

> Techlo is best for IT solution providers and software agencies that need a portfolio-driven website with services, projects, team, pricing, and blog content across three ready-made homepage styles.

Canonical page: [https://getastrothemes.com/astro-themes/techlo/](https://getastrothemes.com/astro-themes/techlo/)

- Categories: Corporate, Agency

## Best for

- IT company and agency websites
- Software and product engineering studios
- Managed service and cybersecurity firms
- Portfolio-led technology service sites

## Not intended for

- Finance-only product brands
- One-page personal landing pages
- Ecommerce storefronts
- Pure documentation or docs-only sites

## Feature highlights

- AI-ready project files for Cursor, Copilot, and Claude
- Three homepage demos
- Projects portfolio with masonry, grid, and carousel layouts
- Services, team, and pricing pages
- Multilingual-ready, built on Astro 7
- AI-assisted coding ready

## Technology

- Astro: 7.1.3
- Tailwind CSS: 4.3.1

Live preview: [https://techlo-astro.pages.dev/](https://techlo-astro.pages.dev/)

It is the better fit when a technology business needs more than a single landing page: services, a real project portfolio, team pages, pricing, and a blog across three homepage styles.

## By The Numbers

- **AI-ready project files**
- **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 Project Files

Techlo includes project files that help AI coding assistants follow the theme's structure from day one.

- **`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 can follow the same components, schema, and design tokens.

## 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

```yaml
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

```json
{
  "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.

```toml
[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

```toml
[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:

```bash
npm run remove-multilingual
```

If you need to generate it again later:

```bash
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

```toml
[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 a simple setup 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 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 can read the theme's structure, content model, and conventions from the start.

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 result is simpler AI-assisted editing with fewer off-pattern changes.

## 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.

Choose Techlo if you run a technology business and need a site that looks credible, shows your work, and moves visitors toward a project request.