# Website Style Guide for NotJustAn.Agency

This style guide outlines the visual design, tone, and interaction principles for the NotJustAn.Agency website. It is designed to ensure a cohesive, professional, and lead-generating online presence, providing clear instructions for LLMs to create a great-looking and effective website.

## Brand Essence

*   **Core Identity:** Expert, results-driven, growth-focused, trustworthy, modern, and professional.
*   **Target Audience:** B2B clients in hospitality and e-commerce seeking to scale their businesses.
*   **Key Message:** NotJustAn.Agency solves critical business growth challenges (revenue, conversions, visibility) through specialized digital marketing and web development services, helping clients achieve 'Fully Booked Restaurants', 'Sold-Out Collections', and 'Brands Built to Last'.
*   **Tone:** Professional, confident, clear, authoritative, yet accessible. Emphasizes a problem/solution approach and tangible business outcomes.

## Visual Design Principles

*   **Aesthetic:** Clean, modern, professional, and uncluttered. The design should convey competence and sophistication, allowing the content to shine. Prioritize user experience and clear communication.
*   **Color Palette:**
    *   **Primary:** Deep Navy/Blue (`#0A2540`) - Conveys trust, professionalism, and depth. Use for backgrounds, primary text, and key structural elements.
    *   **Secondary:** Off-White/Light Gray (`#F8FAFC`) - Provides a clean, spacious canvas for content. Use for backgrounds of content sections or cards.
    *   **Accent:** Teal (`#06B6D4`) - A modern, energetic color for calls-to-action, key interactive elements, and highlights. Use sparingly to draw attention to important actions.
    *   **Text:**
        *   Headings: Dark Grey/Near Black (`#0F172A`) - High contrast for immediate visibility.
        *   Body Copy: Slightly lighter Dark Grey (`#1E293B`) - Excellent readability for longer text blocks.
*   **Typography:**
    *   **Headings:** Utilize a modern, strong sans-serif font family (e.g., Inter, Poppins, Montserrat) with clear hierarchy via font weights and sizes.
    *   **Body Text:** Employ a highly readable sans-serif font family (e.g., Inter, Open Sans, Lato) for optimal legibility.
*   **Layout & Responsiveness:**
    *   **Grid System:** Utilize a flexible grid system (leveraging Tailwind CSS) for consistent alignment and spacing.
    *   **Responsiveness:** Design must be fully responsive, adapting flawlessly to all screen sizes (desktop, tablet, mobile). Prioritize mobile-first principles.
    *   **Whitespace:** Incorporate generous use of whitespace to improve readability, reduce cognitive load, and enhance the premium feel.
*   **Imagery & Visuals:**
    *   **Quality:** Use high-resolution, professional, and relevant imagery. Visuals should align with themes of growth, scale, and expertise.
    *   **Placeholder Strategy:** If placeholder graphics are needed, use abstract geometric shapes or minimalist, sophisticated placeholder images that convey professionalism rather than looking amateurish. Avoid default stock photos.

## Interactivity & Animation

*   **Purposeful Animation:** Employ Framer Motion for animations that enhance UX, guide attention, and convey dynamism without being distracting.
    *   **Use Cases:** Smooth page transitions, subtle entrance animations, hover effects on CTAs and cards, micro-interactions.
    *   **Style:** Animations should be quick, smooth, and subtle. Avoid jarring or lengthy effects.
*   **Performance:** Animations must be performant and not impede loading times or user interaction.

## Content Presentation

*   **Hierarchy:** Employ clear, distinct heading levels (H1, H2, H3) to structure content logically.
*   **Copywriting Style:** Adhere to the problem/solution framing and results-oriented language from the copywriting documents. Emphasize benefits and tangible business outcomes.
*   **Emphasis:** Use bold text strategically for key terms, benefits, and CTAs.
*   **Lists:** Utilize bullet points and numbered lists for clarity and scannability when outlining services, features, or steps.

## Key Components & Elements

*   **Buttons (Calls to Action - CTAs):**
    *   **Design:** Prominent, clear, and action-oriented. Use the accent color (`#06B6D4`) for primary CTAs ("Get in Contact," "See Portfolio"). Secondary buttons can be outlined or use a less saturated version of the accent color.
    *   **Placement:** Strategically placed in hero sections, after content sections, and in footers.
    *   **States:** Design clear hover and active states for buttons.
*   **Forms:**
    *   **Contact & Newsletter Forms:** Clean, simple, and easy to use. Minimize required fields. Clearly indicate required fields. Use professional input field styling via Tailwind CSS.
    *   **Submission Feedback:** Provide clear success or error messages upon form submission.
*   **User Authentication Elements:** For gated content (e.g., ebook downloads):
    *   Clear login/signup forms and modals.
    *   Integration with Strapi's user management.
    *   Clear feedback on authentication status.
*   **Ebook Download Links:** Should be visually distinct once a user has authenticated and met the newsletter signup criteria.

## LLM Development Guidance

*   **Persona:** Act as a skilled UI/UX designer and frontend developer specializing in modern web applications.
*   **Frameworks:** Utilize Astro.js for page structure and SSR/static generation, React for interactive components, Tailwind CSS for styling, and Framer Motion for animations.
*   **Code Generation:**
    *   Apply the defined color palette (`#0A2540`, `#F8FAFC`, `#06B6D4`, `#0F172A`, `#1E293B`) and typography consistently.
    *   Implement responsive layouts using Tailwind's utility classes.
    *   Integrate Framer Motion for subtle, purposeful animations.
    *   Design forms and buttons to be clear, actionable, and visually aligned with the brand.
    *   Structure content semantically, emphasizing clear headings and readable body text.
    *   Ensure components are accessible and performant.
    *   For download gating, interact with Strapi's API for authentication and file retrieval, and Listmonk's API for newsletter subscriptions.
*   **Output:** Generate clean, well-structured React components and Astro pages adhering to these guidelines.