Here is how we built our new landing page (AMA)
André J
48 replies
The goal was to:
1. Platform agnostic (Github, Vercel etc)
2. Free to host (GitHub Pages)
3. Easy to maintain. .yml, .md blog, simple css, simple html, liquid-expand
- 💰 Pure CSS based price-toggle component (Zero JS)
- 🙋♀️ Pure CSS based FAQ / Support component (linked w/ UUID) (Zero JS)
- 🐙 Hosted on github pages with Jekyll backend
- ⬇️ Data-model stored in .yml and .markdown
- 📚 Fonts: Header: Monteserrat, Text: OpenSans
- 🎨 Icon-set https://www.feather-icons.com/
- 🖥️ 2 breakpoint reposive layout: Mobile and Desktop
- 💧 Front end: HTML via liquid expands
- 🍦 Pure vanilla CSS3 variables (Zero CSS frameworks etc)
- 🌙 Darkmode only w/ duo color highlights: 🔵 accent-blue and ⚪️ primary-white
Tools used:
- 🦾 Prompt-coded with Cursor.so (prompt-coding is so much faster than webflow / framer / no-code etc)
- 🤖 ChatGPT / Grammarly AI to clean up some of the text
- 🖌️ iPad notes + apple pencil for initial mockup / concept
- 💎 Sketch app for finalizing the design
- 🌍 All code is open-source: https://github.com/sentryco/sentryco
Next website goals:
- 🆕 Move to github action based jekyll hosting to get paginator v2 which has tagging 😋
- 🛸 ...or move to github action based astro.space hosting
- 📽️ Incorporate video of macOS / iPadOS app
- 💻 Add more responsive breakpoints (laptop and tablet size)
The result is on https://www.sentry.co/
Feel free to roast 😅 or if you have question about something, shoot 👇
Replies
Derek@derkolstad
Ok.. I’ll bite 🎣
1. It’s simple, but has no style. I’d love to see a clever take on secure storage with a vault door or some sweet animation. See it’s advanced, believe it’s advanced.
2. Don’t compete on price, but on value.
3. It needs a snappy headline. Maybe “Like a Swiss Bank to Sync and Store Passwords”
😎
Share
@derkolstad Yepp. 1. Doing some more animation going forward. I think we will make some clever futuristic unlock thingy in the login screen of the app. 2. I agree. Value is where it's at. We could price this higher you think? 3. Right now we jut want our communication to be ultra factual. No marketing fluff. Then over time we will inject more visionary / conceptual / pitchy lingo. I think. But we need to experiment a bit more with that communication in SoMe etc. I think. Thanks for your feedback 🙏
Thanks for sharing, really interesting approach! Two suggestions:
- The FAQs pop to the top of the screen when opening, which is a bit distracting for me
- A soft gradient in the background of the whole page (can be fixed position) would look really nice! (Take a look at linear.app for inspiration)
You have shown how to use prompt-coding, AI, and pure CSS to build a platform-agnostic, free-to-host, and easy-to-maintain landing page. Well done! 👏👏
I have two questions:
(1) How did you integrate ChatGPT and Grammarly AI to clean up some of the text? Did you have to edit or revise the generated text manually?
(2) How did you design the pure CSS based price-toggle and FAQ components without using any JavaScript? Can you share some code snippets or examples of how they work?
@dsarkar #1: Grammarly chrome extension + the chatgpt website. #2: For code-snippets: All code is opensource here: https://github.com/sentryco/sent... (the css, _data and _includes folder has that code )
SyncSignature
@sentry_co Looks cool. Just one suggestion - A secondary color could make it look great.
@neelptl2602 Yeah. Agree with that. Reach goal for next iteration. I tried using an auxiliary color. But just didn't pop. Thanks for your feedback! 🙏
Free Essay Checker AI
Thanks for sharing!
Comment Deleted
Looks cool I'll try it for my new project.
minimalist phone: creating folders
Hi André, I have an issue with the page. There is a 404 page. Is the link broken?
Anyway, could you recommend some good YT channels when I want to start with coding and programming? I tried a little bit of Python, but I think that I need to create my own project to be thrilled in the process. I have subscribed https://www.youtube.com/@webdecoded
@webdecoded @busmark_w_nika I would not recommend using YouTube to code. Use cursor.io. All you need is to tell it what you want to make. And it will write the code for you. Perfect for "business personas" to make apps etc. Here is the OSS code: https://github.com/sentryco/sent... and here is the website: https://www.sentry.co/
@webdecoded @busmark_w_nika And if you want to learn how to Code with AI. Im writing the bible on that as we speak 📓 https://gist.github.com/eonist/2...
@webdecoded @busmark_w_nika Yeah. It's extensive and a bit overwhelming at the moment. Im just learning this my self, and im just scratching the surface. I will refine it and trim it down when I get a bit further. I think it's 50% complete. stated like 2 weeks ago. 😸
Flowla
Hey @sentry_co - it seems the repo is privated? I'm getting a 404 🤔
@oguzgelal Sorry. Posted a bad link. here you go 💁🏼♂️ https://github.com/sentryco/sent...
Scade.pro
"iPad notes + apple pencil for initial mockup / concept" is the most efficient and best part of the process? )
@nikogermish Definitely! Nothing more efficient in the early phase IMO. I see many entrepreneurs do the same like: https://www.linkedin.com/posts/a...
Absolutely loving the minimalist approach, André!
I'm curious, how long did it take you to develop this entire landing page using Cursor.so and the other tools you mentioned?
@gailthomas_ The hard part is really the communication and design. When you have that executing the code is pretty fast. esp with copilot chat / cursor. Maybe 1 week to code the Front, blog, support. And 1 week to fine tune small details from feedback. But nailing the communication and design was like 2 weeks at least. And we took most of the communication / text from our pitch deck. Which took a month with tons of feedback on the content / text. The pitch text took maybe 1 - 2 months 😅
AppManager by CompanyDNA AI
How did you create animated Iphone screens? I am looking for one to create for Mac book
@johnberg 1. Use QuickTime - record screen. 2. connect your iPhone with cable. It eillshow up in QuickTime. 3. Hit record. And use the app on your iPhone. 4. export the video as -mp4 at 720p. 5. set a video element to loop with he video. and add a iPhone bezel .png above it with absolute positioning. Code here: https://github.com/sentryco/sent...
Pocket Hansei
That was a great breakdown you did.
Although I'm not a design expert, I do have one suggestion. With all the screens showing up at once on opening the page, it's difficult to focus. I think it will be better to show one screen and as user scrolls down, the mockup and text will get updated.
One typo caught my eye "exclusivly".
I've a question. How are you planning to compete with sentry.io on google search, as you two share the same brand name?
Btw, nice logo.
@kraten 1. Good point regarding the screens being bit overwhelming. I'm 🤔 maybe we could show one by one while you scroll. But then many people dont like these sticky scroll website🤔. 2. Fixed the typo! thanks! 3. sentry_io serves a different niche than us B2B vs B2C. SEO wise, time will tell. I just love the name Sentry. It means guard. It's short and a bit abstract. So we will have to compete for SEO for now. 4. Thanks. The logo is pretty sweet. We have big plans to use it in different ways in our marketing etc. Stay tuned. And thanks for the questions 🙏 Feedback is valuable!
This is great Andre, thanks for sharing!
@iskandarchacra Thank you! Im allergic to being tied to platforms, so tried to do something very modular / portable but still easy enough to use.
@sentry_co It looks really cool, kudos! If you don't mind me asking, what do you mean by this "Move to github action based jekyll hosting to get paginator v2 which has tagging"? First time I heard about it.
@iskandarchacra That's a great question. Nice catch! paginator is the engine that drives the blog part in Jekyll. Github only supports paginator v1 which is basic. with v2 you can add cool things like tags and categories etc. So blog posts becomes more discoverable and SEO friendly. You can use the latest paginator v2 with GitHub actions. So the CI (continues integration) will build the page on each commit with the Jekyll version you want to use, and extensions you want to add. It's a bit more manual than just using GitHub Pages. Which requires no setup. If the website works on your local machine, it will look the same on GitHub Pages etc. Definitely a reach goal for next release. I might make another AMA with instructions after it's launched.
This is a very informative content check my website's page I just made: https://numerodehoy.do/
AppyHigh Prime
This is just WOW. Thank you for writing this down here. ❤️
@shivangiawasthi Thank you! Hopefully it will inspire more people own their landing-pages. And build artisan experiences that scale easily as you grow. # down with platform lock-ins / walls 😸
Scade.pro
Really impressed by your new landing page, guys! 🎉 The design is fluid and intuitive. It'd be cool to hear more about your user testing phase and how users' feedback shaped the final design. Keep up the spirit! 💪
@builov84 Thanks! 🙏 We user-tested with different domain expert before we built anything. We talked to 30-40 experts from top companies like Meta, LinkedIn, Coinbase etc. They roasted us for about 1 month 😅 until the roasting receded 😂 then we knew our communication was getting there. Then we built all the code for the website without any feedback until this AMA. So I guess this is the user testing 😸 Also google analytics (Annonomouse of course) helps with validating if the website converts. So far so gd. 10-20% more conversion rate from our last page.
