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

.agent/rules/webdesign-guidelines.md

@@ -0,0 +1,66 @@
+---
+trigger: always_on
+---
+
+# Webdesign Guidelines for NotJustAn.Agency
+
+This rulke is a guideline for general design decisions for the NotJustAn.Agency website.
+
+## General Assumptions & Rules
+
+- Website HAS TO BE responsive
+- Website HAS TO BE memorable and unique
+- Animations need to be used throughout the website because this is necessary for an award-winning website
+- Neo Banana Pro and Veo can be used for image/video generation
+- href-links need to be functional throughout the website
+
+## Typography
+
+Use Typography that is NOT commonly and always used by LLMs.
+
+## Loading Screen
+
+- "NotJustAn.Agency" as Text but seperated into two boxes: "NotJustAn" and ".Agency". Each box should be animated like here: https://codepen.io/GreenSock/pen/JojaebV
+- Add a morphing SVG that indicates loading. It should morph from a Bishop SVG (https://www.svgrepo.com/svg/535216/bishop) to a Bolt SVG (https://www.svgrepo.com/svg/535218/bolt) to a Checkmark SVG (https://www.svgrepo.com/svg/535263/checkmark) to an Arrow Up Trend SVG (https://www.svgrepo.com/svg/535172/arrow-trend-up).
+
+## Hero Section
+
+1. Hero Section Main Heading:
+"
+**Fully Booked** Restaurants.
+**Sold-Out** Collections.
+Brands **Built to Last**.
+"
+Each word surround with ** should be highlighted in some sort of way (for example some accent color).
+
+2. Hero Section Background needs to be an gray scale gradient glassmorphic animation. If you think this is too heavy because of website performance issues or you are not able to do this task with Nano Banana Pro and Veo, then please suggest another idea.
+
+3. Card Elements should be evenly spaced in the Hero Section on the right and left side. They should contain created ads by NotJustAn.Agency to built trust with the customers. Make sure these cards are animated and the same size.
+
+4. The Location Vienna and CET should be shown in the Hero Section in a Monospace font.
+
+5. Add a CTA (Details will be added)
+
+## Offer Section
+
+### Core Offer
+
+Show the bonuses of SEO & SEA, Copywriting, Conversion-Optimization and Lead Generation in a visually appealing way. As rotating card elements such as here: https://codepen.io/GreenSock/pen/RwKwLWK
+
+### Minimal Offer
+
+Also show this.
+
+### Additional Free Offer
+
+Also show this.
+
+## Contact Form
+
+Build a functional Contact form with: 
+
+- email
+- phone number
+- Company Name
+- and message
+- and Google Captcha