Here is how we built our new landing page (AMA)
Andrรฉ J
52 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/sent...
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
Jao Japitana@jao_japitana
Launching soon!
If only I understand coding or programming. ๐
Share
Launching soon!
@jao_japitana You don't have to. Most of it was written with GitHub Copilot with prompts. So if you can prompt you can code it. more on AI coding here: https://gist.github.com/eonist/2...
@jao_japitana I was thinking the same!
@sentry_co Thank you so much for clarifying! This is very helpful.
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?
Launching soon!
@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 ๐
Thanks for sharing!
How did you create animated Iphone screens? I am looking for one to create for Mac book
Launching soon!
@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...
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?
Launching soon!
@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 )
Hey @sentry_co - it seems the repo is privated? I'm getting a 404 ๐ค
Launching soon!
@oguzgelal Sorry. Posted a bad link. here you go ๐๐ผโโ๏ธ https://github.com/sentryco/sent...
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.
Launching soon!
@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!
@sentry_co Looks cool. Just one suggestion - A secondary color could make it look great.
Launching soon!
@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! ๐
Looks cool I'll try it for my new project.
Wow! Nice job!
Launching soon!
This is a very informative content check my website's page I just made: https://numerodehoy.do/
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
Launching soon!
@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/
Launching soon!
@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...
Launching soon!
@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. ๐ธ
Thanks for sharing!
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โ
๐
Launching soon!
@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 ๐
This is great Andre, thanks for sharing!
Launching soon!
@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.
Launching soon!
@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.
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)
Comment Deleted