I need to create a new landing page for my product I'm building - Clipio.
Clipio is a browser extension that enables the users to store content from the browsers to their Notion workspace. Users can save entire articles, highlight only certain text parts on the page, and save those. They can also add comments (thoughts, ideas) to highlights and they can add extra content to the entire page as well (either at the start or end of the document). Other content capabilities includes Selecting and saving images, Twitter (save tweet or thread as a text) and more in the future.
The target audience are Notion power users and content creators who build, write, teach, and constantly work on themselves and their business. They are struggling with storing useful content from the internet to Notion in an easy way that fits their flow and wish they could store the content with more context and as they need (save only the necessary parts, see the original content, add notes and thoughts, add their extra content) to make it work for them with minimal effort. They value powerful customizations to make the tool fit in their flow (saving presets, automation, API or leveraging AI), reliable tools that are easy to use and always ready.
Current landing page: https://clipio.app
I want you to help me create a new landing page. The landing page should be visually similar to the current page. Both visually and in tech stack.
- minimalistic
- using mostly black and white (mimic Notion's official page and design)
- using shades of blue for logo and key parts (taken from the page)
- generous spacing
- the current page is static, return either plain HTML and CSS or a next.js app that will render to static pages (as I plan to expand upon it later with a blog)
- for styling use Tailwind CSS
- signup form must be functionally implemented the same way as is on the current page to avoid breaking it. But you can restyle it.
I have uploaded the markdown file with the new texts which will be used on the page. As well as wireframes that represents where the texts and other content should be.
Let me know if you need anything else (I can provide raw code for the old landing page if necessary).
Sorry, I have send the message by accident sooner before finishing it. Let's return to v1 version and tweak the UI a bit first, please.
- add gradient to the buttons
- add subtle dotted grid as a background to the top of the page (as in the original landing page)
- buttons have more rounder corners (use
rounder-lg) - buttons scale a little bit on hover and focus (use transition to make it animated)
- make the main title smaller a bit (font-size)
- double the white-space above the main title
- remove the large placeholder for the image - there will be a couple of background images showcasing various states and functionalities of clipio, just leave some extra padding at the bottom so the can fit there
- instead of plain text strikethrough for a "a sweat" use a blue gradient line (svg so it looks like a pen stroke)
- make it a bit smaller (font-size).
- all text in the same color a bit darker grey, than what is currently used. Connect all text to one paragraph.
- Make the last sentence "Meet Clipio" a bold.
- add button below the paragraph with label "See how it works" (this will eventually open a overlay with a video). The button should have an plan icon before the label. It should be a bit more subtle than the main CTA button.
- make it a single line (button next to the input field on larger screens where it fits)
- make the both columns (cards) of the same height and buttons at the bottom (so they visually looks like they are on one line).
- for premium plan turn the "Coming soon" to badge (not a text in parentheses)
- "one-time payment" should be ideally in one line with the price, and should be a bit more prominent as well. As I want to highlight this is not a subscription thing.