Rakenna moderni ja konvertoiva laskeutumissivu SaaS-tuotteelle. Opi markkinointisivun rakenne, CTA-elementtien sijoittelu ja responsiivinen design käytännössä.
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:
Yksinkertainen verkkokauppa tuotteiden selaamiseen ja ostamiseen. Opi e-commerce-perusteet, Stripe-maksut ja ostoskorin logiikka käytännössä.
Moderni ja responsiivinen portfolio-sivusto, joka esittelee työsi ja osaamisesi. Opi Next.js:n perusteet ja deployn Verceliin — täydellinen ensimmäinen projekti.
Täysiverinen blogi kirjoittamiseen ja artikkeleiden hallintaan. Opi MDX-sisällönhallintaa, hakutoimintoja ja autentikaatiota rakentamalla oma CMS.
Selaa kaikkia web-sovellukset projekteja tai tutustu muihin kategorioihin.