Docs: Add Landing Page

[rlingineni]

Hi! Excited about Capyloon.

I took a crack at the landing page and some of the website design stuff. Let me know what ya'll think. See index.md

I'm a little new to the project, so I apologize if what I wrote doesn't feel inline with the project ideals.

I wrote it more towards a developer audience, rather than an OS consumer. Maybe in the current state, since the UI isn't heavily opinionated/still figuring the internals out.

A few things that I learned as I was writing this:

"Web" is a tad ambiguous. It can mean server/client. It can mean HTML/CSS/JS. It can mean browser. I leaned a little more into the HTML/CSS/JS side of things since that part appealed to me.

"Open" is a little ambiguous. Like open-source or open forum. I picked open forum, since that makes it more collaborative and non-propiertary.

I also expanded to say things like smartwatches, and other experiences. Doesn't have to be done, but I think with the set-up, it could be done. One of my passions is e-ink displays, so hopefully one day.

I think I could have expanded privacy and security a little better, but I really don't know how it's unique in this experience. I think we can also make a separate document with all those outlined better.

---

Also, just wanted to intro myself 🙋‍♂️. This project is exciting to me because I've been eyeing phones like the Nokia 8110 and Pinephone to create a more dumb experience for myself. In my head there is a more distraction-free computing experience I want to build (also I'm a web-dev), and I want to own every aspect of it.

[arky]

Testcase:

Type 'linu' and the search show 1) highlight matching pages in current page 2) show dropdown list of any matching pages.

[fabricedesre]

Thanks @rlingineni ! I'll take a deeper look later today but overall that looks great!

[fabricedesre]

I tested and that very promising!

A few things I saw:

• The Capyloon text below the mascot should be styled with the red -> orange gradient, or replaced by the image at https://github.com/capyloon/capyloon_org/blob/main/images/sticker_logo.png
• We need to get a set of updated screenshots, the current ones are quite old.
• The layout doesn't look great on mobile.

[rlingineni]

Awesome!

I fixed the logo. And for the grid on mobile, I made it take the full width, so should be a little better.

As for the screenshots, I've yet to run the actual tool. But would be cool to see the latest

[fabricedesre]

On Mobile (with the devtools emulation) it looks like that:

and once we hit the "navigation" menu:

When I look at the Plausible access stats, it's about 50/50 between desktop and mobile so I think it's important to have both layouts working well. The current default view for Mobile is very bland, there is not even the project name, no color etc. I'm not sure if hugo templates are flexible enough to do that but we need something more enticing.

[rlingineni]

Oh great point, I understand the problem for Mobile, I can think through it some more. Yeah, totally, we can customize it, or add a css query probably to do something more on mobile

[rlingineni]

Okay, I mocked up a design in Figma.

I think we can make the font smaller on mobile, and see if the banner can extend to the top. And then navigation can have the sticker always attached possibly.

Also, any inspiration of websites may be helpful

I may not have time to work on it for a few days, but early feedback appreciated :)

[arky]

I think this basic mobile view is good enough. Thanks for your work @rlingineni

[fabricedesre]

Also, any inspiration of websites may be helpful

I just found https://carbon.sh/ which I think has a simple yet effective design. YMMV :)

[rlingineni]

Thanks @fabricedesre - I like that. I kind of just have been using the hugo template w/ minor mods, so it feels like like a blog post. But let me head back to the drawing board and see if there's something that can be a tad more bold for the homepage

[rlingineni]

How about if we try something like this? I didn't build it yet

[fabricedesre]

@rlingineni that looks great!

[arky]

@rlingineni I think this is great. Let's try to get something done so we could make headway to porting content over and launching. We can always make further improvements in the long run.

[rlingineni]

Hi, @fabricedesre @arky sorry I haven't gotten a chance to wrap up this PR. Been traveling a little. Wondering what good next steps are here after I finish the landing page? Since I don't think it'll be fully ready to merge after.

Should we all just work on this branch, and keep adding content into it? I'll try to wrap it up asap.

[fabricedesre]

Hi @rlingineni , sorry I missed your notification. I think once the landing page is done we can switch as long as the links to other pages work, and incrementally port the few other pages to the same system as the landing page. This way we won't get blocked and get the most important page out first.

[rlingineni]

Sounds good! Sorry, the landing page and decoupling with the hugo theme is taking longer than expected. There's a lot of code that we don't own since it's from the theme, and it's making it a little more challenging. But I think I have it figured out now

I started working on a sub-branch, that I'll merge back in.

Updating to look a little more like this:

[rlingineni]

Okay feel free to try it out @fabricedesre

[fabricedesre]

That's great progress @rlingineni ! Things I really like:

• the landing page is simple and to the point.
• the UI/HTML toggle is a nice touch :)

Things to still check:

• the "search on page..." box doesn't seem to work on the home page, but works fine on other pages.
• the favicon needs to be set.
• the plausible code is not included (or I missed it).
• the matrix / twitter / mastodon / github icons are too big, we need to remove the width: auto; on the images.

[rlingineni]

Thanks for testing!!

Everything should be fixed. Last one and the first issue seemed to be related. Can you verify?

[fabricedesre]

Everything should be fixed. Last one and the first issue seemed to be related. Can you verify?

Thanks, I think the only remaining issue is searching when on front page. Eg. type "rust" in the search box, that doesn't highlight anything. But if you navigate to the quickstart page, it works.

[rlingineni]

Fixed