Skip to content

AGENTS.md

Latest commit

 

History

History
189 lines (150 loc) · 7.52 KB

AGENTS.md

File metadata and controls

189 lines (150 loc) · 7.52 KB

Vigilant Security — Project structure (beus421)

Reference for AI agents and developers adding pages or sections. Follow this structure strictly.

Stack

  • Astro 6 with @astrojs/react, @astrojs/sitemap
  • GSAP + Lenis smooth scroll (wired in BaseLayout)
  • sharp for image optimization
  • Leaflet for maps (MapSection)
  • trailingSlash: 'never' — URLs have no trailing slash
  • Path alias: @/* → src/* (tsconfig.json)

Folder structure

beus421/
├── astro.config.mjs
├── tsconfig.json
├── public/                   # Static assets (served as-is)
│   ├── banners/              # Inner-page hero images
│   ├── services_images/
│   ├── vigilant_icons/
│   ├── icons/, footer/, careers/, videos/
│   └── favicon.svg
└── src/
    ├── layouts/
    │   └── BaseLayout.astro  # Shell: SEO, Navbar, main, Footer, Lenis, reveal
    ├── pages/                # One file = one route (compose sections only)
    ├── components/           # Reusable sections (one section ≈ one .astro file)
    │   └── hero/             # Hero-specific subcomponents
    └── styles/
        └── global.css        # Tokens, typography utilities, data-reveal

Architecture rules

  1. Pages (src/pages/*.astro) are thin composers: import BaseLayout + section components. Minimal logic and no page-level CSS unless unavoidable.
  2. Layout (src/layouts/BaseLayout.astro) owns global shell, SEO, Navbar, Footer, scroll-reveal observer, Lenis + GSAP.
  3. Components (src/components/*.astro) are self-contained sections with scoped <style>, optional interface Props, and markup.
  4. Assets live under public/ and are referenced from the site root, e.g. /banners/about-us-banner.png.

BaseLayout

Every page wraps content in BaseLayout with required SEO props:

<BaseLayout
  title="Page Title"
  description="Meta description for SEO."
>
  <!-- sections -->
</BaseLayout>

Optional: ogImage, canonicalUrl.

BaseLayout provides:

  • Global CSS, sticky Navbar, Footer
  • <main><slot /></main> for page sections
  • Scroll reveal: data-reveal="up|left|right" → .is-visible via IntersectionObserver
  • Lenis + GSAP ScrollTrigger — do not add duplicate smooth-scroll on pages

Page patterns

Pattern A — Home (index.astro)

  • Uses HeroSectionV1 (video hero), not Banner
  • Stacks homepage-only sections (see table below)

Pattern B — Standard inner page (default)

---
import BaseLayout from "../layouts/BaseLayout.astro";
import Banner from "@/components/Banner.astro";
import CtaSection from "@/components/CtaSection.astro";
// …page-specific sections
---

<BaseLayout title="…" description="…">
  <Banner imgUrl="/banners/…" heading="…" subheading="…" />
  <!-- content sections -->
  <AccreditationsSection />
  <CtaSection />
</BaseLayout>

Typical order: Banner → content sections → AccreditationsSection (optional) → CtaSection (usually last).

Pattern C — Data-driven detail page

Same as Pattern B, but pass props into reusable sections (see services-details.astro):

<ServiceDetailSection
  label="…"
  heading="…"
  overviewText="…"
  image="/services_images/…"
  features={["…", "…"]}
  approach={[{ icon: "/vigilant_icons/…", heading: "…", subheading: "…" }]}
/>
<RelatedServicesSection heading="…" services={[{ name, image, href }, …]} />

Import conventions

What Import
Layout import BaseLayout from "../layouts/BaseLayout.astro"
Components import X from "@/components/X.astro"

Existing pages

Route File Sections (order)
/ index.astro HeroSectionV1, TrustedSection, AboutSection, Counter, ServicesSection, ChooseSection, SupportSection, CtaSection, PartnersSection, TestimonialsSection, InsightsSection, AccreditationsSection
/about-us about-us.astro Banner, WhoWeAreSection, CompanyProfileSection, MissionSection, CtaSection
/services services.astro Banner, TrustedSection, AllServicesSection, CtaSection
/services-details services-details.astro Banner, ServiceDetailSection (props), RelatedServicesSection (props), AccreditationsSection, CtaSection
/news news.astro Banner, AccreditationsSection, CtaSection
/careers careers.astro Banner, TrustedPeopleSection, WhyChooseVigilantSection, YourJourneySection, FrontLineSection, AccreditationsSection, CtaSection
/location location.astro Banner, SupportProcedure, MapSection, AccreditationsSection, CtaSection
/accredations accredations.astro Banner, AccreditationTabs, CtaSection

Note: Navbar.astro links to many routes not yet implemented (e.g. /services/event-security, /contact). New pages should use kebab-case filenames and match nav URL shapes when wiring links.

Component library (reuse before creating)

Component Role
Banner.astro Inner-page hero. Props: imgUrl (required), heading?, subheading?
HeroSectionV1.astro Home-only full-bleed video hero
CtaSection.astro Fixed CTA block (no props)
AccreditationsSection.astro Accreditation logos — common before CTA
TrustedSection.astro Trust/stats strip
AllServicesSection.astro Services grid listing
ServiceDetailSection.astro Service detail: overview, features, approach
RelatedServicesSection.astro Related service cards
WhoWeAreSection, CompanyProfileSection, MissionSection About page
TrustedPeopleSection, WhyChooseVigilantSection, YourJourneySection, FrontLineSection Careers
AccreditationTabs.astro Accreditations tabs
SupportProcedure.astro, MapSection.astro Location
AboutSection, ServicesSection, ChooseSection, SupportSection, PartnersSection, InsightsSection, TestimonialsSection, Counter Homepage

New section: add src/components/YourSection.astro with scoped styles and optional props. Pages only import and place them.

Styling

  • Tokens in src/styles/global.css: --color-primary (#b61f26), --color-secondary (#33587d), Inter + Syne
  • Utilities: .heading-1, .heading-2, .body-large, .body-regular, .pill-text, etc.
  • Layout (Figma): many sections use max-width 1280px, 64px horizontal padding (1152px content) — match Banner.astro
  • Reveal: data-reveal="up|left|right", optional data-reveal-delay="120" (ms)
  • Scoped styles: each component’s <style> block; avoid global page CSS

New page checklist

  1. Create src/pages/your-page.astro (kebab-case → /your-page).
  2. Import BaseLayout + @/components/* sections.
  3. Set title and description on BaseLayout.
  4. Use Banner first (unless home-style hero).
  5. Stack existing sections; end with CtaSection (often AccreditationsSection before it).
  6. Add images under public/banners/ (or relevant public/ subfolder).
  7. Update Navbar.astro if the route should appear in navigation.

Quick template (copy for new inner pages)

---
import BaseLayout from "../layouts/BaseLayout.astro";
import Banner from "@/components/Banner.astro";
import CtaSection from "@/components/CtaSection.astro";
---

<BaseLayout
  title="Page Title"
  description="One-sentence meta description."
>
  <Banner
    imgUrl="/banners/your-banner.png"
    heading="Page Heading"
    subheading="Optional subheading."
  />

  <CtaSection />
</BaseLayout>