Instructions for Axiona Template

Create new pages by adding .astro files in the src/pages/ directory. Each file automatically becomes a route based on its path.

• Create a data file in src/data/ with your page content (e.g., myPage.ts)
• Create an .astro file in src/pages/ (e.g., my-page.astro)
• Import PageLayout from @/layouts/PageLayout.astro
• Import your data and section components
• Wrap your content with PageLayout and add Breadcrumb for inner pages
• Reference existing pages like about.astro or contact.astro as examples

All page content is stored in TypeScript files in the src/data/ directory. Edit these files to update text, headings, and other content without modifying components.

• homeOne.ts — Home page content (hero, services, testimonials, etc.)
• about.ts — About page sections and team info
• services.ts — Services listing page content
• contact.ts — Contact page information
• navigation.ts — Header and footer navigation links
• site.ts — Global site info, contact details, social links

The template includes 60+ pre-built components organized in src/components/. Build pages by importing and composing these components together.

• sections/ — Full-width page sections (Hero, Services, Blog, CTA, etc.)
• cards/ — Content display units (BlogCard, ServiceCard, TeamCard)
• common/ — Base UI elements (Button, Container, Input, Badge)
• layout/ — Header and Footer components
• Check each component's Props interface at the top of the file for available options
• Use existing components instead of creating new ones to maintain consistency

Customize colors and fonts by editing CSS variables in the styles directory. All components use these variables for consistent theming.

• --color-primary — Primary brand color (blue #064dfa)
• --color-secondary — Secondary accent color (cyan #29c8ff)
• --color-bg-dark — Dark background (#0d0d12)
• --color-bg-light — Light background (#16181d)
• --font-heading — Heading font (Clash Display)
• --font-body — Body text font (Satoshi)

Replace images in the src/assets/images/ directory. Keep the same filenames to avoid updating component references, or update the image paths in data files.

• hero/ — Hero section images
• about/ — About page images
• blog/ — Blog post featured images
• services/ — Service thumbnails and detail images
• team/ — Team member photos
• brand/ — Logo and branding assets

Add blog posts, services, and case studies by creating Markdown files in src/content/. Each collection has its own folder with a defined schema.

• blog/ — Create .md files with title, description, pubDate, author, image, category
• services/ — Add service pages with title, description, icon, features, FAQs
• case-studies/ — Add case studies with title, image, client, stats
• Schema is defined in src/content/config.ts
• Run astro sync after modifying schemas
• Dynamic routes are auto-generated via [slug].astro files

Add scroll animations by applying CSS classes to elements. The animation system uses Intersection Observer and is configured in BaseLayout.

• Add animate-on-scroll class for fade-in effect on scroll
• Use animate-delay-1 through animate-delay-5 for staggered animations
• Add animate-on-scroll-large for larger elements
• Animations are initialized automatically in BaseLayout.astro
• Avoid animating too many elements at once for better performance
• Check existing components for animation pattern examples

Configure SEO settings through the PageLayout component props and data files. Each page can have custom title, description, and Open Graph image.

• Set title prop on PageLayout for page title
• Set description prop for meta description
• Set ogImage prop for social sharing image
• Global site info is in src/data/site.ts
• BaseLayout handles meta tags, fonts, and favicon
• Update favicon in public/ directory