diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4d29575 --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/package.json b/package.json new file mode 100644 index 0000000..47cf7ab --- /dev/null +++ b/package.json @@ -0,0 +1,56 @@ +{ + "name": "hub_frontend", + "version": "0.1.0", + "private": true, + "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/material": "^5.10.14", + "@testing-library/jest-dom": "^5.14.1", + "@testing-library/react": "^13.0.0", + "@testing-library/user-event": "^13.2.1", + "@types/jest": "^27.0.1", + "@types/node": "^16.7.13", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "typescript": "^4.4.2", + "web-vitals": "^2.1.0" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ], + "rules": { + "quotes": [ + "warn", + "double", + { + "avoidEscape": true, + "allowTemplateLiterals": true + } + ] + } + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..2407da9 --- /dev/null +++ b/public/index.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + React App + + + + +
+ + + + \ No newline at end of file diff --git a/public/logo192.png b/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/public/logo512.png differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/src/App.test.tsx b/src/App.test.tsx new file mode 100644 index 0000000..414b21c --- /dev/null +++ b/src/App.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..c2a6e06 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,14 @@ +import { CssBaseline, ThemeProvider } from "@mui/material"; +import { theme } from "./utils/muiTheme"; +import Landing from "./components/landing/Landing"; + +function App() { + return ( + + + + + ); +} + +export default App; diff --git a/src/assets/card-pages-background1.png b/src/assets/card-pages-background1.png new file mode 100644 index 0000000..5dee2fb Binary files /dev/null and b/src/assets/card-pages-background1.png differ diff --git a/src/assets/card-pages-background2.png b/src/assets/card-pages-background2.png new file mode 100644 index 0000000..d1ef69c Binary files /dev/null and b/src/assets/card-pages-background2.png differ diff --git a/src/assets/card-pages-background3.png b/src/assets/card-pages-background3.png new file mode 100644 index 0000000..91158d7 Binary files /dev/null and b/src/assets/card-pages-background3.png differ diff --git a/src/assets/logo_PenaHab.svg b/src/assets/logo_PenaHab.svg new file mode 100644 index 0000000..5cd0273 --- /dev/null +++ b/src/assets/logo_PenaHab.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/pena_illustration01.png b/src/assets/pena_illustration01.png new file mode 100644 index 0000000..8c3e22b Binary files /dev/null and b/src/assets/pena_illustration01.png differ diff --git a/src/assets/pena_illustration02.png b/src/assets/pena_illustration02.png new file mode 100644 index 0000000..eef0b23 Binary files /dev/null and b/src/assets/pena_illustration02.png differ diff --git a/src/assets/pena_illustration03.png b/src/assets/pena_illustration03.png new file mode 100644 index 0000000..c26f1b0 Binary files /dev/null and b/src/assets/pena_illustration03.png differ diff --git a/src/assets/pena_illustration04.png b/src/assets/pena_illustration04.png new file mode 100644 index 0000000..a0b4b89 Binary files /dev/null and b/src/assets/pena_illustration04.png differ diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..606c4a6 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,32 @@ +import { Button as DefaultButton } from "@mui/material"; + + +interface Props { + fullWidth?: boolean; + backgroundColor?: string; + color?: string; + variant: "outlined" | "contained"; + children: React.ReactNode; +} + +export default function Button({ fullWidth = false, backgroundColor, color, variant, children }: Props) { + + return ( +
+ + {children} + +
+ ); +} diff --git a/src/components/NavMenuItem.tsx b/src/components/NavMenuItem.tsx new file mode 100644 index 0000000..c46b423 --- /dev/null +++ b/src/components/NavMenuItem.tsx @@ -0,0 +1,19 @@ +import { Link, Typography, useTheme } from "@mui/material"; + + +interface Props { + text: string; + isActive?: boolean; +} + +export default function NavMenuItem({ text, isActive = false }: Props) { + const theme = useTheme() + + return ( + + + {text} + + + ); +} \ No newline at end of file diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..e1ee202 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,49 @@ +import { Box, Button, useTheme } from "@mui/material"; +import NavMenuItem from "./NavMenuItem"; +import SectionWrapper from "./SectionWrapper"; + + +export default function Navbar() { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/SectionWrapper.tsx b/src/components/SectionWrapper.tsx new file mode 100644 index 0000000..41b4831 --- /dev/null +++ b/src/components/SectionWrapper.tsx @@ -0,0 +1,31 @@ +import { Breakpoint, Container, SxProps, Theme } from "@mui/material"; +import React, { ElementType } from "react"; + + +interface Props { + component?: ElementType; + sx?: SxProps; + innerSx: SxProps; + maxWidth?: false | Breakpoint; + children?: React.ReactNode; +} + +export default function SectionWrapper({ component, sx, innerSx, children, maxWidth }: Props) { + + return ( + + + {children} + + + ); +} \ No newline at end of file diff --git a/src/components/UnderlinedLink.tsx b/src/components/UnderlinedLink.tsx new file mode 100644 index 0000000..4939ccf --- /dev/null +++ b/src/components/UnderlinedLink.tsx @@ -0,0 +1,27 @@ +import { Link, SxProps, Theme, Typography } from "@mui/material"; + + +interface Props { + text: string; + linkHref: string; + isHighlighted?: boolean; + sx?: SxProps; +} + +export default function UnderlinedLink({ text, linkHref, isHighlighted = false, sx }: Props) { + + return ( + + {text} + + ); +} \ No newline at end of file diff --git a/src/components/landing/CardWithLink.tsx b/src/components/landing/CardWithLink.tsx new file mode 100644 index 0000000..e27cff2 --- /dev/null +++ b/src/components/landing/CardWithLink.tsx @@ -0,0 +1,61 @@ +import { Box, Typography, useTheme } from "@mui/material"; +import UnderlinedLink from "../UnderlinedLink"; + + +interface Props { + image: string; + headerText: string; + text: string; + linkHref: string; + isHighlighted?: boolean; +} + +export default function CardWithLink({ image, headerText, text, linkHref, isHighlighted = false }: Props) { + const theme = useTheme(); + + return ( + + + {headerText} + {text} + + + ); +} \ No newline at end of file diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx new file mode 100644 index 0000000..5d3f7d2 --- /dev/null +++ b/src/components/landing/Footer.tsx @@ -0,0 +1,67 @@ +import { Box, Typography, useTheme } from "@mui/material"; +import logo_PenaHab from "../../assets/logo_PenaHab.svg"; +import NavMenuItem from "../NavMenuItem"; +import SectionWrapper from "../SectionWrapper"; + + +export default function Footer() { + const theme = useTheme(); + + return ( + + + pena logo + + + + + + + + + + + + + Сервисы помогают предпринимателям, маркетологам и агентствам + сделать интернет-маркетинг прозрач + + + Конструктор маркетинговых решений. © 2022 + + ); +}; \ No newline at end of file diff --git a/src/components/landing/Infographics.tsx b/src/components/landing/Infographics.tsx new file mode 100644 index 0000000..eb85cff --- /dev/null +++ b/src/components/landing/Infographics.tsx @@ -0,0 +1,29 @@ +import { Box, Typography, useTheme } from "@mui/material"; + + +interface Props { + bigText: string; + text: string; + flex: string; +} + +export default function Infographics({ bigText, text, flex }: Props) { + const theme = useTheme(); + + return ( + + {bigText} + {text} + + ); +} \ No newline at end of file diff --git a/src/components/landing/Landing.tsx b/src/components/landing/Landing.tsx new file mode 100644 index 0000000..bff23b1 --- /dev/null +++ b/src/components/landing/Landing.tsx @@ -0,0 +1,25 @@ +import { Box, Divider } from "@mui/material"; +import Navbar from "../Navbar"; +import Footer from "./Footer"; +import Section1 from "./Section1"; +import Section2 from "./Section2"; +import Section3 from "./Section3"; +import Section4 from "./Section4"; +import Section5 from "./Section5"; + + +export default function Landing() { + + return ( + + + + + + + + +