@indirecttek/essentials-engine

A white-label, config-driven Astro component library for rapidly building beautiful marketing websites for small businesses. Define your content and branding in a single configuration file, and Essentials Engine handles the rest.


---

✨ Features

- Config-Driven Architecture – One configuration file powers your entire site
- Zero Client-Side JavaScript – 100% static output for blazing-fast performance
- CSS Variable Theming – Full control over colors with automatic propagation
- Responsive by Default – Mobile-first design that looks great on all devices
- Modern Aesthetics – Polished shadows, hover effects, and smooth transitions
- Flexible Layouts – Multiple hero styles, sticky navigation, and more

---

📦 Installation

``bash
npm install @indirecttek/essentials-engine
`

$3

Ensure your project has Astro and Tailwind CSS installed:

`bash
npm install astro tailwindcss
`

Compatibility:
- Astro 4.x or 5.x
- Tailwind CSS 3.x or 4.x

---

🚀 Quick Start

$3

Create a configuration file (e.g., src/config/siteConfig.ts):

`typescript
import type { SiteConfig } from '@indirecttek/essentials-engine';

export const siteConfig: SiteConfig = {
businessName: "Raleigh Pro Landscaping",

theme: {
primary: "#2d5a27", // Forest green
secondary: "#e8f5e3", // Light sage
accent: "#f4a460", // Sandy brown
background: "#ffffff",
foreground: "#1a1a1a",
},

contactInfo: {
phone: "(919) 555-0123",
email: "hello@raleighprolandscaping.com",
address: "123 Oak Street, Raleigh, NC 27601",
},

heroSection: {
headline: "Transform Your Outdoor Space",
subheadline: "Professional landscaping services for homes and businesses in the Triangle area.",
// Supports both local paths (/images/hero.jpg) and external URLs
imageUrl: "https://images.unsplash.com/photo-1558904541-efa843a96f01?w=1200&h=800&fit=crop",
imageAlt: "Beautiful landscaped garden with flowers",
callToActionLabel: "Get a Free Quote",
},

services: [
{ name: "Lawn Care", description: "Weekly mowing, edging, and seasonal treatments to keep your lawn lush and healthy." },
{ name: "Garden Design", description: "Custom garden layouts with native plants, flowers, and decorative elements." },
{ name: "Hardscaping", description: "Patios, walkways, retaining walls, and outdoor living spaces." },
],

seo: {
title: "Raleigh Pro Landscaping | Professional Lawn & Garden Services",
description: "Transform your outdoor space with Raleigh's most trusted landscaping company. Lawn care, garden design, and hardscaping.",
},

analytics: {
enableTracking: false,
},

// Optional features
socialLinks: {
facebook: "https://facebook.com/raleighprolandscaping",
instagram: "https://instagram.com/raleighprolandscaping",
},

layoutOptions: {
heroLayout: "image-right", // "image-left" | "image-right" | "full-width"
stickyNav: true,
},
};
`

$3

Create your homepage (src/pages/index.astro):

`astro
---
import { EssentialsLayout } from '@indirecttek/essentials-engine';
import { siteConfig } from '../config/siteConfig';
---


`

That's it! You now have a complete, professional marketing website.

---

🧩 Components

Essentials Engine provides both a full-page layout and individual components for flexibility.

$3

`astro
---
import { EssentialsLayout } from '@indirecttek/essentials-engine';
---


`

Renders a complete page with: Navbar → Hero → ServicesGrid → ContactForm → Footer

$3

Use components individually for custom page structures:

`astro
---
import { Navbar, Hero, ServicesGrid, ContactForm, Footer } from '@indirecttek/essentials-engine';
import { siteConfig } from '../config/siteConfig';
---