├── public
├── robots.txt
├── favicon.ico
├── logo192.png
├── logo512.png
├── images
│ ├── hero.png
│ ├── image 1.png
│ ├── image 2.png
│ ├── image 3.png
│ ├── hero-guy-1.png
│ ├── hero-pattern-bg.png
│ ├── hero-pattern-bg-lg.png
│ ├── companies
│ │ ├── netflix.svg
│ │ ├── tesla.svg
│ │ ├── apple.svg
│ │ ├── amazon.svg
│ │ ├── facebook.svg
│ │ ├── youtube.svg
│ │ ├── airbnb.svg
│ │ ├── microsoft.svg
│ │ ├── disney.svg
│ │ ├── google.svg
│ │ └── coca-cola.svg
│ ├── logo.svg
│ └── content
│ │ ├── lost.svg
│ │ ├── landing-page.svg
│ │ ├── undraw_To_the_stars_qhyy.svg
│ │ ├── alien.svg
│ │ ├── rocket.svg
│ │ └── ecommerce.svg
├── manifest.json
└── index.html
├── src
├── index.js
├── data
│ ├── NavbarData.js
│ ├── ClientsData.js
│ ├── FeaturesData.js
│ └── HeroData.js
├── App.js
├── pages
│ └── HomePage.js
├── components
│ ├── Form
│ │ ├── validateForm.js
│ │ ├── FormStyles.js
│ │ └── Form.js
│ ├── Modal
│ │ ├── ModalStyles.js
│ │ └── Modal.js
│ ├── Features
│ │ ├── Features.js
│ │ └── FeaturesStyles.js
│ ├── Clients
│ │ ├── Clients.js
│ │ └── ClientsStyles.js
│ ├── Footer
│ │ ├── Footer.js
│ │ └── FooterStyles.js
│ ├── Navbar
│ │ ├── Navbar.js
│ │ └── NavbarStyles.js
│ ├── Hero
│ │ ├── Hero.js
│ │ └── HeroStyles.js
│ └── Content
│ │ ├── Content.js
│ │ └── ContentStyles.js
└── globalStyles.js
├── .gitignore
├── package.json
└── README.md
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/logo512.png
--------------------------------------------------------------------------------
/public/images/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/images/hero.png
--------------------------------------------------------------------------------
/public/images/image 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/images/image 1.png
--------------------------------------------------------------------------------
/public/images/image 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/images/image 2.png
--------------------------------------------------------------------------------
/public/images/image 3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/images/image 3.png
--------------------------------------------------------------------------------
/public/images/hero-guy-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/images/hero-guy-1.png
--------------------------------------------------------------------------------
/public/images/hero-pattern-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/images/hero-pattern-bg.png
--------------------------------------------------------------------------------
/public/images/hero-pattern-bg-lg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itSatoriCode/react-design-website/HEAD/public/images/hero-pattern-bg-lg.png
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(
6 | <>
7 |
8 | ,
9 | document.getElementById('root')
10 | );
11 |
--------------------------------------------------------------------------------
/src/data/NavbarData.js:
--------------------------------------------------------------------------------
1 | export const navbarData = [
2 | {
3 | to: 'about',
4 | text: 'About',
5 | },
6 | {
7 | to: 'clients',
8 | text: 'Clients',
9 | },
10 | {
11 | to: 'projects',
12 | text: 'Projects',
13 | },
14 | ];
15 |
--------------------------------------------------------------------------------
/src/data/ClientsData.js:
--------------------------------------------------------------------------------
1 | export const clientsData = [
2 | [{ name: 'airbnb' }],
3 | [{ name: 'amazon' }, { name: 'apple' }],
4 | [{ name: 'coca-cola' }, { name: 'youtube' }, { name: 'google' }],
5 | [{ name: 'microsoft' }, { name: 'netflix' }],
6 | [{ name: 'facebook' }],
7 | ];
8 |
--------------------------------------------------------------------------------
/.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/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import GlobalStyle from './globalStyles';
3 | import HomePage from './pages/HomePage';
4 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
5 | import Navbar from './components/Navbar/Navbar';
6 | import Footer from './components/Footer/Footer';
7 |
8 | function App() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/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/pages/HomePage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Clients from '../components/Clients/Clients';
3 | import Content from '../components/Content/Content';
4 | import Features from '../components/Features/Features';
5 | import Hero from '../components/Hero/Hero';
6 | import { heroOne, heroTwo, heroThree, heroFour } from '../data/HeroData';
7 | import { Heading } from '../globalStyles';
8 |
9 | const HomePage = () => {
10 | return (
11 | <>
12 |
13 |
14 |
15 | Our Projects
16 |
17 |
18 |
19 |
20 |
21 | );
22 | };
23 |
24 | export default HomePage;
25 |
--------------------------------------------------------------------------------
/src/components/Form/validateForm.js:
--------------------------------------------------------------------------------
1 | export default function validateForm({ name, email, subject, message }) {
2 | if (!name.trim()) {
3 | return 'Username required';
4 | }
5 |
6 | const regex =
7 | /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
8 | if (!email) {
9 | return 'Email required';
10 | } else if (regex.test(email.toLocalLowerCase)) {
11 | return 'Email address is invalid';
12 | }
13 | if (!subject) {
14 | return 'Subject is required';
15 | } else if (subject.length < 3) {
16 | return 'Subject needs to be 3characters or more';
17 | }
18 |
19 | if (!message) {
20 | return 'Message subject is required';
21 | }
22 | return null;
23 | }
24 |
--------------------------------------------------------------------------------
/src/globalStyles.js:
--------------------------------------------------------------------------------
1 | import styled, { createGlobalStyle } from 'styled-components';
2 |
3 | const GlobalStyle = createGlobalStyle`
4 | * {
5 | box-sizing: border-box;
6 | margin: 0;
7 | padding: 0;
8 | font-family: 'Montserrat', sans-serif;
9 | }
10 | `;
11 |
12 | export const Container = styled.div`
13 | width: 100%;
14 | max-width: 1300px;
15 | margin: 0 auto;
16 | padding: 0 50px;
17 |
18 | @media screen and (max-width: 960px) {
19 | padding: 0 30px;
20 | }
21 | `;
22 |
23 | export const Section = styled.div`
24 | color: #fff;
25 | padding: 160px 0;
26 | `;
27 |
28 | export const Heading = styled.h2`
29 | margin-bottom: 1.4rem;
30 | font-size: 3rem;
31 | text-align: center;
32 | line-height: 1.1;
33 | font-weight: 600;
34 | color: ${({ lightText }) => (lightText ? '#f7f8fa' : '1c2237')};
35 | `;
36 |
37 | export default GlobalStyle;
38 |
--------------------------------------------------------------------------------
/src/components/Modal/ModalStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { MdClose } from 'react-icons/md';
3 | import { motion } from 'framer-motion';
4 |
5 | export const Background = styled(motion.div)`
6 | width: 100%;
7 | height: 100%;
8 | background: rgba(0, 0, 0, 0.8);
9 | top: 0;
10 | left: 0;
11 | position: fixed;
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 | z-index: 99;
16 | `;
17 |
18 | export const ModalWrapper = styled(motion.div)`
19 | width: clamp(400px, 90vw, 800px);
20 | height: 90vh;
21 | box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
22 | background: #fff;
23 | color: #000;
24 | display: flex;
25 | position: relative;
26 | overflow: scroll;
27 | border-radius: 10px;
28 | z-index: 100;
29 | `;
30 |
31 | export const CloseModalButton = styled(MdClose)`
32 | cursor: pointer;
33 | position: absolute;
34 | top: 20px;
35 | right: 20px;
36 | width: 32px;
37 | height: 32px;
38 | padding: 0;
39 | z-index: 10;
40 | `;
41 |
--------------------------------------------------------------------------------
/public/images/companies/netflix.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Features/Features.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Container } from '../../globalStyles';
3 | import {
4 | FeatureText,
5 | FeatureSection,
6 | FeatureTitle,
7 | FeatureWrapper,
8 | FeatureColumn,
9 | FeatureImageWrapper,
10 | FeatureName,
11 | FeatureTextWrapper,
12 | } from './FeaturesStyles';
13 |
14 | import { featuresData } from '../../data/FeaturesData';
15 |
16 | const Features = () => {
17 | return (
18 |
19 |
20 |
21 | What We Do
22 |
23 |
24 | {featuresData.map((el, index) => (
25 |
26 |
27 | {el.icon}
28 |
29 | {el.name}
30 | {el.description}
31 |
32 | ))}
33 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default Features;
40 |
--------------------------------------------------------------------------------
/src/components/Clients/Clients.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Container } from '../../globalStyles';
3 | import {
4 | ClientSection,
5 | ClientColumn,
6 | ClientText,
7 | ClientTitle,
8 | ClientRow,
9 | ClientWrapper,
10 | ClientImage,
11 | ClientTextWrapper,
12 | } from './ClientsStyles';
13 | import { clientsData } from '../../data/ClientsData';
14 |
15 | const Clients = () => {
16 | return (
17 |
18 |
19 |
20 | Our Clients
21 | We’ve been working with the teams around the world.
22 |
23 |
24 |
25 | {clientsData.map((clients, clientsIndex) => (
26 |
27 | {clients.map((el, index) => (
28 |
29 |
30 |
31 | ))}
32 |
33 | ))}
34 |
35 |
36 |
37 | );
38 | };
39 |
40 | export default Clients;
41 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-design-website",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.3.2",
8 | "@testing-library/user-event": "^7.1.2",
9 | "framer-motion": "^4.1.17",
10 | "react": "^16.13.1",
11 | "react-dom": "^16.13.1",
12 | "react-icons": "^3.10.0",
13 | "react-intersection-observer": "^8.32.1",
14 | "react-router-dom": "^5.2.0",
15 | "react-scripts": "3.4.2",
16 | "react-scroll": "^1.8.3",
17 | "react-tilt": "^0.1.4",
18 | "styled-components": "^5.1.1"
19 | },
20 | "scripts": {
21 | "start": "react-scripts start",
22 | "build": "react-scripts build",
23 | "test": "react-scripts test",
24 | "eject": "react-scripts eject"
25 | },
26 | "eslintConfig": {
27 | "extends": [
28 | "react-app",
29 | "react-app/jest"
30 | ]
31 | },
32 | "browserslist": {
33 | "production": [
34 | ">0.2%",
35 | "not dead",
36 | "not op_mini all"
37 | ],
38 | "development": [
39 | "last 1 chrome version",
40 | "last 1 firefox version",
41 | "last 1 safari version"
42 | ]
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/public/images/companies/tesla.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FaFacebook, FaInstagram, FaYoutube, FaTwitter } from 'react-icons/fa';
3 | import {
4 | FooterContainer,
5 | FooterSubscription,
6 | FooterSubHeading,
7 | SocialMedia,
8 | SocialMediaWrap,
9 | SocialLogo,
10 | SocialIcon,
11 | WebsiteRights,
12 | SocialIcons,
13 | SocialIconLink,
14 | } from './FooterStyles';
15 |
16 | const Footer = () => {
17 | return (
18 |
19 |
20 |
21 |
22 | esignify
23 |
24 | Interested working with us?
25 |
26 |
27 |
28 |
29 | © Copyright 2021, Designify. All Rights Reserved
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | );
48 | };
49 |
50 | export default Footer;
51 |
--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { CgMenuRight } from 'react-icons/cg';
3 | import { FaTimes } from 'react-icons/fa';
4 | import { IconContext } from 'react-icons';
5 | import {
6 | Nav,
7 | NavbarContainer,
8 | NavLogo,
9 | NavIcon,
10 | MobileIcon,
11 | NavMenu,
12 | NavLinks,
13 | NavItem,
14 | } from './NavbarStyles';
15 | import { navbarData } from '../../data/NavbarData';
16 |
17 | const Navbar = () => {
18 | const [show, setShow] = useState(false);
19 |
20 | const scrollTo = (id) => {
21 | const element = document.getElementById(id);
22 | element.scrollIntoView({
23 | behavior: 'smooth',
24 | });
25 | };
26 |
27 | const closeMobileMenu = (id) => {
28 | scrollTo(id);
29 |
30 | setShow(false);
31 | };
32 |
33 | return (
34 |
35 |
55 |
56 | );
57 | };
58 |
59 | export default Navbar;
60 |
--------------------------------------------------------------------------------
/src/data/FeaturesData.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BsPhone } from 'react-icons/bs';
3 | import { GiConcentrationOrb } from 'react-icons/gi';
4 | import { IoLogoXing } from 'react-icons/io';
5 | import { HiCode } from 'react-icons/hi';
6 | import { MdSlowMotionVideo } from 'react-icons/md';
7 | import { FaPhotoVideo } from 'react-icons/fa';
8 |
9 | const iconStyle = (Icon) => ;
10 |
11 | export const featuresData = [
12 | {
13 | name: 'UI/UX',
14 | description:
15 | 'Landing Pages, User Flow, Wireframing, Prototyping, Mobile App Design, Web App',
16 | icon: iconStyle(BsPhone),
17 | imgClass: 'one',
18 | },
19 | {
20 | name: 'Icon/Illustration',
21 | description: 'Character Design, Icon Set, Illustration Guide, Illustration Set',
22 | icon: iconStyle(GiConcentrationOrb),
23 | imgClass: 'two',
24 | },
25 | {
26 | name: 'Branding',
27 | description: 'Visual Identity, Stationary Kit, Marketing Materials',
28 | icon: iconStyle(IoLogoXing),
29 | imgClass: 'three',
30 | },
31 | {
32 | name: 'Development',
33 | description: 'HTML/CSS, JavaScript Animation, WordPress, Responsive Website',
34 | icon: iconStyle(HiCode),
35 | imgClass: 'four',
36 | },
37 | {
38 | name: 'Motion',
39 | description: '2D Animation, UI Motion',
40 | icon: iconStyle(MdSlowMotionVideo),
41 | imgClass: 'five',
42 | },
43 | {
44 | name: 'Photography',
45 | description: 'Travel Photography, Product Photography',
46 | icon: iconStyle(FaPhotoVideo),
47 | imgClass: 'six',
48 | },
49 | ];
50 |
--------------------------------------------------------------------------------
/src/data/HeroData.js:
--------------------------------------------------------------------------------
1 | export const heroOne = {
2 | id: 'projects',
3 | topLine: {
4 | text: 'Illustration Design',
5 | },
6 | headline: 'Redesigning prisma',
7 | description: 'Designing various vectors to match the themes of our clients. Find out more! ',
8 | buttonLabel: 'View Project',
9 | imgStart: 'start',
10 | img: './images/content/rocket.svg',
11 | backgroundColor: 'linear-gradient( 150deg,#c99fff -20%,#4a4eff)',
12 | start: 'true',
13 | };
14 |
15 | export const heroTwo = {
16 | reverse: true,
17 | topLine: {
18 | text: 'Development and Design',
19 | },
20 | headline: 'Beautiful Landing Page for Lifecycle',
21 | description:
22 | "Our team worked for various clients, I don't know what else to write here, it's not my job!",
23 | buttonLabel: 'View Project',
24 |
25 | linkTo: '/more',
26 | imgStart: 'start',
27 | img: './images/content/landing-page.svg',
28 | backgroundColor: 'linear-gradient( 140deg ,#ffaf73 30%,#fffecc 120%)',
29 |
30 | start: 'true',
31 | };
32 |
33 | export const heroThree = {
34 | topLine: {
35 | text: 'Development',
36 | },
37 | headline: "Innovative API's ",
38 | description:
39 | 'Our team has amazing developers that can turn any design sketches and ideas into a fully functioning product.',
40 | buttonLabel: 'View Project',
41 |
42 | linkTo: '/download',
43 | imgStart: '',
44 | backgroundColor: 'linear-gradient(104deg, rgba(151,147,218,1) 0%, rgba(183,137,205,1) 100%)',
45 | img: './images/content/lost.svg',
46 | start: 'true',
47 | };
48 |
49 | export const heroFour = {
50 | reverse: true,
51 | topLine: {
52 | text: 'Photography and Development',
53 | },
54 | headline: 'New ECommerce systems',
55 | description: 'We take your products and make them look better than they already are!',
56 | buttonLabel: 'View Project',
57 |
58 | linkTo: '/more',
59 | imgStart: '',
60 | backgroundColor: 'linear-gradient(225deg,#0abac2,#b2de94)',
61 | img: './images/content/ecommerce.svg',
62 | start: 'true',
63 | };
64 |
--------------------------------------------------------------------------------
/src/components/Modal/Modal.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useCallback } from 'react';
2 | import { AnimatePresence } from 'framer-motion';
3 | import { Background, CloseModalButton, ModalWrapper } from './ModalStyles';
4 | import Form from '../Form/Form';
5 |
6 | const Modal = ({ showModal, toggleModal }) => {
7 | const modalRef = useRef();
8 |
9 | const closeModal = (e) => {
10 | if (modalRef.current === e.target) {
11 | toggleModal();
12 | }
13 | };
14 |
15 | const keyPress = useCallback(
16 | (e) => {
17 | if (e.key && showModal) {
18 | toggleModal();
19 | }
20 | },
21 | [showModal, toggleModal]
22 | );
23 |
24 | useEffect(() => {
25 | document.addEventListener('keydown', keyPress);
26 |
27 | return () => document.removeEventListener('keydown', keyPress);
28 | }, [keyPress]);
29 |
30 | const backgroundVariants = {
31 | initial: {
32 | opacity: 0,
33 | },
34 | animate: {
35 | opacity: 1,
36 | transition: {
37 | duration: 0.4,
38 | },
39 | },
40 | };
41 |
42 | const modalVariants = {
43 | initial: {
44 | opacity: 0,
45 | y: 200,
46 | },
47 | animate: {
48 | opacity: 1,
49 | y: 0,
50 | transition: {
51 | duration: 0.4,
52 | type: 'spring',
53 | stiffness: 100,
54 | },
55 | },
56 |
57 | exit: {
58 | y: -200,
59 | opacity: 0,
60 | },
61 | };
62 |
63 | return (
64 |
65 | {showModal && (
66 |
76 |
85 |
86 |
87 |
88 |
89 | )}
90 |
91 | );
92 | };
93 |
94 | export default Modal;
95 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
15 |
16 |
17 |
21 |
22 |
31 | React App
32 |
33 |
34 |
35 |
36 |
46 |
47 |
--------------------------------------------------------------------------------
/src/components/Clients/ClientsStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ClientSection = styled.div`
4 | padding: 140px 0;
5 | position: relative;
6 | margin: 0 auto;
7 |
8 | @media screen and (max-width: 768px) {
9 | padding: 70px 0;
10 | margin-top: 10rem;
11 | }
12 | `;
13 |
14 | export const ClientTextWrapper = styled.div`
15 | position: relative;
16 | padding: 0 0 20px;
17 | margin-bottom: 4rem;
18 |
19 | &:before {
20 | width: 40px;
21 | height: 2px;
22 | content: '';
23 | position: absolute;
24 | bottom: 0;
25 | left: 50%;
26 | background-color: #ef4b6c;
27 | transform: translateX(-50%);
28 | }
29 | `;
30 |
31 | export const ClientTitle = styled.h2`
32 | text-align: center;
33 | font-size: clamp(1.3rem, 13vw, 3.1rem);
34 | line-height: 1.06;
35 | letter-spacing: 0.4rem;
36 | `;
37 |
38 | export const ClientText = styled.p`
39 | margin: 1rem 0 auto;
40 | text-align: center;
41 | font-size: 1.3rem;
42 | line-height: 1.73;
43 | letter-spacing: 0.5px;
44 | color: #626881;
45 |
46 | @media screen and (max-width: 768px) {
47 | display: none;
48 | }
49 | `;
50 |
51 | export const ClientRow = styled.div`
52 | display: flex;
53 | justify-content: center;
54 |
55 | @media screen and (max-width: 1100px) {
56 | flex-direction: column;
57 | align-items: center;
58 | }
59 | `;
60 |
61 | export const ClientColumn = styled.div`
62 | display: flex;
63 | flex-flow: column;
64 | justify-content: center;
65 | align-items: center;
66 | margin: 0.4rem;
67 |
68 | @media screen and (max-width: 1100px) {
69 | div:not(:first-child) {
70 | display: none;
71 | }
72 | }
73 | `;
74 |
75 | export const ClientImage = styled.img`
76 | width: 90px;
77 | @media screen and (max-width: 1100px) {
78 | width: clamp(80px, 40vw, 400px);
79 | height: 60%;
80 | }
81 | `;
82 | export const ClientWrapper = styled.div`
83 | padding: 10px 40px;
84 | border-radius: 1rem;
85 | height: 110px;
86 | width: 100%;
87 | box-shadow: 0 0 32px 8px #dfdfdf;
88 | background-color: #fafeff;
89 | margin: 0.4rem;
90 | display: flex;
91 | align-items: center;
92 | justify-content: center;
93 | `;
94 |
--------------------------------------------------------------------------------
/public/images/companies/apple.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
--------------------------------------------------------------------------------
/src/components/Hero/Hero.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { FiMail } from 'react-icons/fi';
3 | import {
4 | HeroSection,
5 | Heading,
6 | HeroText,
7 | ButtonContainer,
8 | HeroButton,
9 | ImageCharacter,
10 | HeroImage,
11 | HeroContent,
12 | ButtonWrapper,
13 | CharacterContainer,
14 | } from './HeroStyles';
15 | import { useInView } from 'react-intersection-observer';
16 | import Modal from '../Modal/Modal';
17 |
18 | const Hero = () => {
19 | const [showModal, setShowModal] = useState(false);
20 | const dragConstraints = { top: 0, bottom: 0, right: 0, left: 0 };
21 |
22 | const toggleModal = () => {
23 | if (!showModal) {
24 | document.body.style.overflow = 'hidden';
25 | } else {
26 | document.body.style.overflow = 'visible';
27 | }
28 |
29 | setShowModal(!showModal);
30 | };
31 |
32 | const variants = {
33 | hover: {
34 | y: 15,
35 | transition: {
36 | yoyo: Infinity,
37 | duration: 0.6,
38 | },
39 | },
40 | };
41 | const { ref, inView } = useInView({
42 | rootMargin: '-100px',
43 | });
44 |
45 | useEffect(() => {
46 | console.log(inView);
47 | }, [inView]);
48 |
49 | return (
50 | <>
51 |
52 |
53 |
54 |
55 |
60 |
65 |
73 |
74 |
75 | We Are Designify
76 |
77 | A team of passionate designer and developers ready to provide unique and
78 | outstanding products for you!
79 |
80 |
81 |
82 |
83 | {inView ? (
84 | <> Chat with us
85 | ) : (
86 |
87 | )}
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | );
96 | };
97 |
98 | export default Hero;
99 |
--------------------------------------------------------------------------------
/public/images/companies/amazon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Form/FormStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { motion } from 'framer-motion';
3 |
4 | export const FormSection = styled.div`
5 | padding: clamp(50px, 30vh, 100px) 0;
6 | border-radius: 30px;
7 | width: 100%;
8 | `;
9 |
10 | export const FormTitle = styled.h1`
11 | margin-bottom: 4rem;
12 | font-size: 3rem;
13 | line-height: 1.1;
14 | font-weight: 600;
15 | `;
16 |
17 | export const FormContainer = styled.div`
18 | display: flex;
19 | `;
20 | export const FormColumn = styled.div`
21 | margin-bottom: 15px;
22 | padding-right: 15px;
23 | padding-left: 15px;
24 | padding: 0 15px;
25 | flex: 1;
26 | max-width: 70%;
27 | display: flex;
28 | flex-direction: column;
29 | @media screen and (max-width: 768px) {
30 | max-width: 100% !important;
31 | flex-basis: 100%;
32 | justify-content: center;
33 | align-items: center;
34 | }
35 |
36 | img {
37 | @media screen and (max-width: 768px) {
38 | display: none;
39 | }
40 | }
41 | `;
42 |
43 | export const FormRow = styled.div`
44 | display: flex;
45 | justify-content: center;
46 | margin: 0 -15px -15px -15px;
47 | flex-wrap: wrap;
48 | align-items: center;
49 | `;
50 |
51 | export const FormWrapper = styled.form`
52 | max-width: 540px;
53 | padding-top: 0;
54 | width: 100%;
55 | `;
56 |
57 | export const FormButton = styled.button`
58 | background-color: #ef4b6c;
59 | width: 100%;
60 | margin-top: 2rem;
61 | height: 4rem;
62 | font-size: 12px;
63 | font-weight: 700;
64 | letter-spacing: 0.75px;
65 | text-transform: uppercase;
66 | border-radius: 28px;
67 | line-height: 30px;
68 | box-shadow: 10px 16px 40px 0 rgb(255 84 117 / 46%);
69 | text-align: center;
70 | border: none;
71 | color: #fff;
72 | cursor: pointer;
73 |
74 | &:hover {
75 | background-color: #f06e88;
76 | transition: background-color 0.4s ease-in;
77 | }
78 | `;
79 |
80 | export const FormMessage = styled(motion.div)`
81 | color: ${({ error }) => (error ? 'red' : 'green')};
82 | padding: 5px;
83 | text-align: center;
84 | margin-top: 1rem;
85 | `;
86 |
87 | export const FormInputRow = styled.div`
88 | display: flex;
89 | justify-content: center;
90 | flex-direction: column;
91 | align-items: stretch;
92 | margin-bottom: 2rem;
93 |
94 | > p {
95 | font-size: 0.8rem;
96 | margin-top: 0.5rem;
97 | color: #f00e0e;
98 | }
99 | `;
100 | export const FormInput = styled.input`
101 | display: block;
102 | padding-left: 10px;
103 | outline: none;
104 | border-radius: 2px;
105 | height: 40px;
106 | width: 100%;
107 | border: none;
108 | font-size: 1rem;
109 | border-bottom: 1px solid #cecece;
110 | `;
111 |
112 | export const FormLabel = styled.label`
113 | display: inline-block;
114 | font-size: 0.9rem;
115 | margin-bottom: 0.3rem;
116 | color: #666;
117 | `;
118 |
--------------------------------------------------------------------------------
/src/components/Features/FeaturesStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const FeatureSection = styled.div`
4 | padding: 140px;
5 | position: relative;
6 | margin: 0 auto;
7 |
8 | @media screen and (max-width: 768px) {
9 | padding: 70px 0;
10 | margin-top: 10rem;
11 | }
12 | `;
13 |
14 | export const FeatureTitle = styled.h2`
15 | text-align: center;
16 | font-size: clamp(1.3rem, 13vw, 3.1rem);
17 | line-height: 1.06;
18 | letter-spacing: 0.4rem;
19 | margin: auto;
20 | `;
21 |
22 | export const FeatureTextWrapper = styled.div`
23 | position: relative;
24 | padding: 0 0 20px;
25 | margin-bottom: 4rem;
26 |
27 | &:before {
28 | width: 40px;
29 | height: 2px;
30 | content: '';
31 | position: absolute;
32 | bottom: 0;
33 | left: 50%;
34 | background-color: #ef4b6c;
35 | transform: translateX(-50%);
36 | }
37 | `;
38 |
39 | export const FeatureWrapper = styled.div`
40 | display: grid;
41 | grid-template-columns: repeat(3, 1fr);
42 | /* flex-wrap: wrap; */
43 | margin-top: 4rem;
44 | grid-gap: 4rem;
45 |
46 | @media screen and (max-width: 960px) {
47 | grid-template-columns: repeat(2, 1fr);
48 | grid-column-gap: 0.4rem;
49 | grid-row-gap: 3rem;
50 | /* grid-gap: 3rem; */
51 | }
52 |
53 | @media screen and (max-width: 568px) {
54 | grid-template-columns: repeat(1, 1fr);
55 | }
56 | `;
57 |
58 | export const FeatureColumn = styled.div`
59 | /* max-width: 33%; */
60 | display: flex;
61 | flex-flow: column;
62 | justify-content: center;
63 | align-items: center;
64 |
65 | @media screen and (max-width: 960px) {
66 | /* max-width: 50%; */
67 | }
68 | `;
69 |
70 | export const FeatureImageWrapper = styled.div`
71 | margin-bottom: 1rem;
72 | border-radius: 50%;
73 | &.one {
74 | background: linear-gradient(130deg, #9cb3ff 0%, #b0ffe9 100%);
75 | }
76 | &.two {
77 | background: linear-gradient(220deg, #e7d1ff 0%, #8383ef 100%);
78 | }
79 | &.three {
80 | background: linear-gradient(130deg, #ff8989 0%, #ffddc5 100%);
81 | }
82 | &.four {
83 | background: linear-gradient(130deg, #ffa8e8 0%, #ffe6e6 100%);
84 | }
85 | &.five {
86 | background: linear-gradient(130deg, #ffaf73 0%, #fffecc 100%);
87 | }
88 | &.six {
89 | background: linear-gradient(130deg, #59dbb0 0%, #feffb5 100%);
90 | }
91 |
92 | padding: 30px;
93 | `;
94 | export const FeatureName = styled.h3`
95 | font-weight: 600;
96 | font-size: 1.3rem;
97 | letter-spacing: 2px;
98 |
99 | @media screen and (max-width: 768px) {
100 | font-weight: 400;
101 | font-size: 1rem;
102 | letter-spacing: 1.3px;
103 | }
104 | `;
105 | export const FeatureText = styled.p`
106 | margin: 1rem 0 auto;
107 | text-align: center;
108 | font-size: 0.9rem;
109 | line-height: 1.73;
110 | letter-spacing: 0.5px;
111 | color: #626881;
112 |
113 | @media screen and (max-width: 768px) {
114 | display: none;
115 | }
116 | `;
117 |
--------------------------------------------------------------------------------
/src/components/Form/Form.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import {
3 | FormColumn,
4 | FormWrapper,
5 | FormInput,
6 | FormSection,
7 | FormRow,
8 | FormTitle,
9 | FormLabel,
10 | FormInputRow,
11 | FormButton,
12 | FormMessage,
13 | } from './FormStyles';
14 | import { Container } from '../../globalStyles';
15 | import validateForm from './validateForm';
16 |
17 | const Form = () => {
18 | const [name, setName] = useState('');
19 | const [email, setEmail] = useState('');
20 | const [subject, setSubject] = useState('');
21 | const [message, setMessage] = useState('');
22 | const [error, setError] = useState(null);
23 | const [success, setSuccess] = useState(null);
24 |
25 | const handleSubmit = (e) => {
26 | e.preventDefault();
27 | const resultError = validateForm({ name, email, subject, message });
28 |
29 | if (resultError !== null) {
30 | setError(resultError);
31 | return;
32 | }
33 | setName('');
34 | setEmail('');
35 | setSubject('');
36 | setMessage('');
37 | setError(null);
38 | setSuccess('Message was sent!');
39 | };
40 |
41 | const messageVariants = {
42 | hidden: { y: 30, opacity: 0 },
43 | animate: { y: 0, opacity: 1, transition: { delay: 0.2, duration: 0.4 } },
44 | };
45 |
46 | const formData = [
47 | { label: 'Name', value: name, onChange: (e) => setName(e.target.value), type: 'text' },
48 | { label: 'Email', value: email, onChange: (e) => setEmail(e.target.value), type: 'email' },
49 | {
50 | label: 'Subject',
51 | value: subject,
52 | onChange: (e) => setSubject(e.target.value),
53 | },
54 | {
55 | label: 'Message',
56 | value: message,
57 | onChange: (e) => setMessage(e.target.value),
58 | },
59 | ];
60 |
61 | return (
62 |
63 |
64 |
65 |
66 | Sign Up
67 |
68 | {formData.map((el, index) => (
69 |
70 | {el.label} *
71 |
76 |
77 | ))}
78 |
79 | Let's talk
80 |
81 | {error && (
82 |
88 | {error}
89 |
90 | )}
91 | {success && (
92 |
97 | {success}
98 |
99 | )}
100 |
101 |
102 |
103 |
104 | );
105 | };
106 |
107 | export default Form;
108 |
--------------------------------------------------------------------------------
/public/images/companies/facebook.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Content/Content.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { Container } from '../../globalStyles';
3 | import {
4 | ContentSec,
5 | ContentRow,
6 | TextWrapper,
7 | TopLine,
8 | Heading,
9 | ContentButton,
10 | Subtitle,
11 | ImgWrapper,
12 | Img,
13 | ContentColumn,
14 | } from './ContentStyles';
15 | import { useInView } from 'react-intersection-observer';
16 | import { useAnimation } from 'framer-motion';
17 | import Tilt from 'react-tilt';
18 |
19 | const Content = ({
20 | primary,
21 | topLine,
22 | headline,
23 | description,
24 | buttonLabel,
25 | img,
26 | alt,
27 | start,
28 | bottomImg,
29 | backgroundColor,
30 | linkTo,
31 | inverse,
32 | reverse,
33 | bigImage,
34 | id,
35 | }) => {
36 | const initial = { opacity: 0, y: 30 };
37 | const transition = { delay: 0.3, duration: 0.6 };
38 | const animation = useAnimation();
39 |
40 | const { ref, inView } = useInView({
41 | threshold: 0.2,
42 | });
43 |
44 | useEffect(() => {
45 | if (inView) {
46 | animation.start({
47 | opacity: 1,
48 | y: 0,
49 | });
50 | }
51 | }, [inView, animation]);
52 |
53 | return (
54 |
55 |
56 |
57 |
58 |
59 |
64 | {topLine.text}
65 |
66 |
72 | {headline}
73 |
74 |
80 | {description}
81 |
82 |
83 |
90 | {buttonLabel}
91 |
92 |
93 |
94 |
100 |
101 |
102 | 
108 |
109 |
110 |
111 |
112 |
113 |
114 | );
115 | };
116 |
117 | export default Content;
118 |
--------------------------------------------------------------------------------
/src/components/Navbar/NavbarStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Container } from '../../globalStyles';
3 | import { Link } from 'react-router-dom';
4 |
5 | export const Nav = styled.nav`
6 | background: transparent;
7 | margin-bottom: -80px;
8 | height: 80px;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | font-size: 1.2rem;
13 | position: absolute;
14 | top: 0;
15 | z-index: 99;
16 | width: 100%;
17 | `;
18 |
19 | export const NavbarContainer = styled(Container)`
20 | display: flex;
21 | justify-content: start;
22 | height: 80px;
23 | `;
24 |
25 | export const NavLogo = styled(Link)`
26 | color: #fff;
27 | justify-self: flex-start;
28 | cursor: pointer;
29 | text-decoration: none;
30 | font-size: 2rem;
31 | display: flex;
32 | align-items: center;
33 | z-index: 99;
34 | `;
35 |
36 | export const NavIcon = styled.img`
37 | margin-right: 0.2rem;
38 | width: 3rem;
39 | `;
40 |
41 | export const MobileIcon = styled.div`
42 | display: none;
43 | z-index: 99;
44 |
45 | @media screen and (max-width: 960px) {
46 | display: block;
47 | position: absolute;
48 | top: 0;
49 | right: 0;
50 | transform: translate(-100%, 60%);
51 | font-size: 1.8rem;
52 | cursor: pointer;
53 | }
54 | `;
55 |
56 | export const NavMenu = styled.ul`
57 | display: flex;
58 | align-items: center;
59 | list-style: none;
60 | text-align: center;
61 | width: 100%;
62 |
63 | @media screen and (max-width: 960px) {
64 | flex-direction: column;
65 | width: 100%;
66 | height: 100vh;
67 | position: fixed;
68 | padding-top: 30%;
69 | top: 0;
70 | left: 0;
71 | opacity: ${({ show }) => (show ? 1 : 0)};
72 | visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
73 | transform: translateY(${({ show }) => (show ? '0' : '-10px')});
74 | transition: opacity 0.5s ease;
75 | background-color: #41d0e1;
76 | }
77 |
78 | > li:first-child {
79 | margin-left: auto;
80 | }
81 | `;
82 |
83 | export const NavItem = styled.li`
84 | height: 80px;
85 | cursor: pointer;
86 |
87 | @media screen and (max-width: 960px) {
88 | width: 100%;
89 |
90 | &:hover {
91 | border: none;
92 | }
93 | }
94 | `;
95 |
96 | export const NavLinks = styled(Link)`
97 | color: #fff;
98 | display: flex;
99 | align-items: center;
100 | text-decoration: none;
101 | padding: 0.5rem 1rem;
102 | height: 100%;
103 |
104 | &:hover {
105 | border-bottom: 2px solid #ec421d;
106 | }
107 |
108 | @media screen and (max-width: 960px) {
109 | text-align: center;
110 | padding: 2rem;
111 | width: 100%;
112 | display: table;
113 |
114 | &:hover {
115 | border-bottom: none;
116 | color: #4b59f7;
117 | transition: all 0.3s ease;
118 | }
119 | }
120 | `;
121 |
122 | export const NavBtnLink = styled(Link)`
123 | display: flex;
124 | justify-content: center;
125 | align-items: center;
126 | text-decoration: none;
127 | padding: 8px 16px;
128 | height: 100%;
129 | width: 100%;
130 | border: none;
131 | outline: none;
132 | `;
133 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `yarn build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/src/components/Content/ContentStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { motion } from 'framer-motion';
3 |
4 | export const ContentSec = styled.div`
5 | padding: 100px 0;
6 | background: #fff;
7 | @media screen and (max-width: 768px) {
8 | padding: 70px 0;
9 | }
10 | `;
11 |
12 | export const ContentRow = styled.div`
13 | display: flex;
14 | margin: 0 -15px -15px -15px;
15 | flex-wrap: wrap;
16 | align-items: center;
17 | flex-direction: ${({ reverse }) => (reverse ? 'row-reverse' : 'row')};
18 | justify-content: space-around;
19 |
20 | @media screen and (max-width: 768px) {
21 | flex-direction: column-reverse;
22 | }
23 | `;
24 |
25 | export const ContentColumn = styled(motion.div)`
26 | margin-bottom: 15px;
27 | padding-right: 15px;
28 | padding-left: 15px;
29 | flex: 1;
30 | z-index: 10;
31 | display: flex;
32 | flex-direction: column;
33 | @media screen and (max-width: 768px) {
34 | max-width: 100% !important;
35 | flex-basis: 100%;
36 | justify-content: center;
37 | align-items: center;
38 | }
39 | `;
40 |
41 | export const TextWrapper = styled.div`
42 | max-width: 540px;
43 | padding-top: 0;
44 |
45 | @media screen and (max-width: 768px) {
46 | padding-bottom: 65px;
47 | > h1,
48 | p {
49 | text-align: center;
50 | }
51 | display: flex;
52 | flex-direction: column;
53 | align-items: center;
54 | }
55 |
56 | > img {
57 | width: 300px;
58 | margin-left: -3px;
59 | }
60 | `;
61 |
62 | export const ContentButton = styled(motion.button)`
63 | height: 3rem;
64 | padding: 16px 32px;
65 | font-weight: 700;
66 | font-size: 0.8rem;
67 | line-height: 18px;
68 | letter-spacing: 1.54px;
69 | text-transform: uppercase;
70 | border-radius: 25px;
71 | border: none;
72 | background: ${({ backgroundColor }) => (backgroundColor ? backgroundColor : '#fafeff')};
73 | cursor: pointer;
74 | color: white;
75 |
76 | &:hover {
77 | box-shadow: 0 0 32px 4px #cfcfcf;
78 | transition: box-shadow 0.3s ease-in;
79 | }
80 | `;
81 |
82 | export const ImgWrapper = styled(motion.div)`
83 | display: flex;
84 | justify-content: ${({ imgStart }) => (imgStart ? 'flex-start' : 'flex-end')};
85 | max-height: 600px;
86 | justify-content: center;
87 | box-shadow: 0 0 32px 4px #dfdfdf;
88 | border-radius: 1rem;
89 | position: relative;
90 | background: ${({ backgroundColor }) => (backgroundColor ? backgroundColor : '#fafeff')};
91 | &:before {
92 | width: 100%;
93 | height: 100%;
94 | content: '';
95 | position: absolute;
96 | top: 0;
97 | right: 0;
98 | background-image: url('./images/hero-pattern-bg.png');
99 | background-size: 100% auto;
100 | object-fit: cover;
101 | }
102 | `;
103 |
104 | export const TopLine = styled(motion.div)`
105 | font-size: 0.9rem;
106 | line-height: 16px;
107 | font-weight: 700;
108 | letter-spacing: 1.4px;
109 | margin-bottom: 1.3rem;
110 | color: #979797;
111 | `;
112 |
113 | export const Img = styled(motion.img)`
114 | padding-right: 0;
115 | border: 0;
116 | max-width: 100%;
117 | vertical-align: middle;
118 | display: inline-block;
119 | object-fit: cover;
120 | height: 300px;
121 | max-height: 700px;
122 | z-index: 1;
123 | `;
124 |
125 | export const Heading = styled(motion.h2)`
126 | margin-bottom: 24px;
127 | font-size: 2rem;
128 | line-height: 1.1;
129 | font-weight: 600;
130 | color: #1c2237;
131 |
132 | @media screen and (max-width: 768px) {
133 | text-align: center;
134 | }
135 | `;
136 |
137 | export const Subtitle = styled(motion.p)`
138 | max-width: 440px;
139 | margin-bottom: 35px;
140 | line-height: 24px;
141 | color: ${({ inverse }) => (inverse ? '#a9b3c1' : '#1c2237')};
142 | `;
143 |
--------------------------------------------------------------------------------
/public/images/companies/youtube.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Hero/HeroStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Section } from '../../globalStyles';
3 | import { motion } from 'framer-motion';
4 |
5 | export const HeroSection = styled(Section)`
6 | background-image: linear-gradient(to top right, #450b7c, #563cc9, #49e9fb);
7 | background-size: cover;
8 | background-attachment: fixed;
9 | z-index: 11;
10 | align-items: center;
11 | height: 640px;
12 | position: relative;
13 | display: flex;
14 |
15 | @media screen and (min-width: 768px) {
16 | height: 592px;
17 | }
18 |
19 | @media screen and (min-width: 992px) {
20 | height: 710px;
21 | }
22 |
23 | @media screen and (min-width: 1200px) {
24 | height: 820px;
25 | }
26 |
27 | @media screen and (min-width: 2000px) {
28 | height: 1200px;
29 | }
30 | `;
31 |
32 | export const HeroImage = styled.img`
33 | z-index: 10;
34 | width: 100%;
35 | position: absolute;
36 | left: 0;
37 | object-fit: cover;
38 |
39 | &.pattern {
40 | height: 100%;
41 | max-height: 100%;
42 | top: 0;
43 | }
44 |
45 | &.guy {
46 | bottom: 0;
47 | }
48 | `;
49 |
50 | export const ImageCharacter = styled(motion.img)`
51 | z-index: 11;
52 | width: 100%;
53 | position: absolute;
54 | width: clamp(90px, 15vw, 200px);
55 | left: auto;
56 |
57 | &.one {
58 | top: 4rem;
59 | right: 200px;
60 | width: clamp(170px, 15vw, 230px);
61 |
62 | @media screen and (max-width: 768px) {
63 | right: 50%;
64 | transform: translateX(50%);
65 | }
66 | }
67 |
68 | &.two {
69 | bottom: 4rem;
70 | right: 200px;
71 | z-index: 100;
72 | @media screen and (max-width: 768px) {
73 | right: 50px;
74 | }
75 | }
76 |
77 | &.three {
78 | top: 3rem;
79 | left: 150px;
80 |
81 | @media screen and (max-width: 768px) {
82 | display: none;
83 | }
84 | }
85 | `;
86 |
87 | export const CharacterContainer = styled.div`
88 | width: 100%;
89 | max-width: 1300px;
90 | height: 100%;
91 | left: 50%;
92 | transform: translateX(-50%);
93 | position: absolute;
94 | `;
95 |
96 | export const HeroContent = styled.div`
97 | width: 100%;
98 | padding: 0 15px;
99 | z-index: 10;
100 | position: relative;
101 | `;
102 |
103 | export const Heading = styled.h1`
104 | margin-bottom: 1.5rem;
105 | font-size: clamp(2.8rem, 6vw, 6.7rem);
106 | line-height: 1.1;
107 | font-weight: 600;
108 | text-align: center;
109 | color: white;
110 | `;
111 |
112 | export const HeroText = styled.div`
113 | text-align: center;
114 | font-size: clamp(0.9rem, 1.5vw, 1.3rem);
115 | /* margin-bottom: 1.3rem; */
116 | `;
117 |
118 | export const ButtonContainer = styled.div`
119 | position: relative;
120 | display: flex;
121 | height: 170px;
122 | `;
123 |
124 | export const ButtonWrapper = styled.div`
125 | position: absolute;
126 | height: 100vh;
127 | width: 100%;
128 | left: 0;
129 | top: 0;
130 | `;
131 |
132 | export const HeroButton = styled(motion.button)`
133 | position: absolute;
134 | width: 250px;
135 | margin: 0 auto;
136 | padding: 15px 20px;
137 | bottom: calc(100vh - 100px);
138 | right: 50%;
139 | transform: translate(50%);
140 | font-weight: 700;
141 | font-size: 0.688rem;
142 | line-height: 18px;
143 | letter-spacing: 1.54px;
144 | text-transform: uppercase;
145 | border-radius: 25px;
146 | border: none;
147 | background-color: white;
148 | color: #5238b1;
149 | cursor: pointer;
150 | transition: all 0.4s ease-in;
151 |
152 | &.corner {
153 | position: fixed;
154 | bottom: 3rem;
155 | right: 3rem;
156 | width: 64px;
157 | height: 64px;
158 | padding: 10px;
159 | background-color: #ef4b6c;
160 | border-radius: 50%;
161 | }
162 |
163 | &:hover {
164 | box-shadow: 0 0 9px 9px #5238b1;
165 | transition: box-shadow 0.3s ease-in;
166 | }
167 | `;
168 |
--------------------------------------------------------------------------------
/public/images/companies/airbnb.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Footer/FooterStyles.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Link } from 'react-router-dom';
3 |
4 | export const FooterContainer = styled.div`
5 | padding: 4rem 0 2rem 0;
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: center;
9 | align-items: center;
10 | background: linear-gradient(to bottom right, #c04de2, #340c7f);
11 | `;
12 |
13 | export const FooterSubscription = styled.section`
14 | display: flex;
15 | flex-direction: column;
16 | justify-content: center;
17 | align-items: center;
18 | text-align: center;
19 | margin-bottom: 24px;
20 | padding: 24px;
21 | color: #fff;
22 | width: 100%;
23 | /* background-color: #101522; */
24 | `;
25 |
26 | export const FooterSubHeading = styled.p`
27 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial,
28 | sans-serif;
29 | margin-bottom: 24px;
30 | font-size: 24px;
31 | `;
32 |
33 | export const FooterSubText = styled.p`
34 | margin-bottom: 24px;
35 | font-size: 20px;
36 | `;
37 |
38 | export const Form = styled.form`
39 | display: flex;
40 | justify-content: center;
41 | align-items: center;
42 |
43 | @media screen and (max-width: 820px) {
44 | flex-direction: column;
45 | width: 80%;
46 | }
47 | `;
48 |
49 | export const FormInput = styled.input`
50 | padding: 10px 20px;
51 | border-radius: 2px;
52 | margin-right: 10px;
53 | outline: none;
54 | border: none;
55 | font-size: 16px;
56 | border: 1px solid #fff;
57 |
58 | &::placeholder {
59 | color: #242424;
60 | }
61 |
62 | @media screen and (max-width: 820px) {
63 | width: 100%;
64 | margin: 0 0 16px 0;
65 | }
66 | `;
67 |
68 | export const FooterLinksContainer = styled.div`
69 | width: 100%;
70 | max-width: 1000px;
71 | display: flex;
72 | justify-content: center;
73 |
74 | @media screen and (max-width: 820px) {
75 | padding-top: 32px;
76 | }
77 | `;
78 |
79 | export const FooterLinksWrapper = styled.div`
80 | display: flex;
81 | justify-content: space-around;
82 | width: 100%;
83 | color: #fff;
84 | @media screen and (max-width: 820px) {
85 | flex-direction: column;
86 | }
87 | `;
88 |
89 | export const FooterLinkItems = styled.div`
90 | display: flex;
91 | flex-direction: column;
92 | align-items: flex-start;
93 | margin: 16px;
94 | text-align: left;
95 | width: 160px;
96 | box-sizing: border-box;
97 | color: #fff;
98 |
99 | @media screen and (max-width: 420px) {
100 | margin: 0;
101 | padding: 10px;
102 | width: 100%;
103 | }
104 | `;
105 |
106 | export const FooterLinkTitle = styled.h2`
107 | margin-bottom: 16px;
108 | `;
109 |
110 | export const FooterLink = styled(Link)`
111 | color: #fff;
112 | text-decoration: none;
113 | margin-bottom: 0.5rem;
114 |
115 | &:hover {
116 | color: #0467fb;
117 | transition: 0.3s ease-out;
118 | }
119 | `;
120 |
121 | export const SocialMedia = styled.section`
122 | max-width: 1000px;
123 | width: 100%;
124 | `;
125 |
126 | export const SocialMediaWrap = styled.div`
127 | display: flex;
128 | justify-content: space-between;
129 | align-items: center;
130 | width: 90%;
131 | max-width: 1000px;
132 | margin: 40px auto 0 auto;
133 |
134 | @media screen and (max-width: 820px) {
135 | flex-direction: column;
136 | }
137 | `;
138 |
139 | export const SocialLogo = styled(Link)`
140 | color: #fff;
141 | justify-self: start;
142 | cursor: pointer;
143 | text-decoration: none;
144 | font-size: 2rem;
145 | display: flex;
146 | align-items: center;
147 | margin-bottom: 16px;
148 | `;
149 |
150 | export const SocialIcon = styled.img`
151 | margin-right: 0.2rem;
152 | width: 40px;
153 | `;
154 |
155 | export const WebsiteRights = styled.small`
156 | color: #fff;
157 | margin-bottom: 16px;
158 | `;
159 |
160 | export const SocialIcons = styled.div`
161 | display: flex;
162 | justify-content: space-between;
163 | align-items: center;
164 | width: 240px;
165 | `;
166 |
167 | export const SocialIconLink = styled.a`
168 | color: #fff;
169 | font-size: 24px;
170 | `;
171 |
--------------------------------------------------------------------------------
/public/images/logo.svg:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/public/images/companies/microsoft.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/companies/disney.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/companies/google.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/companies/coca-cola.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/content/lost.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/content/landing-page.svg:
--------------------------------------------------------------------------------
1 |
60 |
--------------------------------------------------------------------------------
/public/images/content/undraw_To_the_stars_qhyy.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/content/alien.svg:
--------------------------------------------------------------------------------
1 |
54 |
--------------------------------------------------------------------------------
/public/images/content/rocket.svg:
--------------------------------------------------------------------------------
1 |
217 |
--------------------------------------------------------------------------------
/public/images/content/ecommerce.svg:
--------------------------------------------------------------------------------
1 |
125 |
--------------------------------------------------------------------------------