chore: first session styles improvements

src/components/Home/Navbar/Hanburger/index.css

@@ -0,0 +1,42 @@
+div#hamburger {
+  cursor: pointer;
+  position: relative;
+}
+
+.menu {
+  display: block;
+
+  position: absolute;
+  top: 100%; /* Position the menu below the icon */
+  left: 0;
+
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
+  border-radius: 4px;
+  padding: 10px;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.menu.close {
+  display: none;
+}
+
+.menuitem {
+  width: 100%;
+  text-wrap: nowrap;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media only screen and (min-width: 978px) {
+  div#hamburger {
+    display: none;
+  }
+}

src/components/Home/Navbar/Hanburger/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Icon } from '@iconify/react'
+import "./index.css"
+
+interface Props {
+  isOpen: boolean
+  size: number
+  toggle: React.Dispatch<React.SetStateAction<boolean>>
+  menuItems: {
+    label: string;
+    link: string;
+  }[]
+}
+
+export const Hamburger: React.FC<Props> = ({ isOpen, size, toggle, menuItems }) => {
+
+  const handleIconClick = () => {
+    toggle(!isOpen);
+  };
+
+  return (
+    <div id="hamburger" onClick={handleIconClick}>
+      <Icon icon="ic:baseline-menu" fontSize={size} />
+      <div className={isOpen ? 'menu' : 'menu close'}>
+        {menuItems.map(({ label, link }) => (
+          <div className="menuitem">
+            <a href={link}>{label}</a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

src/components/Home/Navbar/index.css

@@ -0,0 +1,111 @@
+#navbar {
+  position: fixed;
+  top: 0;
+
+  z-index: 999;
+
+  mask: linear-gradient(black, black, transparent);
+  backdrop-filter: blur(16px);
+
+  width: 100%;
+  height: 144px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#navbar>#logo {
+  margin-left: 4%;
+  width: 430px;
+}
+
+#navbar>#central-links {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  gap: calc(50px);
+
+  text-wrap: nowrap;
+}
+
+#navbar>#right-buttons {
+  justify-self: flex-end;
+  margin-right: 6%;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  gap: calc(8px);
+}
+
+ul {
+  padding: 0px;
+  margin-bottom: 0;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+li>a {
+  font-size: 20px;
+  font-weight: 500;
+  color: #101820;
+}
+
+a#github {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media only screen and (min-width: 979px) and (max-width: 1368px) {  
+  #navbar>#right-buttons {
+    display: none;
+  }
+
+  #navbar>#central-links {
+    gap: calc(16px);
+  }
+
+  #navbar {
+    padding-right: 6%;
+  }
+}
+
+@media only screen and (max-width: 978px) {
+  #navbar {
+    position: fixed;
+    top: 0;
+
+    width: 100%;
+    height: 64px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 6%;
+  }
+
+  #navbar>#logo {
+    width: auto;
+    height: 100%;
+  }
+
+  #navbar>#central-links {
+    display: none;
+  }
+
+  #navbar>#right-buttons {
+    display: none;
+  }
+}

src/components/Home/Navbar/index.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo, useState } from 'react'
+import "./index.css"
+import { Hamburger } from './Hanburger';
+import { Icon } from '@iconify/react'
+
+export const Navbar = () => {
+
+  const [isOpen,setIsOpen] = useState(false);
+
+  const menuItems = useMemo(()=>{
+    return [
+      {label:"Documentation", link:"#session-1"},
+      {label:"Blog", link:"#session-2"},
+      {label:"Gallery", link:"#session-3"},
+      {label:"About us", link:"#"},
+    ]
+  },[])
+
+
+  return (
+    <nav id="navbar">
+      <img id="logo" src="brand/png/main_logo.png" alt="Logo" />
+
+      <Hamburger 
+        isOpen={isOpen} 
+        size={36} 
+        toggle={setIsOpen} 
+        menuItems={menuItems}
+      />
+
+      <ul id="central-links">
+        {menuItems.map(({label,link})=>
+          <li>
+            <a href={link}>
+              {label}
+            </a>
+          </li>
+        )}
+      </ul>
+      <ul id="right-buttons">
+        <li>
+          <button id="primary">
+            Try cloud
+          </button>
+        </li>
+        <li>
+          <button id="secondary">
+            Contact
+          </button>
+        </li>
+        <li>
+          <a id="github">
+            <Icon icon="fa-brands:github" fontSize={36} />
+          </a>
+        </li>
+      </ul>
+    </nav>
+  )
+}

src/components/Home/Session1/Frame/index.css

@@ -0,0 +1,72 @@
+div#gif-container {
+  flex: 1;
+  width: 100%;
+  --aspect-ratio: 16/8;
+}
+
+div#gif-container>div#rectangle {
+  position: relative;
+  width: 100%;
+
+  background: #F6F6F6;
+  box-shadow: 124px 27px 51px rgba(0, 0, 0, 0.01), 70px 15px 43px rgba(0, 0, 0, 0.05), 31px 7px 32px rgba(0, 0, 0, 0.09), 8px 2px 17px rgba(0, 0, 0, 0.1);
+
+  border-radius: 29px 29px 8px 8px;
+}
+
+div#gif-container>div#rectangle::before {
+  content: "";
+  height: 0;
+  float: left;
+  padding-bottom: calc(100% / (var(--aspect-ratio)));
+}
+
+div#gif-container>div#rectangle::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+div#rectangle>div#ellipse {
+  position: absolute;
+  border-radius: 50%;
+  width: 12.6px;
+  height: 12.6px;
+}
+
+div#ellipse.red {
+  top: 14px;
+  left: 24px;
+  background: #FF5E57;
+}
+
+div#ellipse.yellow {
+  top: 14px;
+  left: 44px;
+  background: #FEBB2D;
+}
+
+div#ellipse.green {
+  top: 14px;
+  left: 64px;
+  background: #28C840;
+}
+
+div#rectangle>img#gif {
+  width: 100%;
+  padding: 40px 10px 10px 10px;
+  border-radius: 4px;
+}
+
+[style*="--aspect-ratio"]::before {
+  content: "";
+  height: 0;
+  float: left;
+  padding-bottom: calc(100% / (var(--aspect-ratio)));
+}
+
+[style*="--aspect-ratio"]::after {
+  content: "";
+  display: block;
+  clear: both;
+}

src/components/Home/Session1/Frame/index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react'
+import "./index.css"
+
+export const Frame = () => {
+  return (
+    <div id="gif-container">
+      <div id="rectangle" >
+        <div id="ellipse" className='red' />
+        <div id="ellipse" className='yellow' />
+        <div id="ellipse" className='green' />
+        <img id="gif" src="img/intro/gif-example.gif" />
+      </div>
+    </div>
+  )
+}