AstroCorporate Website

shoal-astro-theme — Astro Business Template

By formgong

Shoal is a free Astro business website template for real estate agents, featuring a full-screen photo hero, service tiles, area guides, and a contact form that actually sends.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews

Desktop homepage1 / 3

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-09View source

What stands out

A quick read of the recorded project description.

Homepage structure composed of a full-screen photo hero, six service photo tiles, an agent section, area guides, and short notes

Contact form actually sends: shows thank-you only when the backend returns success: true, displays an error on failure or network loss, and still submits without JavaScript

Brand information centralized in a single file, src/config.ts, including name, phone, office, service tiles, area guides, notes, and the form key

On scroll, headings and descriptions float up once, the header hides on scroll down and turns white on scroll up, and service tiles lift on hover with the title deepening; no animation library used

Uses native dialog for the form and menu, retains visible focus, and respects prefers-reduced-motion

Template Details

Shoal is a free Astro theme published by formgong, positioned as a real estate agent website. The homepage consists of a full-screen photo hero, six service photo tiles, an agent introduction, area guides, and short notes. The contact form actually sends via the Formgong backend; it only shows a thank-you message when the backend returns success: true, and displays an error on failure or network loss; it still works as a plain HTML form without JavaScript. The form can be opened from the header, a floating "Let's Connect" button, and various calls to action.

Content is centralized in a single file, src/config.ts, including name, phone, office, service tiles, island guides, notes, and the form key; longer pages are in src/pages/about.astro, buying.astro, selling.astro. public/img/ holds photos, which can be replaced with your own listing and area photos. The build output is a static site under dist/, deployable to any static host; before deployment, set url in src/config.ts so that canonical links, the sitemap, and form redirects point to your own domain.

The template includes sample content: a fictional agent, Dana Whitlock, a fictional Kestrel Sound island, phone numbers using the 555-01xx fictional range, and email and links using example.com. Photos are from Unsplash under the Unsplash license, which differs from the code's MIT license and cannot be resold separately; the code is MIT, allowing self-use or building sites for clients, with footer attribution optional. The README mentions Astro 7, but the dependency list has not been verified, so specific versions are not detailed here.

AstroCorporate Website

Is it right for your project?

Use Cases

Real estate agents building a personal brand website to showcase services, area guides, and contact information
Creating a static business site for a small real estate agency and integrating a form backend that actually sends
When no build step is needed, download shoal-html.zip from the release, replace the key and domain, and upload to any static space
Quickly clone the repository and complete the first deployment via Cloudflare or Vercel deploy buttons

Suitable For

Real estate agents or small real estate teams
Developers who want to build a static business website with Astro and pure CSS
Sites that need a form that actually sends and can submit without JavaScript
Users who accept using sample content and will replace photos and copy themselves

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Create a free form at formgong.com/new and obtain an access key starting with fk_, then write it to PUBLIC_FORMGONG_ACCESS_KEY in .env or formgong.accessKey in src/config.ts
2
Before deployment, set url in src/config.ts to your own domain to ensure canonical links, the sitemap, and form redirects are correct
3
On Vercel or Netlify, set PUBLIC_FORMGONG_ACCESS_KEY as a build environment variable; for the Cloudflare deploy button, store it as a Worker secret
4
When replacing photos in public/img/, keep the filenames or update the references in src/config.ts accordingly
5
Photos are under the Unsplash license, which differs from the code's MIT license; they cannot be resold separately, and usage must be checked against each license

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

Free use, modification, commercial use, and distribution of this version's code are permitted.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur additional charges.
Photos in the template are under the Unsplash license, which differs from the code's MIT license: they can be used for free but cannot be resold separately; replace them with your own listing and area photos.
The contact form relies on the external Formgong service; you need to create a free form at formgong.com/new and obtain an access key starting with fk_, otherwise the form cannot actually send.
The form access key is public by design and only allows visitors to send messages to your form; it should not be treated as a confidential credential.
When deploying on Vercel or Netlify, set PUBLIC_FORMGONG_ACCESS_KEY as a build environment variable because the key is read at build time.
When using the Cloudflare deploy button, the key is instead stored as a Worker secret, injected by worker.js on each page response.
Before deployment, set url in src/config.ts to your own domain, otherwise canonical links, the sitemap, and form redirects will not point to your domain.
The footer attribution "Theme Shoal by Formgong" is optional and not mandatory to retain.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

The photographs in `public/img/` are from [Unsplash](https://unsplash.com) and are under the [Unsplash License](https://unsplash.com/license), **not** the MIT licence of the code: free to use, but not to sell on their own.
Original README

Create a free form at https://formgong.com/new and copy its access key (`fk_…`).
Original README

The key is public by design: it only lets visitors send messages to your form.
Original README

On Vercel or Netlify, set `PUBLIC_FORMGONG_ACCESS_KEY` in the project's build environment variables: the key is read at build time.
Original README

The Deploy to Cloudflare button stores it as a Worker secret instead, and `worker.js` puts it into the form as each page is served.
Original README

Set `url` in `src/config.ts` first so canonical links, the sitemap and the form redirect point at your domain.
Original README

The "Theme Shoal by Formgong" credit in the footer is optional.
Original README

https://github.com/formgong/shoal-astro-theme/blob/main/LICENSE https://github.com/formgong/shoal-astro-theme/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-09. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 80 / 100
Technologies: Astro
Website type: Corporate Website

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2026-10-09
Screenshot last checked: 2026-10-09

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-09

Inspect the recorded source material

SHA-256: 157e504158e066b9fed04da385887c7a7c66a504af978b9503d451e3166fd205

2026-10-09T08:28:04.085Z

Source file / repository

# Shoal

A free Astro theme for real estate agents: a full-screen photo hero, six photo tiles for your services, an agent section, area guides, short notes and a contact form that really sends.

**Live demo:** https://shoal.formgong.com · **No build step?** Download `shoal-html.zip` from the [latest release](https://github.com/formgong/shoal-astro-theme/releases/latest): plain HTML files, replace `fk_your_access_key` and `https://example.com` with your own and upload them anywhere.

[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/formgong/shoal-astro-theme) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fformgong%2Fshoal-astro-theme&project-name=shoal&repository-name=shoal&env=PUBLIC_FORMGONG_ACCESS_KEY&envDescription=Your%20Formgong%20access%20key%20%28fk_...%29.%20Create%20a%20free%20form%20to%20get%20one.&envLink=https%3A%2F%2Fformgong.com%2Fnew%3Fname%3Dshoal)

Each button copies the theme to your GitHub, builds it and asks for one value: your Formgong access key (`fk_…`), free at https://formgong.com/new. The form works from the first deploy. Then set `url` in `src/config.ts` to your domain.

The demo agent is **Dana Whitlock**, a fictional realtor on the fictional Kestrel Sound islands. Everything on the site is sample content: phone numbers use the 555-01xx range reserved for fiction, and every email and link uses `example.com`.

- **One file to rebrand.** Name, phone, office, service tiles, island guides, notes and the form key live in `src/config.ts`.
- **Quiet motion.** Headings and captions rise into view once as you scroll, the header hides on the way down and comes back white on the way up, and the service tiles lift their title and darken on hover. No animation library.
- **A contact form that never fakes success.** It shows "Thank you" only when the form backend answers `success: true`. Errors and lost connections show an error. Without JavaScript it still works as a plain HTML form. It opens from the header, the floating "Let's Connect" button and every call to action.
- **Fast and accessible.** Static pages, two self-hosted fonts (Newsreader and Metropolis), one small script. Native `<dialog>` for the form and the menu, visible focus, `prefers-reduced-motion` respected.

Built with Astro 7 and plain CSS.

## Quick start

```bash
npm create astro@latest -- --template formgong/shoal-astro-theme
cd shoal
cp .env.example .env   # then put your access key in .env
npm run dev
```

## Set up the form

1. Create a free form at https://formgong.com/new and copy its access key (`fk_…`).
2. Put it in `.env` as `PUBLIC_FORMGONG_ACCESS_KEY=fk_…`, or in `src/config.ts` under `formgong.accessKey`.
3. Send one test message from your deployed site. It arrives in your Formgong inbox, on Telegram at once if you connect it, and by email.

The key is public by design: it only lets visitors send messages to your form. Spam is filtered with a hidden honeypot field.

## Edit the content

- `src/config.ts`: everything on the home page, the island guides (`areas`) and the notes (`notes`).
- `public/img/`: the photographs. Keep the file names or change them in `src/config.ts`.
- `src/pages/about.astro`, `buying.astro`, `selling.astro`: the longer pages.

## Deploy

`npm run build` produces a static site in `dist/` that any static host can serve. Set `url` in `src/config.ts` first so canonical links, the sitemap and the form redirect point at your domain. On Vercel or Netlify, set `PUBLIC_FORMGONG_ACCESS_KEY` in the project's build environment variables: the key is read at build time. The Deploy to Cloudflare button stores it as a Worker secret instead, and `worker.js` puts it into the form as each page is served.

## Photos

The photographs in `public/img/` are from [Unsplash](https://unsplash.com) and are under the [Unsplash License](https://unsplash.com/license), **not** the MIT licence of the code: free to use, but not to sell on their own. Replace them with photos of your own listings and area. Thank you to the photographers:

- `hero.webp`: [Daniel R.](https://unsplash.com/photos/boats-speeding-through-a-blue-ocean-with-islands-ZdbrRlQqPWc)
- `tile-kitchen.webp`: [Jennie Wilson](https://unsplash.com/photos/a-kitchen-with-a-center-island-and-two-stools-ItvZqtoDjgc)
- `tile-living.webp`: [Mahdis Mousavi](https://unsplash.com/photos/view-of-a-living-room-and-fireplace-inOX4reNle8)
- `tile-aerial.webp`: [Keymini](https://unsplash.com/photos/a-house-nestled-among-trees-beside-a-vibrant-blue-lake-SifYeCZHacM)
- `tile-porch.webp`: [Brian Lundquist](https://unsplash.com/photos/2-white-plastic-armchairs-on-brown-sand-during-daytime-eOZ39hS-wYk)
- `tile-dining.webp`: [Cindy Fogg](https://unsplash.com/photos/a-dining-room-with-a-table-and-chairs-aq83Sjs8snA)
- `tile-entry.webp`: [Clay Banks](https://unsplash.com/photos/wooden-bench-with-pillows-below-forest-artwork-ka3Gq_CYz-0)
- `area-harbor.webp`: [XIBEI JIA](https://unsplash.com/photos/white-and-blue-boat-on-sea-under-gray-sky-zZZOAreIhmw)
- `area-ferry.webp`: [Uta Scholl](https://unsplash.com/photos/green-and-white-ship-on-sea-under-gray-sky-during-daytime-fNkQB4MgHlI)
- `area-lighthouse.webp`: [Valentin](https://unsplash.com/photos/a-lighthouse-stands-proudly-overlooking-the-ocean-SVjNWsDKEBk)
- `area-meadow.webp`: [Bernd Dittrich](https://unsplash.com/photos/small-pink-flowers-bloom-on-a-cliff-overlooking-the-ocean-tyu80YcNVNY)
- `agent.webp`: [Jakub Żerdzicki](https://unsplash.com/photos/a-hand-holding-a-key-to-a-door-3HfGnyPfWqQ)
- `cta.webp`: [Roger Starnes Sr](https://unsplash.com/photos/white-house-with-front-porch-goydGbh4SgU)
- `blog-ferry.webp`: [Gantavya Bhatt](https://unsplash.com/photos/a-large-boat-traveling-across-a-large-body-of-water-ip-hoUuoihI)
- `blog-inspection.webp`: [Sasun Bughdaryan](https://unsplash.com/photos/magnifying-glass-over-a-wooden-house-model-HvmqfefQwYw)
- `blog-market.webp`: [engin akyurt](https://unsplash.com/photos/a-pile-of-red-apples-sitting-on-top-of-each-other-yiHeWtjXuas)

## License

The code is MIT. Use it for your own site or for clients. The photos are under the Unsplash License (see above). The "Theme Shoal by Formgong" credit in the footer is optional.

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

astrowind

AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.

Astro · Blog

astro-landing-page

An Astro + Tailwind CSS landing page example template with theme variables, dark mode, responsive layout, and Open Graph tags, under the MIT license, suitable as a starting point for single-page product, event, or corporate homepage sites.

Astro · Corporate Website

Tailcast

Tailcast is a dark-themed corporate website template built with Astro and Tailwind CSS for a fictional startup.

Astro · Corporate Website

Positivus

Positivus is an Astro and Tailwind CSS landing page theme for digital marketing agencies, maintained by manulthanura with a demo on Vercel.

Astro · Corporate Website

qwind

Qwind is a free and open-source website template built on Qwik and Tailwind CSS, featuring directory-based routing via QwikCity, a Markdown blog, dark mode, and static deployment configuration.

Astro · Tool Site

agency-landing-page-Astrojs

A single-page digital agency landing page template built with Astro and Tailwind CSS, featuring light and dark themes and a modular component directory. Suitable for static showcase pages, with MIT-licensed code and third-party assets requiring separate license verification.

Astro · Corporate Website