Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a multi-page website for an agency named OBSIDIAN. The site will feature a modern, dark-themed design with premium animations using GSAP, aimed at providing a WOW effect. It will showcase the agency's services, portfolio, and contact information in a clean and engaging manner.

## CORE FEATURES
1. **Hero Section**: A visually striking introductory area with captivating animations that grabs user attention right away.
2. **Services Block**: Detailed presentation of services offered, including one-page sites, multi-page sites, e-commerce development, and maintenance services.
3. **Portfolio Cases Block**: A section highlighting various projects with links to detailed case study pages for each project.
4. **Call-to-Action (CTA)**: A strategically placed CTA encouraging users to get in touch or request a quote.
5. **Footer**: Contains essential links and contact information.
6. **Case Study Pages**: Dedicated pages for each project showcasing detailed presentations, visuals, and outcomes.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout structure includes a full-width hero section at the top, followed by service descriptions, a portfolio showcase, a prominent CTA section, and a footer with contact details.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React's Context API or Zustand for state management.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**: Develop reusable components for the Hero Section, Services Block, Portfolio Cases Block, CTA, and Footer.
3. **Implement Routing**: Use React Router to handle navigation between the main pages (Home, Cases, Contact).
4. **Design Layout**: Structure the layout using Tailwind CSS to ensure responsiveness across devices.
5. **Add Animations**: Integrate GSAP for animations on the Hero Section and throughout the site for a dynamic user experience.
6. **Build Case Study Pages**: Create individual case study components that dynamically render based on the selected project.

## USER EXPERIENCE
Users will start on a captivating hero section that introduces the agency with engaging animations. As they scroll down, they will be presented with services offered, each with clear and concise descriptions. The portfolio section allows users to explore previous projects, leading them to detailed case studies. A prominent CTA encourages users to engage further, while the footer provides easy access to contact information and additional resources. The overall navigation should be smooth, with a focus on mobile responsiveness to ensure accessibility across devices.