├── src ├── theme.js ├── commonStyles.js ├── assets │ ├── logo │ │ ├── logo.png │ │ ├── logo_croped.png │ │ └── logo_nobrand.png │ ├── pictures │ │ ├── website1.png │ │ ├── company_team.jpg │ │ ├── profile_picture_1.jpg │ │ ├── profile_picture_2.jpg │ │ ├── profile_picture_3.jpg │ │ └── profile_picture_4.jpeg │ └── illustrations │ │ ├── settings.png │ │ ├── bug_fixed.png │ │ ├── mobile_phone.png │ │ ├── authentication.png │ │ ├── rocket_launch_.png │ │ ├── web_development_.png │ │ └── campaign_launch_flatline.png ├── App.js ├── setupTests.js ├── components │ ├── sectionTitle │ │ └── index.jsx │ ├── marginer │ │ └── index.jsx │ ├── button │ │ └── index.jsx │ ├── downArrow │ │ └── index.jsx │ ├── navbar │ │ └── index.jsx │ ├── logo │ │ └── index.jsx │ ├── ourService │ │ └── index.jsx │ ├── reviewCard │ │ └── index.jsx │ └── footer │ │ └── index.jsx ├── App.test.js ├── index.js ├── index.css ├── App.css ├── containers │ └── homepage │ │ ├── index.jsx │ │ ├── servicesSection.jsx │ │ ├── moreAboutSection.jsx │ │ ├── topSection.jsx │ │ └── reviewsSection.jsx ├── logo.svg └── serviceWorker.js ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/theme.js: -------------------------------------------------------------------------------- 1 | export const theme = { 2 | primary: "#00B997", 3 | }; 4 | -------------------------------------------------------------------------------- /src/commonStyles.js: -------------------------------------------------------------------------------- 1 | export const theme = { 2 | primary: "#00B997", 3 | }; 4 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/assets/logo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/logo/logo.png -------------------------------------------------------------------------------- /src/assets/logo/logo_croped.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/logo/logo_croped.png -------------------------------------------------------------------------------- /src/assets/logo/logo_nobrand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/logo/logo_nobrand.png -------------------------------------------------------------------------------- /src/assets/pictures/website1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/pictures/website1.png -------------------------------------------------------------------------------- /src/assets/illustrations/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/illustrations/settings.png -------------------------------------------------------------------------------- /src/assets/pictures/company_team.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/pictures/company_team.jpg -------------------------------------------------------------------------------- /src/assets/illustrations/bug_fixed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/illustrations/bug_fixed.png -------------------------------------------------------------------------------- /src/assets/illustrations/mobile_phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/illustrations/mobile_phone.png -------------------------------------------------------------------------------- /src/assets/pictures/profile_picture_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/pictures/profile_picture_1.jpg -------------------------------------------------------------------------------- /src/assets/pictures/profile_picture_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/pictures/profile_picture_2.jpg -------------------------------------------------------------------------------- /src/assets/pictures/profile_picture_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/pictures/profile_picture_3.jpg -------------------------------------------------------------------------------- /src/assets/pictures/profile_picture_4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/pictures/profile_picture_4.jpeg -------------------------------------------------------------------------------- /src/assets/illustrations/authentication.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/illustrations/authentication.png -------------------------------------------------------------------------------- /src/assets/illustrations/rocket_launch_.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/illustrations/rocket_launch_.png -------------------------------------------------------------------------------- /src/assets/illustrations/web_development_.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/illustrations/web_development_.png -------------------------------------------------------------------------------- /src/assets/illustrations/campaign_launch_flatline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pokemon918/Smooth-React-Responsive-Website/HEAD/src/assets/illustrations/campaign_launch_flatline.png -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import { Homepage } from "./containers/homepage"; 4 | 5 | function App(props) { 6 | return ; 7 | } 8 | 9 | export default App; 10 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /src/components/sectionTitle/index.jsx: -------------------------------------------------------------------------------- 1 | const { default: styled } = require("styled-components"); 2 | 3 | export const SectionTitle = styled.h1` 4 | font-size: 34px; 5 | font-weight: bold; 6 | color: #000; 7 | 8 | @media screen and (max-width: 480px) { 9 | text-align: center; 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | padding: 0; 10 | font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", 11 | "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 12 | sans-serif; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | code { 18 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 19 | monospace; 20 | } 21 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/marginer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components/macro"; 3 | 4 | const HorizontalMargin = styled.span` 5 | display: flex; 6 | width: ${({ margin }) => 7 | typeof margin === "string" ? margin : `${margin}px`}; 8 | `; 9 | 10 | const VerticalMargin = styled.span` 11 | display: flex; 12 | height: ${({ margin }) => 13 | typeof margin === "string" ? margin : `${margin}px`}; 14 | `; 15 | 16 | function Marginer(props) { 17 | const { direction } = props; 18 | 19 | if (direction === "horizontal") return ; 20 | else { 21 | return ; 22 | } 23 | } 24 | 25 | Marginer.defaultProps = { 26 | direction: "horizontal", 27 | }; 28 | 29 | export { Marginer }; 30 | -------------------------------------------------------------------------------- /src/components/button/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { theme } from "../../theme"; 4 | 5 | const ButtonWrapper = styled.button` 6 | padding: ${({ small }) => (small ? "5px 8px" : "7px 15px")}; 7 | border-radius: 5px; 8 | background-color: ${theme.primary}; 9 | color: #fff; 10 | font-weight: bold; 11 | font-size: ${({ small }) => (small ? "12px" : "16px")}; 12 | outline: none; 13 | border: 2px solid transparent; 14 | transition: all 220ms ease-in-out; 15 | cursor: pointer; 16 | 17 | &:hover { 18 | background-color: transparent; 19 | border: 2px solid ${theme.primary}; 20 | } 21 | `; 22 | 23 | export function Button(props) { 24 | return {props.children}; 25 | } 26 | -------------------------------------------------------------------------------- /src/containers/homepage/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { Footer } from "../../components/footer"; 4 | import { Marginer } from "../../components/marginer"; 5 | import { MoreAboutSection } from "./moreAboutSection"; 6 | import { ReviewsSection } from "./reviewsSection"; 7 | import { ServicesSection } from "./servicesSection"; 8 | import { TopSection } from "./topSection"; 9 | 10 | const PageContainer = styled.div` 11 | width: 100%; 12 | height: 100%; 13 | display: flex; 14 | flex-direction: column; 15 | `; 16 | 17 | export function Homepage(props) { 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |