Feature/New Landing Page

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

@@ -0,0 +1,59 @@
+.hamburger-menu {
+  position: relative;
+}
+
+.menu-button {
+  font-size: 20px;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.menu-list {
+  position: fixed;
+  top: 0;
+  z-index: 3;
+  left: calc(100vw - 250px);
+  height: 100vh;
+  width: 250px;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  transition: right 0.3s ease; 
+}
+
+.hamburger-menu.open .menu-list {
+  left: 250px;
+}
+
+.close-button {
+  font-size: 20px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  align-self: flex-end;
+}
+
+.ul {
+  list-style-type: none;
+  padding: 0;
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.li {
+  margin: 10px 0;
+}
+
+.divider {
+  margin-top: 5px;
+  border-top: 1px solid #000;
+  margin-bottom: 5px;
+}
+
+.a {
+  text-decoration: none;
+  color: #333;
+}

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

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Icon } from '@iconify/react'
+import "./index.css"
+
+interface Props {
+  menuItems: {
+    label: string;
+    link: string;
+  }[]
+  buttonsItems: React.ReactElement[] | string[];
+}
+
+export const Hamburger: React.FC<Props> = ({ menuItems, buttonsItems }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, []);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="hamburger-menu">
+      <button className="menu-button" onClick={toggleMenu}>
+        <Icon icon="ic:baseline-menu" fontSize={36} />
+      </button>
+      {isOpen && (
+        <>
+          <div className="menu-list" ref={menuRef}>
+            <ul className="ul">
+              {menuItems.map((item, index) => (
+                <li className="li" key={index}>
+                  <a className="a" href={item.link}>{item.label}</a>
+                </li>
+              ))}
+              {buttonsItems.length && (<div className='divider'></div>)}
+              {buttonsItems.length && buttonsItems.map(b => (
+                <li className="li">
+                  {b}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

src/components/Home/Navbar/index.css

@@ -0,0 +1,121 @@
+#navbar {
+  position: fixed;
+  top: 0;
+
+  z-index: 2;
+
+  mask: linear-gradient(white, black, transparent);
+  backdrop-filter: blur(16px);
+
+  width: 100%;
+  height: 144px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#navbar-small {
+  display: none;
+}
+
+#logo {
+  margin-left: 4%;
+  width: 430px;
+}
+
+#navbar>#central-links {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  gap: calc(50px);
+
+  justify-content: center;
+
+  text-wrap: nowrap;
+}
+
+#navbar>#right-buttons {
+  justify-content: 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: 1145px) and (max-width: 1368px) {  
+  #navbar>#right-buttons {
+    margin: 0;
+  }
+
+  #navbar>#central-links {
+    gap: calc(16px);
+  }
+
+  #navbar {
+    padding-right: 0%;
+  }
+}
+
+@media only screen and (max-width: 1144px) {
+  #navbar {
+    display: none;
+  }
+
+  #navbar-small {
+    position: fixed;
+    top: 0;
+
+    width: 100%;
+    height: 64px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 6%;
+  }
+
+  #logo {
+    width: auto;
+    height: 100%;
+  }
+
+  #navbar>#central-links {
+    display: none;
+  }
+
+  #navbar>#right-buttons {
+    display: none;
+  }
+}

src/components/Home/Navbar/index.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import "./index.css"
+import { Hamburger } from './Hanburger';
+import { Icon } from '@iconify/react'
+
+export const Navbar = () => {
+  const menuItems = useMemo(() => {
+    return [
+      { label: "Documentation", link: "/docs/intro" },
+      { label: "Blog", link: "/blog" },
+      { label: "Gallery", link: "/gallery" },
+      { label: "About us", link: "#contact" },
+    ]
+  }, [])
+
+  const handleClickCloud = useCallback(() => {
+    window.open("https://domino-workflows.cloud/sign-in", "_blank")
+  }, [])
+
+  const handleClickContact = useCallback(() => {
+    window.location.href = "#contact"
+  }, [])
+
+  return (
+    <>
+      <nav id="navbar-small">
+        <img id="logo" src="brand/png/main_logo.png" alt="Logo" />
+        <Hamburger
+          menuItems={menuItems}
+          buttonsItems={
+            [<button id="primary" onClick={handleClickCloud}>
+              Try cloud
+            </button>,
+            <button id="secondary" onClick={handleClickContact}>
+              Contact
+            </button>,
+            <a id="github" href="https://github.com/Tauffer-Consulting/domino" target='_blank' >
+              Github <Icon icon="fa-brands:github" fontSize={36} />
+            </a>
+            ]}
+        />
+      </nav>
+      <nav id="navbar">
+        <img id="logo" src="brand/png/main_logo.png" alt="Logo" />
+
+        <ul className='ul' id="central-links">
+          {menuItems.map(({ label, link }) =>
+            <li className='li'>
+              <a href={link}>
+                {label}
+              </a>
+            </li>
+          )}
+        </ul>
+        <ul id="right-buttons" className='ul'>
+          <li className='li'>
+            <button id="primary" onClick={handleClickCloud}>
+              Try cloud
+            </button>
+          </li>
+          <li className='li'>
+            <button id="secondary" onClick={handleClickContact}>
+              Contact
+            </button>
+          </li>
+          <li className='li'>
+            <a id="github" href="https://github.com/Tauffer-Consulting/domino" target='_blank' >
+              <Icon icon="fa-brands:github" fontSize={36} />
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </>
+  )
+}

src/components/HomepageCardsRowSession/styles.module.css → src/components/Home/OldSections/HomepageCardsRowSession/styles.module.css

@@ -44,7 +44,8 @@
 .features {
     padding-top: 2rem;
     padding-bottom: 2rem;
-    background-color: #5c6472;
+    background-color: #00B140;
+    color: white;
 }
 
 .featureSvg {

src/components/HomepageFeatures/index.tsx → src/components/Home/OldSections/HomepageFeatures/index.tsx

@@ -94,7 +94,7 @@ function Feature({ title, imageUrl, description, isImageRight, url }: { isImageR
   };
 
   return (
-    <div className="row" style={rowStyle}>
+    <div id="features" className="row" style={rowStyle}>
       {isImageRight ? (
         <div className="col col--6" style={{ paddingRight: '1rem' }}>
           <div className="text--left padding-horiz--sm">

src/components/HomepageProblemSession/index.tsx → src/components/Home/OldSections/HomepageProblemSession/index.tsx

@@ -14,17 +14,17 @@ export default function HomepageProblemSession(): JSX.Element {
         <div className={styles.textContent}>
           <p>
             Most professionals face barriers when trying to implement their ideas using data and AI.
-            At the same time, data scientists and AI experts continuously produce solutions that are often underutilized.
+            At the same time, data scientists and AI experts continuously produce solutions that are often underutilized. But with Domino:
           </p>
           <ul className={styles.bullets}>
-            <li>❌ Tools typically require basic programming skills from the start</li>
-            <li>❌ Integrating multiple tools demand solid coding expertise</li>
-            <li>❌ People don't know where to find the right tools to implement their ideas</li>
-            <li>❌ Pieces of code that would be useful to many, get buried in code repositories serving few</li>
-            <li>❌ There's no visual interface to most of that code</li>
+            <li>✅ No require programming skills for start</li>
+            <li>✅ Integration of multiple tools without coding knowledge</li>
+            <li>✅ Find the right tools to implement your ideas</li>
+            <li>✅ Pieces of code useful are available in code repositories.</li>
+            <li>✅ Visual interface</li>
           </ul>
           <p>
-            ✅ Domino is here to empower individuals with access to state-of-the-art tools,
+            Domino is here to empower individuals with access to state-of-the-art tools,
             bridging the gap between visionaries and data/AI expertise.
           </p>
         </div>