Merge branch 'main' into patch-1

Agency-OptiGrowth/README.md

@@ -0,0 +1,49 @@
+# Welcome to Your React Project!
+
+This project was initialized using [Create React App](https://github.com/facebook/create-react-app), a fantastic tool for setting up React applications quickly.
+
+## Available Scripts
+
+In this project directory, you have access to several scripts:
+
+### `yarn start`
+
+Starts the development server for your app. Access it by opening [http://localhost:3000](http://localhost:3000) in your browser. The page will automatically refresh whenever you make changes, and any lint errors will be displayed in the console.
+
+### `yarn test`
+
+Initiates the test runner in interactive watch mode. For more details on running tests, [check here](https://facebook.github.io/create-react-app/docs/running-tests).
+
+### `yarn build`
+
+Creates a production build of your app in the `build` folder. It optimizes the build for the best performance, including minification and hashed filenames, making it ready for deployment. Find more information on deployment [here](https://facebook.github.io/create-react-app/docs/deployment).
+
+### `yarn eject`
+
+**Note: Ejecting is irreversible!**
+
+If you're unsatisfied with the provided configurations and wish to take full control, `eject` is available. It copies all configuration files and dependencies (webpack, Babel, ESLint, etc.) directly into your project. From this point, you have complete control but lose the guided features provided by Create React App.
+
+We recommend using the existing feature set, tailored for small to mid-scale deployments. But when you're ready to customize further, `eject` provides that flexibility.
+
+## Learn More
+
+Explore the official [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started) to delve deeper into the setup and possibilities.
+
+To deepen your understanding of React, dive into the [React documentation](https://reactjs.org/).
+
+### Additional Resources
+
+- **Code Splitting:** See how to split your code [here](https://facebook.github.io/create-react-app/docs/code-splitting).
+- **Bundle Size Analysis:** Learn to analyze your bundle size [here](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size).
+- **Progressive Web App (PWA):** Transform your app into a PWA [here](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app).
+- **Advanced Configuration:** For advanced configurations, check [here](https://facebook.github.io/create-react-app/docs/advanced-configuration).
+- **Troubleshooting:** If you encounter issues with `yarn build`, follow the troubleshooting steps [here](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify).
+
+This README is meant to guide you through the basics. Use it as a starting point and leverage the provided links to dive deeper into specific topics.
+
+Enjoy building with React and Create React App!
+
+---
+
+Feel free to customize this further based on the specific details or additional features your project might have.

Agency-OptiGrowth/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "new",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "netlify-cli": "^12.12.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "styled-components": "^5.3.6",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

Agency-OptiGrowth/public/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <style>
+
+    @font-face{
+      font-family: "Glacial";
+      src: url("./fonts/GlacialIndifference-Regular.otf");
+
+    }
+    @font-face{
+      font-family: "Glacial";
+      font-weight: bold;
+      src: url("./fonts/GlacialIndifference-Bold.otf");
+
+    }
+    * {
+      margin: 0;
+      font-family: "Glacial";
+
+    }
+  </style>
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

Agency-OptiGrowth/src/App.jsx

@@ -0,0 +1,91 @@
+import styled, { css } from "styled-components";
+import Navbar from "./components/Navbar";
+import Intro from "./components/Intro";
+import Feature from "./components/Feature";
+import AnimatedShapes from "./components/AnimatedShapes";
+import Service from "./components/Service";
+import Price from "./components/Price";
+import Contact from "./components/Contact";
+import Footer from "./components/Footer";
+
+const Container = styled.div`
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  
+
+  
+`;
+
+const Shape = css`
+
+width: 100%;
+height: 100%;
+position: absolute;
+top: 0;
+left: 0;
+z-index: -1;
+
+`;
+
+const IntroShape = styled.div`
+${Shape}
+background-color: crimson;
+clip-path: polygon(67% 0%, 100% 0%, 100% 100%, 55% 100%);
+`;
+
+const FeatureShape = styled.div`
+${Shape}
+background-color: pink;
+clip-path: polygon(0 0, 55% 0%, 33% 100%, 0 100%);
+`;
+const ServiceShape = styled.div`
+${Shape}
+background-color: #f88497;
+clip-path: polygon(0 0, 33% 0%, 33% 100%, 0 100%);
+`;
+const PriceShape = styled.div`
+${Shape}
+background-color: crimson;
+clip-path: polygon(33% 0, 100% 0%, 100% 100%, 67% 100%);
+`;
+
+const App = () => {
+
+const smallScreen = window.screen.width <= 480 ? true : false;
+
+  return (
+    <>
+  <Container>
+    <Navbar/>
+    <Intro/>
+    <IntroShape/>
+  </Container>
+
+  <Container>
+      <Feature/>
+      <FeatureShape/>
+      <AnimatedShapes/>
+  </Container>
+
+  <Container>
+     <Service/>
+     {!smallScreen && <ServiceShape/>}
+  </Container>
+
+  <Container>
+     <Price/>
+     <PriceShape/>
+  </Container>
+
+  <Container>
+     <Contact/>
+     <Footer/>
+  </Container>
+
+
+    </>
+  );
+};
+
+export default App;

Agency-OptiGrowth/src/components/AnimatedShapes.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import styled from 'styled-components'
+
+
+const Square =styled.div`
+width: 60px;
+height: 60px;
+background-color:#4e6bff;
+opacity: 0.7;
+position: absolute;
+top: -60px;
+left: -60px;
+z-index: -1;
+
+
+animation: square 25s linear alternate;
+@keyframes square {
+    to{//endpoint
+        transform: translate(100vw, 100vh);
+    }
+}
+`;
+const Circle =styled.div`
+width: 100px;
+height: 100px;
+border-radius: 50%;
+background-color:#ff97af;
+
+position: absolute;
+top: 200px;
+left: -100px;
+z-index: -1;
+
+
+animation: circle 25s linear alternate;
+@keyframes circle {
+    to{//endpoint
+        transform: translate(100vw, -100vh);
+    }
+}
+`;
+const Rect =styled.div`
+width: 50px;
+height: 100px;
+
+background-color:#669966;
+opacity: 0.5;
+position: absolute;
+top: 400px;
+left: -50px;
+z-index: -1;
+
+
+animation: rect 25s linear alternate;
+@keyframes rect {
+    to{//endpoint
+        transform: translate(100vw, -50vh);
+    }
+}
+`;
+
+const AnimatedShapes = () => {
+  return (
+      <>
+          <Square/>
+          <Circle/>
+          <Rect/>
+      </>
+  )
+}
+
+export default AnimatedShapes