Moderni laskeutumissivu SaaS-tuotteelle.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
Luo moderni SaaS landing page. Osiot: 1. Navigation (logo, linkit, CTA) 2. Hero (otsikko, kuvaus, 2 nappia, kuva) 3. Logos (yrityslogot jotka käyttävät) 4. Features (6 ominaisuutta) 5. How it works (3 askelta) 6. Pricing (3 hinnoittelutasoa) 7. Testimonials (3-4 lainausta) 8. FAQ (5-6 kysymystä) 9. CTA (viimeinen kehotus) 10. Footer Tech: - Next.js 14 - TypeScript - Tailwind CSS - Framer Motion (animaatiot) Design: - Moderni, puhdas - Hyvät animaatiot scrollatessa - Responsiivinen Aloita Hero-osiosta.
Tässä projektissa rakennetaan seuraavat ominaisuudet:
Luo vaikuttava aloitusosio.
Luo SaaS-landing pagen hero-osio: suuri otsikko, alaotsikko, kaksi CTA-nappia (primary ja secondary), ja kuva/screenshot tuotteesta. Käytä gradientteja ja animaatioita.
Esittele tuotteen ominaisuudet.
Luo ominaisuudet-osio: 3-6 featurea kortteina tai riveillä. Ikoni, otsikko ja lyhyt kuvaus jokaiselle. Lisää kevyet animaatiot scrollatessa.
Luo hinnoittelukortit.
Luo hinnoitteluosio 3 kortilla: Free, Pro, Enterprise. Näytä hinta, ominaisuuslista ja CTA-nappi. Korosta suosituin vaihtoehto.
Lisää sosiaalinen todiste.
Luo testimonialit-osio karusellina tai gridina. Lisää FAQ-osio accordion-tyylisesti. Käytä oikeita tai mock-testimonialeja.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
Selaa kaikkia web-sovellukset projekteja tai tutustu muihin kategorioihin.