Documentation | Awake Agency

Package Versions Package Structure Quick Start Project Configuration

Package Versions

v5.17.1

Astro

v19.2.4

React

v4.2.1

Tailwind CSS

v5.x

TypeScript

Awake is a modern agency landing page template built with Astro 5, React 19, and Tailwind CSS v4.

This theme is ready to use and fully customizable to fit your brand and requirements.

To customize, you should have knowledge of Astro, React, Tailwind CSS v4, and TypeScript.

Docs Menu

Package Structure

Below is the complete folder structure of the Awake Astro template.

awake-astro/

public/— Static assets served as-is
- favicon.ico
- favicon.svg
- images/— All image assets
  - logo/— Light & dark mode logos
  - home/— Homepage section images
  - documentation/— Doc page icons
src/
- components/— All UI components
  - auth/— Sign In, Sign Up, Forgot Password
  - contact-form/
  - documentation/— Documentation page components
  - home/— Homepage section components
    - achievements/
    - brand/
    - creative-mind/
    - customer-stories/
    - faq/
    - hero/
    - innovation/
    - online-presence/
    - solution/
    - subscription/
    - web-result/
  - layout/
    - header/— Sticky header, nav, theme toggle
    - footer/
  - scroll-to-top/
  - shared/
  - ui/— Reusable UI primitives (button, sheet, etc.)
- layouts/
  - Layout.astro— Root layout with <head>, header, footer
- lib/— Utility helpers
- pages/— File-based routing — each file = a route
  - index.astro— Home page (/)
  - 404.astro— Custom 404 page
  - contact/— Contact page (/contact)
  - documentation/— Docs page (/documentation)
  - signin/— Sign In page (/signin)
  - signup/— Sign Up page (/signup)
  - forgot-password/— Forgot password page
  - privacy-policy/
  - terms-and-conditions/
  - api/— Astro API routes
    - layout-data.ts— Header nav & footer data
    - page-data.ts— All homepage section data
- styles/
  - globals.css— Tailwind v4 @theme tokens, base styles
astro.config.mjs— Astro configuration (output, adapter, integrations)
tsconfig.json— TypeScript config with path alias @/*
package.json

Quick Start

1. Requirements

Before proceeding, make sure you have the latest stable Node.js installed.

Recommended environment:

Node.js v20.3.0 or later (v18.17.1 minimum — v19 not supported)
npm v10+ / yarn v1.22+ / pnpm v9+
A code editor (VS Code with the official Astro extension is recommended)

2. Install

Navigate to the project folder and install dependencies using your preferred package manager.

1) Install with npm:

cd awake-astro

npm install

2) Install with yarn:

cd awake-astro

yarn install

3) Install with pnpm:

cd awake-astro

pnpm install

3. Start Development Server

Once dependencies are installed, start the local development server:

npm run dev

# or: yarn dev / pnpm dev

This starts the Astro dev server at http://localhost:4321

> awake-astro@0.0.1 dev

> astro dev

- Astro 5.17.1

✓ Local: http://localhost:4321

✓ Network: http://0.0.0.0:4321

4. Build & Deployment

When you are ready to deploy, run the build command:

npm run build

# or: yarn build / pnpm build

The production output is generated in the ./dist/ folder.

This template uses output: 'server' with the @astrojs/node adapter, so it requires a Node.js host (e.g. Vercel, Railway, Render, or any Node.js server). You can preview the build locally with:

npm run preview

Your website is ready to be deployed. 🥳

Project Configuration

Colors

1. Override Brand Colors (Tailwind v4)
Brand colors are registered as Tailwind v4 tokens inside the @theme block in: src/styles/globals.css

@theme {

--color-dark_black: #1b1d1e;

--color-purple_blue: #4928fd; /* primary accent */

--color-purple: #ba81ee;

--color-blue: #70b5ff;

--color-orange: #ffaf68;

--color-green: #79d45e;

--color-pink: #f4889a;

/* gradient helpers */

--color-blue_gradient: #d9f3fc;

--color-yellow_gradient: #fdf1d3;

}

After updating these values, Tailwind will automatically apply the new colors everywhere the token is used (e.g. bg-purple_blue, text-dark_black).

2. CSS Variables for Light / Dark Theming
Semantic theme colors (background, foreground, primary, muted, etc.) are controlled via standard CSS variables in the :root (light) and .dark (dark) selectors in: src/styles/globals.css

:root {

/* light mode */

--background: oklch(1 0 0);

--foreground: oklch(0.229 0.0036 228.96);

--primary: oklch(0.205 0 0);

--muted-foreground: oklch(0.556 0 0);

}

.dark {

/* dark mode overrides */

--background: oklch(0.145 0 0);

--foreground: oklch(1 0 0);

--primary: oklch(0.87 0.00 0);

--muted-foreground: oklch(0.708 0 0);

}

Dark mode is toggled by the .dark class on the <html> element, managed by next-themes. The user's preference is persisted in localStorage.

Typography (Tailwind v4)

1. Font Loading
Fonts are loaded via Google Fonts <link> tags in: src/layouts/Layout.astro

< link rel = "preconnect" href = "https://fonts.googleapis.com" />

< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin />

< link href = "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap" rel = "stylesheet" />

This template uses two fonts: Inter Tight (primary body font) and Instrument Serif (decorative italic headings).

2. Register Font Tokens
Font family tokens are registered inside the Tailwind v4 @theme block in: src/styles/globals.css

@theme {

--font-instrument-serif: var(--font-instrument-serif);

--font-inter-tight: var(--font-inter-tight);

}

3. Apply Font to Body
The body font is applied directly in src/layouts/Layout.astro via a style attribute:

< body style = "font-family: 'Inter Tight', sans-serif;" >

... page content ...

</ body >

To use Instrument Serif for decorative text, apply the utility class .instrument-font (defined in globals.css) to any element.

4. Changing the Font
To switch to a different Google Font:

Replace the Google Fonts <link> URL in Layout.astro with your chosen font.
Update the font name in the body style attribute in Layout.astro.
Update the --font-inter-tight token name in globals.css to match.

Logo

1. Logo file location: src/components/layout/header/Logo/index.tsx

< a href = "/" >

{/* Light mode logo */}

< img

src = "/images/logo/logo.svg"

alt = "logo"

className = "dark:hidden"

{/* Dark mode logo */}

< img

src = "/images/logo/DarkModeLogo.svg"

alt = "logo"

className = "dark:block hidden"

</ a >

2. Replacing the Logo

Place your new logo files in public/images/logo/.
Update the src paths in Logo/index.tsx to point to your new files.
If you only have one logo (no dark variant), remove the second <img> tag and delete the dark:hidden class from the first.
Adjust width and height attributes to match your logo's natural dimensions.

3. Changing the Favicon

Replace the files at the root of public/:

public/favicon.ico — the classic .ico favicon
public/favicon.svg — the SVG favicon used by modern browsers

The favicon is referenced in src/layouts/Layout.astro via <link rel="icon" href="/favicon.ico" />.