diff --git a/package.json b/package.json index 120fc85..6327f03 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "styled-components": "^5.3.5", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..04ffce0 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index aa069f2..5b58cf0 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Telegram to Notion Bot diff --git a/src/App.js b/src/App.js deleted file mode 100644 index d7991e6..0000000 --- a/src/App.js +++ /dev/null @@ -1,8 +0,0 @@ -function App() { - return ( - <> - - ); -} - -export default App; \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..197e417 --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,27 @@ +import { + BrowserRouter as Router, + Routes, + Route, + Link +} from "react-router-dom"; + +import Header from './components/Header/Header' + +import Auth from './Pages/Auth' +import Index from './Pages/Index/Index' + +function App() { + return ( + <> +
+ + + } /> + } /> + + + + ); +} + +export default App; \ No newline at end of file diff --git a/src/Pages/Auth.jsx b/src/Pages/Auth.jsx new file mode 100644 index 0000000..a6059a2 --- /dev/null +++ b/src/Pages/Auth.jsx @@ -0,0 +1,9 @@ +function Auth() { + + return ( +
+
+ ) +} + +export default Auth \ No newline at end of file diff --git a/src/Pages/Index/Index.jsx b/src/Pages/Index/Index.jsx new file mode 100644 index 0000000..eb74c82 --- /dev/null +++ b/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 ( + + + + + ) +} + +export default Index \ No newline at end of file diff --git a/src/Pages/Index/background.svg b/src/Pages/Index/background.svg new file mode 100644 index 0000000..89d7bdd --- /dev/null +++ b/src/Pages/Index/background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Pages/Index/icon (rounded borders).png b/src/Pages/Index/icon (rounded borders).png new file mode 100644 index 0000000..da6f91a Binary files /dev/null and b/src/Pages/Index/icon (rounded borders).png differ diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx new file mode 100644 index 0000000..6f871b7 --- /dev/null +++ b/src/components/Header/Header.jsx @@ -0,0 +1,58 @@ +import icon from './icon.png' +import styled from 'styled-components' + +function Header() { + + const HeaderStyles = styled.header` + + height: 15vh; + + display: flex; + align-items: center; + + padding: 0px 2vw; + + border-bottom: 1px solid #eee; + + .logotype { + display: flex; + align-items: center; + + img { + width: 80px; + height: 80px; + + margin-right: 1vw; + + &:hover { + animation: rotate-image 0.5s cubic-bezier(1.000, 0.000, 0.000, 1.000) both; + } + } + + @keyframes rotate-image { + 0% { + transform: rotate(0deg) + } + + 100% { + transform: rotate(360deg) + } + } + } + + ` + + return ( + +
+ Page icon +

Telegram to Notion Bot

+
+
+ +
+ + ) +} + +export default Header \ No newline at end of file diff --git a/src/components/Header/icon.png b/src/components/Header/icon.png new file mode 100644 index 0000000..5b4cc61 Binary files /dev/null and b/src/components/Header/icon.png differ diff --git a/src/index.js b/src/index.js index 5d4fdcf..0eb610a 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import './styles.css' + const root = ReactDOM.createRoot(document.getElementById('root')); root.render( diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..b5d68ad --- /dev/null +++ b/src/styles.css @@ -0,0 +1,20 @@ +html, body { + margin: 0; + padding: 0; +} + +body { + @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap"); + font-family: "Inter", sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +img { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/src/styles.css.map b/src/styles.css.map new file mode 100644 index 0000000..85a73d9 --- /dev/null +++ b/src/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;ACCJ;;ADEA;EACY,+FAAA;EACR,gCAAA;ACCJ;;ADEA;EACI,SAAA;ACCJ;;ADEA;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;ACCJ","file":"styles.css"} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..54a049f --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,17 @@ +html, body { + margin: 0; + padding: 0; +} + +body { + @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap'); + font-family: 'Inter', sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +img { + user-select: none; +} \ No newline at end of file