Landing Page

[Preet-Sojitra]

Since we have basic landing page. So let's add some content to it and take it to next level. So @ayoayco what are your thoughts and plans?

[ayoayco]

Great that you asked, @Preet-Sojitra! Let me give the actual content some thought. I'll get back to you on this thread.

My initial idea was that the header section needs to be updated so that we have two "call to actions" (like in https://mui.com):

1. Get Started (primary button)
2. install text copy field

That could be a good start. Let us also know if you have ideas! Thanks for starting the thread 🧵

[ayoayco]

Created an issue for the Call to Action buttons #115

[Lalit3716]

We should improve responsiveness of the landing page right now it doesn't look good on mobile devices!

[ayoayco]

i did not notice this. can you create an issue to describe the task? really good observation.

[ayoayco]

By the way we have some logos inside .github/assets directory. so i guess we can start using those, but they are not good on dark background i think.

So another thing to do could be to make logo variants that are good for light and dark backgrounds.

[ayoayco]

I'm writing an issue for the landing page content 🚀

[Preet-Sojitra]

Currently copy to clipboard symbol is not working. It is just a icon. So why not create a issue regarding that?

[ayoayco]

Ah yeah, good idea. Can you create the issue @Preet-Sojitra 🙏🙏🙏

[Preet-Sojitra]

Ah yeah, good idea. Can you create the issue @Preet-Sojitra 🙏🙏🙏

Sure 👍

[ayoayco]

By the way I'm also getting a domain to deploy this when it's ready :)

[Preet-Sojitra]

Woaahh!! Nicee 👍

[ayoayco]

Launched! https://astro-reactive.dev

[ayoayco]

Landing Page initial content

Hi guys, here's an idea for our landing page content. In issue #132 I want to explore using Solid.js for reactivity, so (being optimistic that it will be successful) I want to communicate this on our landing page. Please let me know what you think!

Four sections:

1. Main section (the first one you see with the call to action)
2. Astro section
3. Solid.js section
4. Footer

Main section

1. Copy: Native Astro components for building REACTIVE user interfaces
2. Call to action buttons: "Get Started" and "Copy installation text"
3. Header bar: Logo, "Astro Reactive" title
4. GH stars + social icon links
   • this will turn into a nav bar when the user scrolls down
5. Animated logos of Astro Reactive Library, Astro, and Solid.js
   • animation is: Astro and Solid.js logos revolving around our library's logo

Astro section

1. Title: "Native Astro Components"
2. one-sentence description, use lorem ipsum for now
3. placeholder for Images/icons indicating benefits of Astro components

Solid.js section

1. Title: "Reactivity powered by Solid.js"
2. one-sentence description, use lorem ipsum for now
3. placeholder for an image/animation that shows components reacting to events

Footer

1. show call-to-action buttons
2. GH stars + social icon links

[Lalit3716]

It looks good one doubt though currently our main section bg is dark but according to your image you want it to be light?

Also I can make Astro section or Solid section.

[ayoayco]

Yes I want to start with a light bg Main section.

So the current dark bg will be for the Astro section. I think that is more in line with their branding.

And having a light bg main section communicates a bit more "seriousness" and "reliability" for our library which I want to achieve for targeting enterprises as users.

[ayoayco]

If good and clear we can have a separate issue for each section! 🚀

[Preet-Sojitra]

Yes I want to start with a light bg Main section.

So the current dark bg will be for the Astro section. I think that is more in line with their branding.

And having a light bg main section communicates a bit more "seriousness" and "reliability" for our library which I want to achieve for targeting enterprises as users.

For main section, have you thought of any color palette for light bg? If not I can work on finding some good color palette for light bg.
Huemint is the tool which I used for finding some good color palette.

[ayoayco]

Awesome! @Preet-Sojitra works on the main section. And I think @Lalit3716 said he can take the Astro section. Can you guys create separate issues? Don't worry about filling up the template you can just link to this discussion.

[ayoayco]

I made a mess of our landing page to make it a bit more presentable for now. 🤪

[Lalit3716]

Awesome!

[ayoayco]

Ahhhh I think I broke the copy button thing 😱

[Lalit3716]

Ah oh, yup it's not working 😨

[ayoayco]

Fixed it! 💪 #187

[Lalit3716]

Awesome! now only thing remaining is this #197 for copy button.