# Taskly > Taskly is best for task-management, project-planning and team-collaboration SaaS products that need pricing, integrations, solutions by team, a project template gallery and a help center. Canonical page: [https://getastrothemes.com/astro-themes/taskly/](https://getastrothemes.com/astro-themes/taskly/) - Categories: SaaS ## Best for - Task and project management app websites - Team collaboration and workspace tool websites - Productivity and planning app websites - Remote work and async communication tool websites ## Not intended for - Developer tools, APIs and cloud platforms - Teams that need product docs inside the site - Sites that need dark mode - Agencies and service companies ## Feature highlights - 3 homepages with a coded product dashboard, team chat and calendar - 30 inner page designs, including pricing, integrations, solutions, templates and status - 9 sections with 2 or 3 layouts, chosen in content files - Mega menu with nested flyouts, announcement bar and site search - English and French, with French removable - Static Astro output with Tailwind CSS ## Technology - Astro: 7.3.8 - Tailwind CSS: 4.3.3 ## Editions Choose one edition at checkout. Each is a separate one-time purchase on this page. - Astro. Content lives in Markdown files in your project. - Tina: $69. Edit content in the Tina editor. It saves to your Git repository. - Sanity: $69. Edit content in Sanity Studio. It lives in your own Sanity project. Live preview: [https://taskly-astro.pages.dev/](https://taskly-astro.pages.dev/) Taskly is an Astro theme for the marketing site of a task-management, project-planning or team-collaboration product. It is built with Astro and Tailwind CSS and covers the company site around the product, from three homepages with a coded product dashboard to pricing, integrations, solutions by team, a project template gallery, a help center, a status page and careers, in English and French. Your app, sign-in and billing stay in your own stack. Taskly gives you the pages that explain the product and send visitors to sign up or book a demo. ## By The Numbers - **3 Homepages** - **30 Inner Page Designs** - **47 Section Components** - **9 Sections With 2 Or 3 Layouts** - **6 Coded Product Mockups** - **2 Languages: English And French** ## Three Homepages Each homepage is a different composition of the same sections: - **Homepage 1** (`/`): a hero with the coded dashboard, logo strip, feature cards, integrations, product overview, reviews, pricing with a monthly and yearly switch, FAQ, a call to action, and a dark footer with the site name set large across the bottom. - **Homepage 2** (`/home-2/`): a split hero, a stats panel, solution tabs by team, proof points, the latest blog posts, and a cream footer that opens with a newsletter signup card. - **Homepage 3** (`/home-3/`): a hero with a sign-up form, alternating feature rows, scrolling review cards, an integrations cloud, and a footer of pastel cards that includes the latest changelog release. Inner pages use a fourth, standard dark footer. Any page can switch footers with one `footerLayout` value in its frontmatter (`default`, `wordmark`, `newsletter` or `tiles`). Keep the one that fits your product and remove the others, or reuse their sections on your own pages. ## Pages Included **Product** - Features page - Pricing page with a monthly and yearly toggle and a plan comparison table. Plans link to your sign-up or contact page; there is no billing integration. - Integrations directory and a detail page per integration (sample entries to replace) - Solutions overview and a page per team, such as product and engineering, marketing, operations and agencies - Project template gallery and a page per template, with a coded board, list, calendar or timeline preview **Company** - About page and reviews page - Careers with a page per role - Contact page and a request-a-demo page **Content and support** - Blog with author cards, categories, tags, pagination and RSS - Changelog with release pages, tags, pagination and RSS - Help center landing page with search, topic cards and popular articles that link to your docs - FAQ page - A system status page template with sample services, uptime bars and incidents. Edit it by hand or link to your status provider. **Account and legal** - Log in, sign-up and password reset page designs (UI only: connect them to your own auth) - Privacy, terms and cookie policy pages with placeholder text for your own legal review, and a 404 page in each language Plus a layout gallery (`/elements/`) that previews every layout of each section with several looks. ## What You Get - Full Astro source code, deploy configs for Netlify, Vercel and Cloudflare Pages, AI assistant instruction files, a changelog, and demo content in English and French. - Static output: no server or database needed to host it. - Demo images, logos, reviews, prices and text are samples to replace before launch. ## Not Included - Your app. The dashboard, chat and calendar are coded mockups with sample data, not a working product. - Sign-in, accounts and billing. The auth pages and pricing are page designs; there is no auth or checkout code. - Help articles or a documentation system. The help center links to your own docs. - A CMS. Content lives in files in your repository. - Live status data, and newsletter providers other than Mailchimp. - Dark mode. Taskly ships one light palette. - A Figma file. - Hosting, a domain or deployment. ## What You Can Build With Taskly **Task or project management app.** Start from `/`: the coded dashboard in the hero, feature cards, pricing with a plan comparison and the template gallery. Extra work: rename the sample projects and tasks in `dashboard-mockup.md` to match your product. **Team workspace or collaboration tool.** Start from `/home-2/`: solution tabs by team, the solutions pages, the integrations directory and the reviews page. Extra work: replace the sample integrations and team pages with the ones you support. **Productivity app with a free plan or trial.** Start from `/home-3/`: the sign-up form in the hero, feature rows, scrolling reviews and the sign-up page. Extra work: connect the forms to your own auth. **Agency or client work tool.** Use the agencies solution page, project templates and the request-a-demo page. Extra work: the templates are samples, so write your own boards and tasks. **Needs development for any of these:** sign-in and accounts, billing and checkout, help articles, live status data, and the app itself. Taskly is the marketing site in front of them. ## Change Layouts From Content Files 9 sections come in 2 or 3 layouts: hero, logo strip, integrations and FAQ (3 each); features, feature rows, why-us cards, reviews and pricing (2 each). The page header has 2 layouts too. Pick a layout with one `layout` value in the section's content file, or in a page's frontmatter block, with no code changes. This is how the third homepage sets its hero and reviews (`src/content/homepage/english/home-3.md`, other fields left out): ```yaml heroSection: layout: "signup" # default | split | signup testimonialsSection: layout: "marquee" # columns | marquee ``` Section files list their options and allowed values in comments, and `/elements/` previews each layout. ## Site Settings In One File Site identity, search, forms, cookie consent, the announcement bar, animation and languages are set in `src/config/config.toml`. For example (comments shortened): ```toml [settings.search] enable = true exclude = [] # path prefixes left out of the index [settings.announcementBar] enable = true # false removes the bar from every page ``` Set your site URL once in `config.toml`, and every canonical, sitemap and feed URL follows it. Colors, radii, breakpoints and the type scale are set in `src/styles/theme.css`. Menus are in `src/config/menu.en.json` and `menu.fr.json`. ## Design - Pastel palette: sun yellow for the main buttons, lilac for links and the featured plan, near-black ink for headings, warm cream for cards, and seven pastels (sun, lime, sky, lilac, orchid, mint and lemon) that content files pick by name. - Four footer layouts: dark, dark with a large wordmark, cream with a newsletter card, and white with pastel cards. - Bricolage Grotesque for headings, Figtree for body text, DM Mono for small labels, and an italic serif pill for one highlighted word in titles. - Coded product mockups: dashboard, team chat, calendar, conversation list, gauge and template previews, decorated with comment pins and annotation labels. ## Where Things Live ```text src/ config/ config.toml, menu.en.json, menu.fr.json, social.json, fonts.json, language.json content/ Markdown for every page, in english/ and french/ folders sections/ default content for each section widgets/ dashboard mockup data, cookie banner, announcement bar layouts/ page layouts, 47 section components, mockups and cards pages/[...lang]/ routes for both languages sections.schema.ts section fields and layout options styles/theme.css colors, radii, type scale and breakpoints ``` Page text, images, buttons, menus and section options live in Markdown, TOML and JSON files, not in components. A page can override any section's content through a named block in its frontmatter while the section keeps its shared defaults. ## Built-In Site Features - Site search (⌘K) powered by Pagefind, built with your site and covering both languages. - Mega menu with columns, a featured card and nested flyouts, which turns into an accordion on phones. - Announcement bar above the header that visitors can close. - SEO basics built in: canonical and Open Graph tags, a generated share image per page, a sitemap, `robots.txt` and RSS feeds. Set your site URL in `config.toml` first. - JSON-LD structured data for your organization, website, pages, blog posts, FAQ and job postings. Delete or replace the sample careers entries before launch so no sample job ads are published. - Hreflang tags for both languages. - Cookie consent banner: scripts you mark as analytics or marketing run only after the visitor accepts that category. - MDX shortcodes for posts: callouts, steps, tabs, code tabs, file trees, keyboard keys and more. - Respects the reduced-motion setting for animations and smooth scrolling. - Contact form that posts to Formsubmit, Formspree or Netlify Forms, chosen in `config.toml`. Newsletter forms connect to Mailchimp. - Generates llms.txt, llms-full.txt and a Markdown copy of each page, which some AI tools and coding agents can read. - A Copy page and Ask AI menu that opens ChatGPT, Claude, Perplexity or Grok with a link to the page. - `robots.txt` switches to allow or block AI search crawlers and AI training crawlers separately. - Optional IndexNow script that tells Bing and other participating search engines which pages changed. ## Customize With AI Coding Tools Taskly ships instruction files for AI coding tools: `AGENTS.md`, plus `CLAUDE.md` for Claude Code, `GEMINI.md` for Gemini CLI, rules for Cursor, GitHub Copilot and Windsurf, and `SKILLS.md` with step-by-step recipes (add a section or page, reorder the homepage, add a language, rebrand). What each tool reads on its own: - **Codex:** `AGENTS.md` - **Cursor:** `.cursor/rules/theme-architecture.mdc` and `AGENTS.md` - **Windsurf:** `.windsurf/rules/theme-architecture.md` and `AGENTS.md` - **GitHub Copilot:** `.github/copilot-instructions.md` and `AGENTS.md` - **Claude Code:** `CLAUDE.md`, which imports `AGENTS.md` - **Gemini CLI:** `GEMINI.md`, which imports `AGENTS.md` - **SKILLS.md:** no tool reads it on its own. Mention it in your request. Most changes are edits to Markdown, TOML and JSON files. Ask your assistant to update the English and French files. Some things stay with you: form and newsletter accounts, your domain and host, legal text, product facts and prices, logos and photos, and a final look at every page in the browser.