Index page done

src/Pages/Auth.jsx

@@ -0,0 +1,9 @@
+function Auth() {
+    
+    return (
+        <div className="auth">
+        </div>
+    )
+}
+
+export default Auth

src/Pages/Index/Index.jsx

@@ -0,0 +1,112 @@
+import background from './background.svg'
+import styled from "styled-components"
+
+function Index() {
+
+    const IndexStyles = styled.div`
+
+        height: calc(100vh - 15vh - 1px); //Minus header height and 1 pixel for prevent scrollbar
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+
+        aspect-ratio: 960/300;
+
+        background-image: url(${background});
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+
+        .title-list {
+
+            color: #000;
+
+            li {
+
+                display: flex;
+                align-items: flex-end;
+
+                margin-bottom: 1vh;
+                
+                a {
+
+                    width: fit-content;
+                    color: #000;
+                    text-decoration: none;
+                    
+                    &:hover h2 {
+                        text-decoration: underline!important;
+                    }
+                }
+                    
+                h2 {
+                    display: inline-block;
+                    margin: 0;
+                    font-size: 25pt;
+                }
+
+                span {
+                    display: inline-block;
+                    
+                    color: #999;
+
+                    margin-left: 1vw;
+                    margin-top: 5px;
+                    
+                    align-self: center;
+                }
+            }
+        }
+
+        .link-to-bot {
+
+            width: fit-content;
+
+            color: #fff;
+            background-color: #4797ff;
+
+            border-radius: 5px;
+
+            margin-top: 6vh;
+            margin-left: 1vw;
+            padding: 3vh 6vw;
+
+            font-size: 20pt;
+            font-weight: bold;
+            text-decoration: none;
+
+            transition: 0.4s ease-in-out;
+
+            &:hover {
+                background-color: #0088cc;
+                transition: 0.4s ease-in-out;
+            }
+        }
+    `
+
+    const listData = [
+        {text: "Free"},
+        {text: "Open Source", link: "https://github.com/FranP-code/Telegram-to-Notion-Bot"},
+        {text: "Unlimited"},
+        {text: "Forever", secondaryText: "(while I can afford it)"}
+    ]
+
+    return (
+        <IndexStyles className="index">
+            <ul className="title-list">
+                {
+                    listData.map((obj, index) => (
+                        <li key={index}>
+                            {obj.link ? <a href={obj.link} target="_blank" children={<h2>› {obj.text}</h2>} rel="noreferrer"/> : <h2>› {obj.text}</h2>}
+                            {obj.secondaryText ? <span>{obj.secondaryText}</span> : null}
+                        </li>
+                    ))
+                }
+            </ul>
+            <a className="link-to-bot" href="https://t.me/TelegrmToNotionBot" target="_blank" children="Check it out" rel="noreferrer"/>
+        </IndexStyles>
+    )
+}
+
+export default Index

src/Pages/Index/background.svg

@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 446L26.7 449.2C53.3 452.3 106.7 458.7 160 453.8C213.3 449 266.7 433 320 420C373.3 407 426.7 397 480 402.3C533.3 407.7 586.7 428.3 640 431.2C693.3 434 746.7 419 800 414.5C853.3 410 906.7 416 933.3 419L960 422L960 541L933.3 541C906.7 541 853.3 541 800 541C746.7 541 693.3 541 640 541C586.7 541 533.3 541 480 541C426.7 541 373.3 541 320 541C266.7 541 213.3 541 160 541C106.7 541 53.3 541 26.7 541L0 541Z" fill="#4797ff" stroke-linecap="round" stroke-linejoin="miter"></path></svg>