Rakenna moderni ja konvertoiva laskeutumissivu SaaS-tuotteelle. Opi markkinointisivun rakenne, CTA-elementtien sijoittelu ja responsiivinen design käytännössä.
Aloittelija · 3-5 tuntia · Next.js, TypeScript, Tailwind CSS, Framer Motion
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
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.
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.
Hero-osio CTA:lla
Feature-osio
Hinnoittelutaulukko
Testimonialit
FAQ-osio
Footer
Kun perusprojekti on valmis:
Dark mode toggle
Newsletter signup
Live chat widget
Animoitu hintalaskuri
Integraatio Stripe Checkout
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.
Valitse työkalu ja käytä aloituspromptiä.