Twindle: Enhancing the twindle-web Landing page

[Akshay2996]

We are going make twindle-web look more exciting & user friendly using just Html, CSS & a little bit of JavaScript

• Right now our initial design looks like this:

• We are taking inspiration from Notion website. Do check it out

Tasks

• [ ] Make the background look minimal & cool like Notion. Use this site as a reference for background: HappyHues

• [x] Make the footer's background transparent

• [x] Make use of CSS variables in the :root pseudo class for globally assigning properties in the CSS

PS: If you want to add anything feel free to mention in this issue. When we contribute together we make a great Product

[johnjacobkenny]

I can give this a try if I can have a copy of our Figma design by Joel. Could someone point me in the right direction if that is the way we want to take this?

[frankiefab100]

The design looks good. Is this the one we are going to implement or is there any other?

[Akshay2996]

@frankiefab100 We are making some modifications in the design & making it better If you feel like contributing contact me, @UnevenCoder or @vijaya-bhaskar for more information.

Just follow this issue for the same too.

[PuruVJ]

One recommendation from my side. I've worked with CSS variables theming, and ultimately, we're gonna introduce that sometime, so my recommendation is to add the CSS variables to the body element, with classes like light, dark.

Demo: My site https://puruvj.dev/hello Click on the theming button on top right to see the effect. (It's intentionally the 404 page)

Source: https://github.com/PuruVJ/puruvjdev2/blob/main/static/css/themes.css

[Akshay2996]

ToDo Tasks

Priority given to the Task in the Descending order

For now, We need to focus on these tasks & along the way we can update the tasks accordingly

• [x] Testimonials - (Ameen & Titi)
• [ ] Illustrations needed - (Everybody)
• [x] Email Signup goes to Excel - (Saurabh)
• [ ] Fonts to be adjusted to be uniform - (Joel, Titi) {CSS Variables}
• [ ] Better footer section - (Vijaya & Akshay)
• [ ] Responsive design (Mobile) - (Melissa)
• [ ] Teams Page (Separate than landing page) - (Ameen & Akshay)

For Illustrations see these sites:

• Undraw
• FreePik
• ls.graphics
• Lotte Files

PS: For reference see the illustration Animated GIF

[Akshay2996]

Important for Everyone

• Make use of Flex in the sections for responsive design. No need to use Grid.
• Use rem or em unit in fonts, margins, paddings & avoid using pixel (px) in it.
• Use CSS variables to assign a value in the :root selector to avoid repetition.