diff --git a/components/Footer.tsx b/components/Footer.tsx new file mode 100644 index 0000000..41e6558 --- /dev/null +++ b/components/Footer.tsx @@ -0,0 +1,30 @@ +import { Box, Stack, Typography } from "@mui/material" +import { GitHub } from '@mui/icons-material' +import MuiNextLink from "./MuiNextLink" + +const Footer = () => { + return ( + + + + + + + + Coded with ❤️️ by IakMastro + + + ) +} + +export default Footer \ No newline at end of file diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 0000000..f00b569 --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,47 @@ +import AppBar from '@mui/material/AppBar' +import Container from '@mui/material/Container' +import Toolbar from '@mui/material/Toolbar' +import IconButton from '@mui/material/IconButton' +import Home from '@mui/icons-material/Home' +import { styled } from '@mui/system' +import MuiNextLink from '@components/MuiNextLink' +import Navbar from '@components/Navbar' +import SideDrawer from '@components/SideDrawer' + +const Offset = styled("div")(({ theme }) => theme.mixins.toolbar) + +const navLinks = [ + { title: `home`, path: '/' }, + { title: `about`, path: '/about' }, +] + +const Header = () => { + return ( + <> + + + + + + theme.palette.common.white, + }} + fontSize="large" + /> + + + + + + + + + + ) +} + +export default Header \ No newline at end of file diff --git a/components/Hero.tsx b/components/Hero.tsx new file mode 100644 index 0000000..f9238cf --- /dev/null +++ b/components/Hero.tsx @@ -0,0 +1,68 @@ +import Grid from '@mui/material/Grid' +import Image from "next/image" +import Typography from '@mui/material/Typography' +import ArrowDownward from "@mui/icons-material/ArrowDownward" + +const Hero = ({ imgSrc, imgAlt, title, subtitle }) => { + return ( + + {imgAlt} + + + + {title} + + + {subtitle} + + + Scroll + + + + + + ) +} + +export default Hero \ No newline at end of file diff --git a/components/MuiNextLink.tsx b/components/MuiNextLink.tsx new file mode 100644 index 0000000..2999c1e --- /dev/null +++ b/components/MuiNextLink.tsx @@ -0,0 +1,71 @@ +import * as React from "react" +import clsx from 'clsx' +import { useRouter } from 'next/router' +import NextLink from 'next/link' +import MuiLink from '@mui/material/Link' + +export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props: any, ref) { + const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } = props + + return ( + + + + ) +}) + +// A styled version of the Next.js Link component: +// https://nextjs.org/docs/#with-link +const Link = React.forwardRef(function Link(props: any, ref) { + const { + activeClassName = "active", + as: linkAs, + className: classNameProps, + href, + noLinkStyle, + role, // Links don't have roles. + ...other + } = props + + const router = useRouter() + const pathname: string = typeof href === "string" ? href : href.pathname + const className = clsx(classNameProps, { + [activeClassName]: router.pathname === pathname && activeClassName, + }) + + const isExternal: boolean = typeof href === "string" && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0) + + if (isExternal) { + if (noLinkStyle) { + return + } + + return + } + + if (noLinkStyle) { + return + } + + return ( + + ) +}) + +export default Link \ No newline at end of file diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..0a8f75b --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,29 @@ +import Stack from "@mui/material/Stack" +import Toolbar from "@mui/material/Toolbar" +import MuiNextLink from "@components/MuiNextLink" + +const Navbar = ({ navLinks }) => { + return ( + + + {navLinks.map(({ title, path }, i: string) => ( + + {title} + + ))} + + + ) +} + +export default Navbar \ No newline at end of file diff --git a/components/SectionAbout.tsx b/components/SectionAbout.tsx new file mode 100644 index 0000000..6c92ead --- /dev/null +++ b/components/SectionAbout.tsx @@ -0,0 +1,36 @@ +import { Button, Container, Grid, Typography } from "@mui/material" +import Image from "next/image" +import MuiNextLink from "./MuiNextLink" + +const SectionAbout = () => { + return ( + + + + An image containing plots in front of a screen showing all of the world! + + + + Maintain your Swarm simple and fast! + + + Create the Swarm of your dream using our platform! Use whatever you want, however you want simple, fast and system agnostic. Now, your application can exist in many different locations through the whole world for free! + + + + + + + + ) +} + +export default SectionAbout \ No newline at end of file diff --git a/components/SideDrawer.tsx b/components/SideDrawer.tsx new file mode 100644 index 0000000..578ed96 --- /dev/null +++ b/components/SideDrawer.tsx @@ -0,0 +1,76 @@ +import Box from "@mui/material/Box" +import Typography from "@mui/material/Typography" +import Drawer from "@mui/material/Drawer" +import IconButton from "@mui/material/IconButton" +import Menu from "@mui/icons-material/Menu" +import MuiNextLink from "@components/MuiNextLink" +import { useState } from "react" + +const SideDrawer = ({ navLinks }) => { + const [state, setState] = useState({ + right: false, + }) + + const toggleDrawer = (anchor, open) => (event) => { + if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) { + return ; + } + + setState({...state, [anchor]: open}) + } + + const list = (anchor) => ( + + {navLinks.map(({ title, path }, i) => ( + + + {title} + + + ))} + + ) + + return ( + <> + + + + + { list("right") } + + + ) +} + +export default SideDrawer \ No newline at end of file diff --git a/package.json b/package.json index 0b82978..a9621fb 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,13 @@ "lint": "next lint" }, "dependencies": { + "@emotion/cache": "^11.7.1", + "@emotion/react": "^11.7.1", + "@emotion/server": "^11.4.0", + "@emotion/styled": "^11.6.0", + "@mui/icons-material": "^5.0.0-rc.1", + "@mui/material": "^5.0.0-rc.1", + "clsx": "^1.1.1", "next": "12.0.10", "react": "17.0.2", "react-dom": "17.0.2" diff --git a/pages/_app.tsx b/pages/_app.tsx index 3f5c9d5..f01fee3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,8 +1,34 @@ +import Head from 'next/head' import '../styles/globals.css' -import type { AppProps } from 'next/app' +import createEmotionCache from '../styles/createEmotionCache' +import { EmotionCache } from '@emotion/cache' +import { CacheProvider, ThemeProvider } from '@emotion/react' +import Header from '@components/Header' -function MyApp({ Component, pageProps }: AppProps) { - return +import '../styles/globals.css' +import theme from '../styles/theme' +import { CssBaseline } from '@mui/material' +import Footer from '@components/Footer' + +const clientSideEmotionCache: EmotionCache = createEmotionCache() + +function MyApp(props: any) { + const { Component, emotionCache = clientSideEmotionCache, pageProps } = props + + return ( + + + Project FaaS + + + + +
+ +