[Init]: Initial commit, Landing Page partially done. 01.04. 5 A.M.

Gemini/style.md

@@ -0,0 +1,74 @@
+# 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.