njaa-frontend/.agent/rules/webdesign-guidelines.md

trigger

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