Untitled prompt
Coding
chatgpt
5d ago
Build a full-viewport hero section for a SaaS landing page called "Questly" using React, TypeScript, Tailwind CSS 3, and Vite. Use `lucide-r
#engineering
Build a full-viewport hero section for a SaaS landing page called "Questly" using React, TypeScript, Tailwind CSS 3, and Vite. Use `lucide-react` for all icons. No other UI libraries.
---
FONT
Use the font "Nimbus Sans TW01" loaded from this stylesheet in `index.html`:
```
https://db.onlinewebfonts.com/c/bb5de19d87c09a95216dc6ccd96e37c6?family=Nimbus+Sans+TW01
```
Set the font stack in both `tailwind.config.js` and `index.css`:
```
'Nimbus Sans TW01', 'Helvetica Neue', Helvetica, Arial, sans-serif
```
Enable `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` on `html`.
---
BACKGROUND IMAGE
The full hero section uses this image as a `background-image` (cover, centered):
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260611_133301_d5f2a94a-b22e-4e4a-a6b6-eacdddf1f5b0.png&w=1280&q=85
```
Applied via inline `style={{ backgroundImage: url(...) }}` on the `
`.