Skip to content

Latest commit

 

History

History
98 lines (72 loc) · 4.01 KB

CLAUDE.md

File metadata and controls

98 lines (72 loc) · 4.01 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is the ReLow Group website, a modern Astro-based site for a custom software development company. The site showcases their services (Web Applications, Web Design, Mobile Apps), development process, and portfolio.

Development Commands

# Start development server
npm run dev

# Production build
npm run build

# Preview production build locally
npm run preview

# Format code with Prettier
npx prettier --write . --plugin prettier-plugin-astro

Architecture & Key Patterns

Content-Driven Architecture

The site uses Astro Content Collections for managing structured content:

  • Services (src/content/services/) - Service pages with features, icons, and ordering
  • Projects (src/content/projects/) - Portfolio items with technologies, industries, testimonials
  • Testimonials (src/content/testimonials/) - Client feedback with ratings and project links

All content follows strict TypeScript schemas defined in src/content/config.ts. New content automatically appears in relevant components when added.

Component Organization

  • Layout components (src/components/layout/) - Header with navigation, Footer with contact info
  • Page sections (src/components/home/) - Modular homepage sections (Hero, Services, Process, Portfolio)
  • Interactive components (src/components/forms/) - React components for complex interactions
  • Base layout (src/layouts/BaseLayout.astro) - SEO-optimized layout with structured data

Brand System

The design is built around ReLow Group's brand identity:

  • Primary color: #333333 (dark gray/black)
  • Accent color: #fed03d (yellow)
  • Typography: Inter font family
  • Custom animations: fade-in, slide-up, bounce-soft defined in Tailwind config

Form Handling

Contact forms use Netlify Forms with:

  • React component with validation (src/components/forms/ContactForm.tsx)
  • Hidden form for Netlify detection in contact.astro
  • Professional multi-field form with project details

Key Configuration Files

  • astro.config.mjs - Configured for React integration, Tailwind, sitemap generation, image optimization
  • tailwind.config.js - Extended with brand colors, custom animations, Inter font family
  • netlify.toml - Deployment config with security headers and form handling
  • src/content/config.ts - Content schemas for type-safe content management

Content Management Workflow

Adding New Services

  1. Create .md file in src/content/services/
  2. Include required frontmatter: title, description, icon (FontAwesome class), features array, order number
  3. Service automatically appears on homepage services grid

Adding New Projects

  1. Create .md file in src/content/projects/
  2. Include: title, description, client, date, technologies array, industry (enum), optional testimonial
  3. Set featured: true to display on homepage portfolio section

Adding New Pages

Pages in src/pages/ automatically become routes. Use BaseLayout.astro for consistent SEO and styling.

Deployment

The site is configured for Netlify deployment:

  • Build command: npm run build
  • Publish directory: dist
  • Forms automatically handled by Netlify
  • Security headers and caching configured in netlify.toml

Development Notes

  • The site uses Astro's static site generation for performance
  • React components are hydrated only when needed (client:load)
  • All styling uses Tailwind CSS with utility-first approach
  • Images should be optimized and use Astro's built-in image service
  • The development server runs on http://localhost:4321/

Brand Compliance

When making changes, maintain ReLow Group's professional software development company image:

  • Use established color palette (primary #333, accent #fed03d)
  • Keep messaging focused on custom software solutions
  • Preserve the 6-step development process visualization
  • Maintain "Software that Works for You" tagline prominence