Skip to content

Added a new prompt in UI/UX section for making a boilerplate modern landing page design. #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AmanTechWiz wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added a new prompt in UI/UX section for making a boilerplate modern landing page design. #17

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,43 @@ This repository contains prompt chains for the following domains:
"Provide UX/UI design recommendations for the provided {website/app}. Focus on improving usability, accessibility, and aesthetics. Return a list of specific design improvements with examples where necessary."
```

* **Provide modern landing page**

```text
"Create a luxury feeling high-end website, as if you were a senior website designer working with startups for an AI LLM aggregator named {name you want}. Do the website design to match the style of the attached image 'reference'. I want the website to feature the following pages: Homepage, About page, contact us page, and a blog page with 4 blog articles already populated.

For the homepage I want it to include a hero section with a title, copy, and get started button centred, with a large image underneath showing the product UI by embedding this code
import Spline from '@splinetool/react-spline/next';

export default function Home() {
return (
<main>
<Spline
scene="loading..."
/>
</main>
);
}
:

featured in section, showing logos of publications this app has been in
testomonials section with a scrolling carousel of testimonials, each testimonial should also have the result that the user got
how it works section with 2 set up your AI assistant, ask anything. Each card should have an image on as well
features section with a grid of 4 cards showing the features of the app, with icons on each card
a mission statement section which communicates the mission of the company and why we built the app
pricing section with plans for free, pro and enterprise level plans, with a description on each as well as benefit bullet points and a recommeded badge on the pro plan
FAQ section with some questions
Footer

The website should also have a top navigation with only anchor links to all the sections on the homepage, and not link to any other page. The top navigation should also be sticky and blur the background behind it when you scroll.

Style wise, I want to use Inter as the font, with a light font weight for all text and tight letter spacing for headings. Any text that isn't headings should have a lower opacity. I want to use phosphor icons for the icon library with the light icon weight for all icons.

When a page loads the content should animate in from 0 opacity to 100 opacity and animate up. Also animate all the sections and components with opacity and blur as the user scrolls down the page.

For button styles I want to use a neumorphism 3d style button that glows when you hover. Any cards on the page should have a glassmorphic style with background blur and low opacity."
```

---

### **7. Security & Authentication**
Expand Down