[
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
  },
  {
    "path": "README.md",
    "content": "# Build Responsive Website in React JS with Styled-Components and GSAP for awesome scroll Animations\n\nThis repository contains code for Agency Website in ReactJS.\n\nView Demo:\nhttps://agency-website-eta.vercel.app/\n\nIf you want to learn how to create it please checkout following **Tutorial**👇: <br />\n<a href=\"https://devdreaming.com/videos/responsive-reactjs-website-gsap-styled-components\" target=\"_blank\">How to Build Responsive Website in React JS with Styled-Components and GSAP for awesome scroll Animations</a> <br />\n\n[https://youtu.be/aAEfBxcGpJ8]::\n\n### Images of Website:\n![Codebucks](https://github.com/codebucks27/Agency-website/blob/main/src/assets/Website%20Image-1.png)\n![Codebucks](https://github.com/codebucks27/Agency-website/blob/main/src/assets/Website%20Image-3.png)\n![Codebucks](https://github.com/codebucks27/Agency-website/blob/main/src/assets/Website%20Image-2.png)\n\n### [ I appreciate if you give appropriate credit when using this Website for Commercial Use ]\n\n### Resources Used in This Project\n\nDesign in : https://www.figma.com/ <br />\n3D Shapes from : https://www.figma.com/community/file/917777039353073016/3D-shapes <br />\nSocial Icons from :https://fontawesome.com/  <br />\nBlob Images from : https://www.figma.com/community/plugin/739208439270091369/Blobs <br />\nHuman Image : https://www.figma.com/community/plugin/739503328703046360/Humaaans-for-Figma <br />\nSvgs from : https://undraw.co/ <br />\nLogo from : https://www.figma.com/community/plugin/768094929040207895/Logo-Creator <br />\nRocket 3D Image from : https://www.figma.com/community/plugin/769588393361258724/Vectary-3D-Elements <br />\nAvatar-1 : \nPhoto by <a href=\"https://unsplash.com/@christiana?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Christiana Rivers</a> on <a href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Unsplash</a> <br />\nAvatar-2 : Photo by <a href=\"https://unsplash.com/@miracletwentyone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Joseph Gonzalez</a> on <a href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Unsplash</a> <br />\nAvatar-3 : Photo by <a href=\"https://unsplash.com/@samburriss?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sam Burriss</a> on <a href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Unsplash</a> <br />\nAvatar-4 : Photo by <a href=\"https://unsplash.com/@whereslugo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">whereslugo</a> on <a href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Unsplash</a> <br />\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf 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.\n\nInstead, 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.\n\nYou 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.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)\n\n### Analyzing the Bundle Size\n\nThis 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)\n\n### Making a Progressive Web App\n\nThis 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)\n\n### Advanced Configuration\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)\n\n### Deployment\n\nThis section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)\n\n### `npm run build` fails to minify\n\nThis 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)\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"agency-website\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^6.1.5\",\n    \"@testing-library/react\": \"^14.1.2\",\n    \"@testing-library/user-event\": \"^14.5.1\",\n    \"gsap\": \"^3.12.4\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-router-dom\": \"^6.21.1\",\n    \"react-scripts\": \"^5.0.1\",\n    \"react-slick\": \"^0.29.0\",\n    \"slick-carousel\": \"^1.8.1\",\n    \"styled-components\": \"^6.1.3\",\n    \"web-vitals\": \"^3.5.0\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.ico\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <meta\n      name=\"description\"\n      content=\"Web site created using create-react-app\"\n    />\n    <link rel=\"apple-touch-icon\" href=\"%PUBLIC_URL%/logo192.png\" />\n    <!-- <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" /> -->\n\n    <!-- Project Fonts -->\n    <link\n      rel=\"preconnect\"\n      media=\"print\"\n      as=\"style\"\n      href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&display=swap\"\n    />\n\n    <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" />\n\n    <title>CodeBucks</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "public/manifest.json",
    "content": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n"
  },
  {
    "path": "public/robots.txt",
    "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
  },
  {
    "path": "src/App.js",
    "content": "import { GlobalStyle } from \"./globalStyles\";\nimport { lazy, Suspense } from \"react\";\n\nconst Home = lazy(() => import(\"./Pages/Home\"));\nconst Header = lazy(() => import(\"./components/Header/index\"));\nconst Footer = lazy(() => import(\"./components/Footer/index\"));\nconst ScrollToTop = lazy(() => import(\"./components/ScrollToTop/index\"));\n\nfunction App() {\n  return (\n    <>\n      <Suspense fallback={null}>\n        <GlobalStyle />\n        {/* Hi There! */}\n        <ScrollToTop />\n        <Header />\n        <Home />\n        <Footer />\n      </Suspense>\n    </>\n  );\n}\n\nexport default App;\n"
  },
  {
    "path": "src/App.test.js",
    "content": "import { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () => {\n  render(<App />);\n  const linkElement = screen.getByText(/learn react/i);\n  expect(linkElement).toBeInTheDocument();\n});\n"
  },
  {
    "path": "src/Pages/Home.js",
    "content": "//This is home page, It will contains all the sections require in this page.\n\n//Import all the require sections here\nimport HeroSection from \"../Sections/Hero/index\";\nimport About from \"../Sections/About/index\";\nimport Services from \"../Sections/Services/index\";\nimport Testimonials from \"../Sections/Testimonials/index\";\nimport Contact from \"../Sections/Contact/index\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  /* position: relative; */\n`;\n\nconst Home = () => {\n  return (\n    <Container>\n      <HeroSection />\n      <About />\n      <Services />\n      <Testimonials />\n      <Contact />\n    </Container>\n  );\n};\n\nexport default Home;\n"
  },
  {
    "path": "src/Sections/About/index.js",
    "content": "import styled, { keyframes } from \"styled-components\";\nimport wave from \"../../assets/waves.svg\";\nimport rocket from \"../../assets/rocket image.png\";\nimport human from \"../../assets/human.svg\";\nimport hand from \"../../assets/hand.svg\";\n\nconst move = keyframes`\n0% { transform: translateY(-5px)         }\n    50% { transform: translateY(10px) translateX(10px)        }\n    100% { transform: translateY(-5px)         }\n`;\n\nconst AboutSection = styled.section`\n  width: 100vw;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n`;\nconst Waves = styled.img`\n  width: 100%;\n  height: auto;\n  position: absolute;\n  top: -1rem;\n`;\nconst Hand = styled.div`\n  position: absolute;\n  bottom: -1rem;\n  right: 0;\n\n  @media only Screen and (max-width: 40em) {\n    display: none;\n  }\n`;\n\nconst Main = styled.div`\n  margin: 0 15rem;\n  margin-top: 15rem;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  @media only Screen and (max-width: 64em) {\n    margin: 0 calc(5rem + 5vw);\n    margin-top: 10rem;\n  }\n  @media only Screen and (max-width: 40em) {\n    align-items: center;\n    margin: 3rem calc(3rem + 3vw);\n  }\n`;\n\nconst Title = styled.h1`\n  font-size: 2rem;\n  display: inline-block;\n`;\n\nconst CurvedLine = styled.div`\n  width: 7rem;\n  height: 2rem;\n  border: solid 5px var(--purple);\n  border-color: var(--purple) transparent transparent transparent;\n  border-radius: 150%/60px 70px 0 0;\n`;\n\nconst Content = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  @media only Screen and (max-width: 40em) {\n    flex-direction: column;\n  }\n`;\n\nconst Rocket = styled.div`\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  width: 40%;\n  padding-bottom: 5rem;\n  animation: ${move} 2.5s ease infinite;\n  @media only Screen and (max-width: 40em) {\n    width: 50vw;\n    padding-bottom: 0;\n  }\n`;\n\nconst Human = styled.div`\n  width: 50%;\n  position: absolute;\n  right: 0;\n  bottom: 100%;\n\n  @media only Screen and (max-width: 40em) {\n    display: none;\n  }\n`;\nconst Text = styled.h4`\n  font-size: calc(0.5rem + 1vw);\n  line-height: 1.5;\n  color: var(--nav2);\n`;\nconst Circle = styled.span`\n  display: inline-block;\n  width: 1rem;\n  height: 1rem;\n  border-radius: 50%;\n  background-color: black;\n  margin-right: 0.5rem;\n  margin-top: 1rem;\n`;\nconst AboutText = styled.div`\n  width: 50%;\n  position: relative;\n  @media only Screen and (max-width: 40em) {\n    width: 100%;\n  }\n`;\n\nconst About = () => {\n  return (\n    <AboutSection id=\"about\">\n      <Waves src={wave} alt=\"\" />\n      <Hand>\n        <img src={hand} alt=\"\" />\n      </Hand>\n      <Main>\n        <div>\n          <Title>About Us</Title>\n          <CurvedLine />\n        </div>\n        <Content>\n          <Rocket>\n            <img src={rocket} alt=\"\" width=\"400\" height=\"400\" />\n          </Rocket>\n          <AboutText>\n            <Human>\n              <img src={human} alt=\"\" width=\"400\" height=\"400\" />\n            </Human>\n\n            <Text>\n              We help our customers to tell about themselves, to grow and stand\n              out in an increasingly competitive digital world, through creative\n              projects that are able to attract and involve, creating strategic\n              value.\n            </Text>\n            <div>\n              <Circle style={{ backgroundColor: \"var(--purple)\" }} />\n              <Circle style={{ backgroundColor: \"var(--pink)\" }} />\n              <Circle style={{ backgroundColor: \"var(--black)\" }} />\n            </div>\n          </AboutText>\n        </Content>\n      </Main>\n    </AboutSection>\n  );\n};\n\nexport default About;\n"
  },
  {
    "path": "src/Sections/Contact/index.js",
    "content": "import Facebook from \"../../assets/facebook-square-brands.svg\";\nimport LinkedId from \"../../assets/linkedin-brands.svg\";\nimport Twitter from \"../../assets/twitter-square-brands.svg\";\nimport Instagram from \"../../assets/instagram-square-brands.svg\";\nimport styled from \"styled-components\";\n\nconst ContactSection = styled.section`\n  width: 100vw;\n  padding: calc(2.5rem + 2.5vw) 0;\n  background-color: #0a0b10;\n  display: flex;\n  flex-direction: column;\n  /* justify-content: center; */\n  align-items: center;\n  justify-content: center;\n`;\n\nconst Title = styled.h1`\n  color: var(--white);\n  display: inline-block;\n  font-size: 2rem;\n  margin-bottom: 3rem;\n  position: relative;\n  &::before {\n    content: \"\";\n    height: 1px;\n    width: 50%;\n    position: absolute;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 0.5rem);\n    /* or 100px */\n    border-bottom: 2px solid var(--pink);\n  }\n`;\n\nconst Icons = styled.div`\n  display: flex;\n  margin-bottom: 3rem;\n  a {\n    &:hover {\n      img {\n        filter: invert(20%) sepia(100%) saturate(500%) hue-rotate(580deg)\n          brightness(100%) contrast(97%);\n      }\n    }\n    &:not(:last-child) {\n      margin-right: 2rem;\n    }\n    img {\n      width: 3rem;\n      height: 3rem;\n    }\n  }\n`;\n\nconst Form = styled.form`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  input {\n    padding: 1rem calc(0.5rem + 1vw);\n    margin-bottom: 1rem;\n    background-color: var(--nav2);\n    border: none;\n    border-radius: 4px;\n    color: #eff7f8;\n    &:active,\n    &:focus {\n      border: none;\n      outline: none;\n      background-color: var(--nav);\n    }\n    &::placeholder {\n      color: #eff7f8;\n      opacity: 0.6;\n    }\n    &[name=\"name\"] {\n      margin-right: 2rem;\n    }\n  }\n  textarea {\n    padding: 1rem calc(0.5rem + 1vw);\n    margin-bottom: 1rem;\n    background-color: var(--nav2);\n    border: none;\n    border-radius: 4px;\n    color: #eff7f8;\n    margin-bottom: 2rem;\n    &:focus,\n    &:active {\n      background-color: var(--nav);\n    }\n    &::placeholder {\n      color: #eff7f8;\n      opacity: 0.6;\n    }\n  }\n  button {\n    padding: 0.8rem 2rem;\n    background-color: var(--white);\n    border-radius: 20px;\n    font-size: 1.2rem;\n    color: #0a0b10;\n    cursor: pointer;\n    transition: transform 0.3s;\n    &:hover {\n      transform: scale(1.1);\n    }\n    &:active {\n      transform: scale(0.9);\n    }\n  }\n`;\n\nconst Row = styled.div`\n  @media only Screen and (max-width: 40em) {\n    display: flex;\n    flex-direction: column;\n    input {\n      &[name=\"name\"] {\n        margin-right: 0;\n      }\n    }\n  }\n`;\nconst Contact = () => {\n  return (\n    <ContactSection id=\"contact\">\n      <Title>Get in touch</Title>\n      {/* <Text>Lorem ipsum dolor sit amet, consectetur adipisicing.</Text> */}\n      <Icons>\n        <a href=\"https://www.facebook.com/\">\n          {\" \"}\n          <img src={Facebook} alt=\"Facebook\" />\n        </a>\n        <a href=\"https://www.linkedin.com//\">\n          <img src={LinkedId} alt=\"LinkedId\" />\n        </a>\n        <a href=\"https://twitter.com/\">\n          <img src={Twitter} alt=\"Twitter\" />\n        </a>\n        <a href=\"https://www.instagram.com/\">\n          <img src={Instagram} alt=\"Instagram\" />\n        </a>\n      </Icons>\n      <Form>\n        <Row>\n          <input name=\"name\" type=\"text\" placeholder=\"your name\" />\n          <input\n            name=\"email\"\n            type=\"email\"\n            placeholder=\"enter working email id\"\n          />\n        </Row>\n        <textarea\n          name=\"\"\n          id=\"\"\n          cols=\"30\"\n          rows=\"2\"\n          placeholder=\"your message\"\n        ></textarea>\n        <div style={{ margin: \"0 auto\" }}>\n          <button\n            onClick={(e) => {\n              e.preventDefault();\n            }}\n          >\n            Submit\n          </button>\n        </div>\n      </Form>\n    </ContactSection>\n  );\n};\n\nexport default Contact;\n"
  },
  {
    "path": "src/Sections/Hero/index.js",
    "content": "// This is HeroSection component, Main top section of website\n\nimport styled, { keyframes } from \"styled-components\";\n\nimport pinkBlob from \"../../assets/blobPink.png\";\nimport purpleBlob from \"../../assets/blob purple.png\";\nimport whiteBlob from \"../../assets/blob white.png\";\nimport arrow from \"../../assets/Arrow Right.svg\";\nimport Mobile from \"../../assets/mobile.svg\";\n\nconst move = keyframes`\n0% { transform: translateY(-5px)  }\n    50% { transform: translateY(10px) }\n    100% { transform: translateY(-5px) }\n`;\n\nconst HomeSection = styled.section`\n  width: 100vw;\n  height: 45vw;\n  background-color: #0a0b10;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  @media only Screen and (max-width: 48em) {\n    height: 70vw;\n    display: block;\n  }\n  @media only Screen and (max-width: 420px) {\n    height: auto;\n    padding-bottom: 2rem;\n  }\n`;\n\nconst Blobs = styled.div`\n  width: 100%;\n  position: absolute;\n  right: 0;\n  @media only Screen and (max-width: 48em) {\n    opacity: 0.5;\n  }\n`;\n\nconst PinkBlob = styled.div`\n  width: calc(15% + 15vw);\n  position: absolute;\n  right: 0;\n  top: calc(5rem + 5vw);\n  z-index: 6;\n`;\nconst PurpleBlob = styled.div`\n  width: calc(10% + 10vw);\n  position: absolute;\n  right: 0;\n`;\nconst WhiteBlob = styled.div`\n  width: calc(20% + 20vw);\n  position: absolute;\n  right: calc(3.5rem + 3.5vw);\n  top: calc(2rem + 2vw);\n  z-index: 5;\n`;\n\nconst MainContent = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 70vw;\n  @media only Screen and (max-width: 48em) {\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 100vw;\n  }\n`;\n\nconst MobileSvg = styled.img`\n  max-width: 100%;\n  width: calc(30% + 20vw);\n  height: auto;\n  z-index: 7;\n  animation: ${move} 2.5s ease infinite;\n  @media only Screen and (max-width: 48em) {\n    align-self: flex-start;\n    position: absolute;\n    bottom: 0;\n    width: calc(30% + 20vw);\n    opacity: 0.5;\n  }\n  @media only Screen and (max-width: 40em) {\n    display: none;\n  }\n`;\n\nconst Lb = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 50%;\n  line-height: 1.5;\n  color: var(--white);\n  position: relative;\n  z-index: 15;\n  @media only Screen and (max-width: 48em) {\n    width: 80%;\n    text-align: center;\n    align-items: center;\n    justify-content: space-around;\n    margin-top: calc(2.5rem + 2.5vw);\n    filter: drop-shadow(2px 4px 6px black);\n  }\n  @media only Screen and (max-width: 40em) {\n    filter: none;\n  }\n`;\n\nconst Topic = styled.span`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--nav);\n  color: var(--white);\n  font-weight: 700;\n  font-size: calc(0.4rem + 0.4vw);\n  padding: 0.5rem 1rem;\n  border-radius: 20px;\n`;\n\nconst Circle = styled.span`\n  display: inline-block;\n  width: 1rem;\n  height: 1rem;\n  border-radius: 50%;\n  background-color: var(--purple);\n  margin-right: 0.5rem;\n`;\n\nconst Title = styled.h1`\n  font-size: calc(2rem + 1vw);\n  line-height: 1.2;\n  padding: 0.5rem 0;\n`;\n\nconst SubText = styled.h5`\n  font-size: calc(0.5rem + 0.5vw);\n  color: var(--nav2);\n`;\n\nconst CTA = styled.button`\n  background-color: var(--white);\n  color: #0a0b10;\n  padding: 0.5rem 1rem;\n  margin-top: 1rem;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: calc(0.5rem + 0.5vw);\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  transition: transform 0.2s;\n\n  img {\n    width: 1.5rem;\n  }\n  @media only screen and (max-width: 48em) {\n    padding: 0.2rem 1rem;\n  }\n  &:hover {\n    transform: scale(1.1);\n  }\n  &:active {\n    transform: scale(0.9);\n  }\n`;\n\nconst HeroSection = () => {\n  return (\n    <HomeSection id=\"home\">\n      <Blobs>\n        <PinkBlob>\n          <img src={pinkBlob} alt=\"\" width=\"400\" height=\"400\" />{\" \"}\n        </PinkBlob>\n        <WhiteBlob>\n          <img src={whiteBlob} alt=\"\" width=\"400\" height=\"400\" />\n        </WhiteBlob>\n        <PurpleBlob>\n          <img src={purpleBlob} alt=\"\" width=\"400\" height=\"400\" />\n        </PurpleBlob>\n      </Blobs>\n\n      <MainContent id=\"home\">\n        <Lb id=\"leftBlock\">\n          <Topic>\n            <Circle />\n            <span>We Build Web</span>\n          </Topic>\n          <Title>Transforming your digital presence</Title>\n          <SubText>\n            we help fast growing companies build award winning websites\n          </SubText>\n          <CTA>\n            Get in touch &nbsp;\n            <img src={arrow} alt=\"cta\" width=\"100\" height=\"100\" />\n          </CTA>\n        </Lb>\n\n        <MobileSvg\n          src={Mobile}\n          alt=\"Mobile Svg\"\n          srcSet=\"\"\n          width=\"400\"\n          height=\"400\"\n        />\n      </MainContent>\n    </HomeSection>\n  );\n};\n\nexport default HeroSection;\n"
  },
  {
    "path": "src/Sections/Services/index.js",
    "content": "import gsap from \"gsap\";\nimport { useEffect, useRef } from \"react\";\nimport styled from \"styled-components\";\n\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\nimport Tube from \"../../assets/3dtube.png\";\nimport Cone from \"../../assets/3dtriangle.png\";\nimport Capsule from \"../../assets/3dcapsule.png\";\n\nimport TextBlock from \"../../components/TextBlock\";\nimport SvgBlock from \"../../components/SvgBlock\";\n\n// const TextBlock = lazy(() => import(\"../../components/TextBlock\"));\n// const SvgBlock = lazy(() => import(\"../../components/SvgBlock\"));\n\nconst ServiceSection = styled.section`\n  width: 100vw;\n  /* background-color: #0a0b10; */\n  display: flex;\n  flex-direction: column;\n  /* justify-content: center; */\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding-top: 20rem;\n`;\n\nconst Background = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 85vh;\n  z-index: -1;\n  background-color: #0a0b10;\n  background-size: auto 100vh;\n  background-repeat: no-repeat;\n`;\n\nconst Title = styled.h1`\n  color: var(--white);\n  display: inline-block;\n  font-size: 2rem;\n  /* margin-top: 4rem; */\n  margin-top: 1rem;\n  position: relative;\n  &::before {\n    content: \"\";\n    height: 1px;\n    width: 50%;\n    position: absolute;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 0.5rem);\n    /* or 100px */\n    border-bottom: 2px solid var(--pink);\n  }\n`;\n\nconst Line = styled.span`\n  border-left: 4px solid var(--background);\n  height: 15rem;\n  margin-top: 2rem;\n  border-radius: 20px 20px 0 0;\n`;\n\nconst Triangle = styled.span`\n  width: 0;\n  height: 0;\n  border-left: 1.2rem solid transparent;\n  border-right: 1.2rem solid transparent;\n  border-top: 2rem solid var(--background);\n`;\n\nconst Content = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 10rem 10rem;\n  /* margin-bottom: 10rem; */\n  position: relative;\n  @media only Screen and (max-width: 64em) {\n    margin: 10rem calc(4rem + 5vw);\n  }\n  @media only Screen and (max-width: 48em) {\n    display: block;\n    &:last-child {\n      margin-bottom: 2rem;\n    }\n  }\n  @media only Screen and (max-width: 40em) {\n    margin: 10rem calc(2rem + 3vw);\n    &:last-child {\n      margin-bottom: 1rem;\n    }\n  }\n`;\n\nconst OBJ = styled.div`\n  position: absolute;\n  top: 80%;\n  right: 35%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 20vw;\n  /* z-index: 1; */\n\n  @media only Screen and (max-width: 48em) {\n    opacity: 0.5;\n  }\n`;\n\nconst Services = () => {\n  const ref = useRef(null);\n  gsap.registerPlugin(ScrollTrigger);\n  const revealRefs = useRef([]);\n  revealRefs.current = [];\n\n  useEffect(() => {\n    const element = ref.current;\n    ////\n    const mq = window.matchMedia(\"(max-width: 48em)\");\n    const t1 = gsap.timeline({\n      scrollTrigger: {\n        trigger: document.getElementById(\"services\"),\n\n        start: \"top top+=180\",\n\n        end: \"bottom bottom\",\n\n        pin: element,\n        pinReparent: true,\n      },\n    });\n    t1.fromTo(\n      document.getElementById(\"line\"),\n\n      {\n        height: \"15rem\",\n      },\n      {\n        height: \"3rem\",\n        duration: 2,\n        scrollTrigger: {\n          trigger: document.getElementById(\"line\"),\n          start: \"top top+=200\",\n          end: \"bottom top+=220\",\n          scrub: true,\n        },\n      }\n    );\n\n    revealRefs.current.forEach((el, index) => {\n      // console.log(el.childNodes);\n      if (mq.matches) {\n        t1.from(\n          el.childNodes[0],\n\n          {\n            x: -300,\n            opacity: 0,\n            duration: 2,\n\n            ease: \"power2\",\n            scrollTrigger: {\n              id: `section-${index + 1}`,\n              trigger: el,\n              start: \"top center+=200\",\n              end: \"bottom bottom-=100\",\n              scrub: true,\n              snap: true,\n              //\n              // toggleActions: \"play none none reverse\",\n            },\n          }\n        )\n          .to(el.childNodes[1], {\n            transform: \"scale(0)\",\n\n            ease: \"power2.inOut\",\n\n            scrollTrigger: {\n              id: `section-${index + 1}`,\n              trigger: el.childNodes[1],\n              start: \"top center\",\n              end: \"bottom center\",\n              scrub: true,\n              snap: true,\n\n              // toggleActions: \"play none none reverse\",\n            },\n          })\n          .from(\n            el.childNodes[2],\n\n            {\n              y: 400,\n\n              duration: 2,\n\n              ease: \"power2\",\n              scrollTrigger: {\n                id: `section-${index + 1}`,\n                trigger: el,\n                start: \"top center+=100\",\n                end: \"bottom bottom-=200\",\n                scrub: true,\n                snap: true,\n                //\n                // toggleActions: \"play none none reverse\",\n              },\n            }\n          )\n          .to(\n            el,\n\n            {\n              opacity: 0,\n\n              ease: \"power2\",\n              scrollTrigger: {\n                id: `section-${index + 1}`,\n                trigger: el,\n                start: \"top top+=300\",\n                end: \"center top+=300\",\n                scrub: true,\n              },\n            }\n          );\n      } else {\n        t1.from(\n          el.childNodes[0],\n\n          {\n            x: -300,\n            opacity: 0,\n            duration: 2,\n\n            ease: \"power2\",\n            scrollTrigger: {\n              id: `section-${index + 1}`,\n              trigger: el,\n              start: \"top center+=100\",\n              end: \"bottom bottom-=200\",\n              scrub: true,\n              snap: true,\n              //\n              // toggleActions: \"play none none reverse\",\n            },\n          }\n        )\n          .to(el.childNodes[1], {\n            transform: \"scale(0)\",\n\n            ease: \"power2.inOut\",\n\n            scrollTrigger: {\n              id: `section-${index + 1}`,\n              trigger: el.childNodes[1],\n              start: \"top center\",\n              end: \"bottom center\",\n              scrub: true,\n              snap: true,\n\n              // toggleActions: \"play none none reverse\",\n            },\n          })\n          .from(\n            el.childNodes[2],\n\n            {\n              y: 400,\n\n              duration: 2,\n\n              ease: \"power2\",\n              scrollTrigger: {\n                id: `section-${index + 1}`,\n                trigger: el,\n                start: \"top center+=100\",\n                end: \"bottom bottom-=200\",\n                scrub: true,\n                snap: true,\n                //\n                // toggleActions: \"play none none reverse\",\n              },\n            }\n          )\n          .to(\n            el,\n\n            {\n              opacity: 0,\n\n              ease: \"power2\",\n              scrollTrigger: {\n                id: `section-${index + 1}`,\n                trigger: el,\n                start: \"top top+=200\",\n                end: \"center top+=300\",\n                scrub: true,\n              },\n            }\n          );\n      }\n    });\n  }, []);\n\n\n  const addToRefs = (el) => {\n    if (el && !revealRefs.current.includes(el)) {\n      revealRefs.current.push(el);\n    }\n  };\n\n  \n  return (\n    <ServiceSection id=\"services\">\n      <Background ref={ref}>\n        <Title className=\"title\">What We Do</Title>\n        <Line id=\"line\" />\n        <Triangle id=\"triangle\" />\n      </Background>\n\n      <Content ref={addToRefs}>\n        <TextBlock\n          topic=\"Design\"\n          title={<h1>We build award winning Designs</h1>}\n          subText={\n            <h5>\n              We help clients to build great design to attract more customers\n            </h5>\n          }\n        />\n        <OBJ>\n          <img src={Tube} alt=\"Tube Object\" width=\"400\" height=\"400\" />\n        </OBJ>\n        <SvgBlock svg=\"Design.svg\" />\n      </Content>\n      <Content ref={addToRefs}>\n        <TextBlock\n          topic=\"Develop\"\n          title={<h1>We Develope high quality Web & App</h1>}\n          subText={\n            <h5>\n              We build appropriate solution to develope your website & app with\n              best tools available\n            </h5>\n          }\n        />\n        <OBJ>\n          <img src={Cone} alt=\"Cone Object\" width=\"400\" height=\"400\" />\n        </OBJ>\n        <SvgBlock svg=\"Develope.svg\" />\n      </Content>\n      <Content>\n        <TextBlock\n          topic=\"Support\"\n          title={<h1>We provide support for your digital presence</h1>}\n          subText={\n            <h5>\n              Once your system is online, we will stay on hand to help you use\n              it and provide technical support and maintenance <br /> your\n              business\n            </h5>\n          }\n        />\n        <OBJ>\n          <img src={Capsule} alt=\"Capsule Object\" width=\"400\" height=\"400\" />\n        </OBJ>\n        <SvgBlock svg=\"Support.svg\" />\n      </Content>\n    </ServiceSection>\n  );\n};\n\nexport default Services;\n"
  },
  {
    "path": "src/Sections/Testimonials/index.js",
    "content": "import React, { lazy } from \"react\";\nimport styled from \"styled-components\";\n\nimport Slider from \"react-slick\";\nimport \"../../../node_modules/slick-carousel/slick/slick.css\";\nimport \"../../../node_modules/slick-carousel/slick/slick-theme.css\";\n\nconst Card = lazy(() => import(\"../../components/Card/index\"));\n\nconst Section = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: 5rem 0;\n`;\n\nconst Title = styled.h1`\n  color: #0a0b10;\n  display: inline-block;\n  font-size: calc(1rem + 1.5vw);\n  margin-top: 1.5rem;\n  position: relative;\n  &::before {\n    content: \"\";\n    height: 1px;\n    width: 50%;\n    position: absolute;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 0.5rem);\n    /* or 100px */\n    border-bottom: 2px solid var(--purple);\n  }\n`;\n\nconst Carousal = styled.div`\n  width: 50vw;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  @media only Screen and (max-width: 40em) {\n    width: 90vw;\n    .slick-slider .slick-arrow {\n      display: none;\n    }\n  }\n  .slick-slider .slick-arrow:before {\n    color: #0a0b10;\n    font-size: 1.5rem;\n    @media only Screen and (max-width: 40em) {\n      display: none;\n    }\n  }\n  .slick-slider .slick-dots button:before {\n    color: #0a0b10;\n    font-size: 1.5rem;\n  }\n  .slick-slide.slick-active {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    margin-bottom: 3rem;\n  }\n`;\n\nconst Testimonials = () => {\n  const settings = {\n    dots: true,\n    infinite: true,\n\n    speed: 1000,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n  };\n\n  return (\n    <Section>\n      <Title>Few good words about us!</Title>\n      <Carousal>\n        <Slider {...settings}>\n          <Card\n            text=\"CodeBucks has been essential part of our business. I would definetly\n        recommend CodeBucks. It has been amazing to have them.\"\n            name=\"Jenny (CodeCall)\"\n            image=\"avatar-1\"\n          />\n\n          <Card\n            text=\"CodeBucks has been essential part of our business. I would definetly recommend CodeBucks. It has been amazing to have them.\"\n            name=\"Jenny (CodeCall)\"\n            image=\"avatar-2\"\n          />\n\n          <Card\n            text=\"CodeBucks has been essential part of our business. I would definetly recommend CodeBucks. It has been amazing to have them.\"\n            name=\"Jenny (CodeCall)\"\n            image=\"avatar-3\"\n          />\n\n          <Card\n            text=\"CodeBucks has been essential part of our business. I would definetly recommend CodeBucks. It has been amazing to have them.\"\n            name=\"Jenny (CodeCall)\"\n            image=\"avatar-4\"\n          />\n        </Slider>\n      </Carousal>\n    </Section>\n  );\n};\n\nexport default Testimonials;\n"
  },
  {
    "path": "src/components/Card/index.js",
    "content": "import styled from \"styled-components\";\n\nconst CARD = styled.div`\n  height: calc(8rem + 12vw);\n  width: calc(9rem + 12vw);\n  background-color: var(--nav2);\n  border-radius: 20px;\n  position: relative;\n  margin-top: calc(5rem + 5vw);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst Image = styled.div`\n  width: 40%;\n  height: 40%;\n  position: absolute;\n  left: 50%;\n  bottom: 80%;\n  transform: translate(-50%);\n  border-radius: 50%;\n  background-color: red;\n  background: url(${(props) => props.img});\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: top;\n  filter: drop-shadow(0px -3px 3px var(--nav2));\n`;\n\nconst TEXT = styled.h4`\n  color: var(--white);\n  padding: 0 calc(1rem + 1vw);\n\n  text-align: center;\n  font-size: calc(0.6rem + 0.5vw);\n`;\n\nconst NAME = styled.h3`\n  color: var(--pink);\n  padding-top: 1rem;\n  font-size: calc(0.5rem + 1vw);\n`;\n\nconst Card = ({ name, text, image }) => {\n  const Avatar = require(`../../assets/${image}.jpg`);\n\n  return (\n    <CARD>\n      <Image img={Avatar} width=\"400\" height=\"400\" />\n      <TEXT>{text}</TEXT>\n      <NAME>{name}</NAME>\n    </CARD>\n  );\n};\n\nexport default Card;\n"
  },
  {
    "path": "src/components/Footer/index.js",
    "content": "import styled from \"styled-components\";\nimport Twitter from \"../../assets/twitter-square-brands.svg\";\nimport Instagram from \"../../assets/instagram-square-brands.svg\";\nimport Gmail from \"../../assets/envelope-open-solid.svg\";\n\nconst FOOTER = styled.footer`\n  padding: 1.2rem calc(2.5rem + 2.5vw);\n  font-size: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  @media only Screen and (max-width: 48em) {\n    flex-direction: column;\n    align-items: center;\n    div {\n      &:first-child {\n        margin-bottom: 1rem;\n      }\n    }\n  }\n`;\n\nconst RightText = styled.div`\n  display: flex;\n  align-items: center;\n  img {\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-left: 1rem;\n    filter: invert(100%);\n    transition: all 0.2s ease-in-out;\n  }\n  a {\n    &:hover {\n      img {\n        transform: scale(1.5);\n        filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(216deg)\n          brightness(100%) contrast(97%);\n      }\n    }\n  }\n`;\nconst LeftText = styled.div`\n  text-align: left;\n`;\nconst Footer = () => {\n  return (\n    <FOOTER>\n      <LeftText>\n        © 2021 Built and Design by{\" \"}\n        <a href=\"https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA\">\n          @CodeBucks\n        </a>\n      </LeftText>\n      <RightText>\n        Reach out to me via 😉\n        <a href=\"https://twitter.com/code_bucks\">\n          <img src={Twitter} alt=\"Twitter\" />\n        </a>\n        &nbsp;\n        <a href=\"https://www.instagram.com/code.bucks/\">\n          <img src={Instagram} alt=\"Instagram\" />\n        </a>\n        &nbsp;\n        <a href=\"mailto:codebucks27@gmail.com?subject=Email From Your Website\">\n          <img src={Gmail} alt=\"Gmail\" />\n        </a>\n      </RightText>\n    </FOOTER>\n  );\n};\n\nexport default Footer;\n\n//© 2021 by CodeBucks. Design by @CodeBucks.\n"
  },
  {
    "path": "src/components/Header/index.js",
    "content": "import { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\nimport { useEffect, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport logo from \"../../assets/logo.svg\";\n\nconst Headers = styled.header`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 5rem;\n  background-color: var(--nav);\n  color: var(--white);\n  position: relative;\n  z-index: 500;\n  @media only Screen and (max-width: 64em) {\n    padding: 0.5rem 3rem;\n  }\n  @media only Screen and (max-width: 40em) {\n    padding: 0.5rem 1.5rem;\n  }\n`;\n\nconst Logo = styled.a`\n  display: flex;\n  align-items: center;\n  width: 2rem;\n  height: auto;\n  cursor: pointer;\n  img {\n    margin-right: 0.5rem;\n  }\n`;\n\nconst Nav = styled.nav`\n  width: 25rem;\n  max-width: 40rem;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition: all 0.3s;\n  @media only Screen and (max-width: 48em) {\n    display: none;\n  }\n  a {\n    font-weight: 600;\n    line-height: 1.5;\n    color: var(--white);\n    &::after {\n      content: \"\";\n      display: block;\n      height: 3px;\n      width: 0;\n      background: transparent;\n      transition: width 0.5s;\n    }\n    &:not(:last-child):hover::after {\n      width: 100%;\n      background: var(--purple);\n    }\n    /* &:not(:last-child) {\n      margin-right: 2rem;\n    } */\n    /* @media only Screen and (max-width: 48em) {\n      &:not(:last-child) {\n        margin-right: 1rem;\n      }\n    } */\n  }\n`;\n\nconst Button = styled.button`\n  background-color: var(--purple);\n  padding: 0.5rem 1rem;\n  border-radius: 20px;\n  color: var(--white);\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s;\n  &:hover {\n    transform: scale(1.1);\n  }\n  &:focus {\n    transform: scale(0.9);\n  }\n  @media only Screen and (max-width: 40em) {\n    font-size: 1.2rem;\n    &:hover {\n      transform: none;\n    }\n    &:focus {\n      transform: none;\n    }\n  }\n`;\nconst HamburgerBtn = styled.button`\n  display: none;\n  @media only Screen and (max-width: 48em) {\n    display: inline-block;\n  }\n  position: relative;\n  background-color: transparent;\n  width: 2rem;\n  height: 2px;\n  margin-top: 0rem;\n  transition: all 0.3s;\n  cursor: pointer;\n  &::before,\n  &::after {\n    content: \"\";\n    background-color: var(--white);\n    width: 2rem;\n    height: 2px;\n    display: inline-block;\n    position: absolute;\n    left: 0;\n    cursor: pointer;\n\n    transition: all 0.3s;\n  }\n  &::before {\n    top: ${(props) => (props.clicked ? \"0\" : \"-0.5rem\")};\n    transform: ${(props) => (props.clicked ? \"rotate(135deg)\" : \"rotate(0)\")};\n  }\n  &::after {\n    top: ${(props) => (props.clicked ? \"0\" : \"0.5rem\")};\n    transform: ${(props) => (props.clicked ? \"rotate(-135deg)\" : \"rotate(0)\")};\n  }\n`;\n\nconst MobileMenu = styled.nav`\n  display: none;\n  @media only Screen and (max-width: 48em) {\n    display: flex;\n  }\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem 0;\n  overflow-x: hidden;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  opacity: ${(props) => (props.clicked ? \"1\" : 0)};\n  visibility: ${(props) => (props.clicked ? \"visible\" : \"hidden\")};\n  transition: all 0.5s;\n  z-index: -10;\n  background-color: rgb(53 53 63 / 95%);\n  border-radius: 20px;\n  margin: 0.5rem;\n  a {\n    color: var(--white);\n    font-weight: 600;\n    font-size: 1.5rem;\n    margin: 1.5rem;\n    cursor: pointer;\n  }\n`;\nconst Header = () => {\n  const [click, setClick] = useState(false);\n  //const handleClick = () => setClick(!click);\n  const ref = useRef(null);\n\n  gsap.registerPlugin(ScrollTrigger);\n\n  const scrollUp = (id, e) => {\n    e.preventDefault();\n    const element = document.getElementById(id);\n    element.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"end\",\n      inline: \"nearest\",\n    });\n  };\n\n  const handleClick = (id, e) => {\n    setClick(!click);\n    scrollUp(id, e);\n  };\n\n  useEffect(() => {\n    const element = ref.current;\n\n    const mq = window.matchMedia(\"(max-width: 40em)\");\n    // console.log(\"mq\", mq);\n    if (mq.matches) {\n      gsap.to(element, {\n        position: \"fixed\",\n        top: \"0\",\n        left: \"0\",\n        right: \"0\",\n        padding: \"1rem 2.5rem\",\n\n        borderRadius: \"0 0 50px 50px\",\n\n        border: \"2px solid var(--white)\",\n\n        duration: 1,\n        ease: \"power1.out\",\n\n        scrollTrigger: {\n          trigger: element,\n          start: \"bottom+=200 top\",\n          end: \"+=100\",\n          scrub: true,\n        },\n      });\n    } else {\n      gsap.to(element, {\n        position: \"fixed\",\n        top: \"1rem\",\n        left: \"3rem\",\n        right: \"3rem\",\n        padding: \"1.5rem 2rem\",\n\n        borderRadius: \"50px\",\n\n        border: \"3px solid var(--white)\",\n\n        duration: 1,\n        ease: \"power1.out\",\n\n        scrollTrigger: {\n          trigger: element,\n          start: \"bottom+=300 top\",\n          end: \"+=250\",\n          scrub: true,\n        },\n      });\n    }\n  }, []);\n\n  return (\n    <Headers ref={ref}>\n      <Logo>\n        <img src={logo} alt=\"CodeBucks\" />\n        <h3>CodeBucks</h3>\n      </Logo>\n      <Nav>\n        <a href=\"#home\" onClick={(e) => scrollUp(\"home\", e)}>\n          Home\n        </a>\n        <a href=\"#about\" onClick={(e) => scrollUp(\"about\", e)}>\n          About Us\n        </a>\n        <a href=\"#services\" onClick={(e) => scrollUp(\"services\", e)}>\n          Services\n        </a>\n        <a href=\"#contact\" onClick={(e) => scrollUp(\"contact\", e)}>\n          <Button>Contact Us</Button>\n        </a>\n      </Nav>\n      <HamburgerBtn clicked={+click} onClick={() => setClick(!click)}>\n        <span></span>\n      </HamburgerBtn>\n      <MobileMenu clicked={+click}>\n        <a href=\"#home\" onClick={(e) => handleClick(\"home\", e)}>\n          Home\n        </a>\n        <a href=\"#about\" onClick={(e) => handleClick(\"about\", e)}>\n          About Us\n        </a>\n        <a href=\"#services\" onClick={(e) => handleClick(\"services\", e)}>\n          Services\n        </a>\n        <a href=\"#contact\" onClick={(e) => handleClick(\"contact\", e)}>\n          <Button>Contact Us</Button>\n        </a>\n      </MobileMenu>\n    </Headers>\n  );\n};\n\nexport default Header;\n"
  },
  {
    "path": "src/components/ScrollToTop/index.js",
    "content": "import SvgIcon from \"../../assets/arrow-up.svg\";\n\nimport styled from \"styled-components\";\nimport { useEffect, useRef } from \"react\";\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\nexport const Up = styled.div`\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgba(0, 0, 0, 0.65);\n  font-size: 14px;\n  line-height: 1.5715;\n  list-style: none;\n  position: fixed;\n  right: 100px;\n  bottom: 80px;\n  z-index: 10;\n  width: 40px;\n  height: 40px;\n  cursor: pointer;\n  @media screen and (max-width: 48em) {\n    display: none;\n  }\n  img {\n    width: 3rem;\n    height: 3rem;\n    border: 2px solid var(--white);\n    border-radius: 50%;\n    background-color: var(--white);\n    transition: transform 0.3s;\n    display: none;\n    &:hover {\n      transform: scale(1.2);\n    }\n    &:active {\n      transform: scale(0.9);\n    }\n  }\n`;\n\nconst ScrollToTop = () => {\n  const ref = useRef(null);\n  gsap.registerPlugin(ScrollTrigger);\n\n  const scrollUp = () => {\n    const element = document.getElementById(\"home\");\n    element.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"end\",\n      inline: \"nearest\",\n    });\n  };\n\n  useEffect(() => {\n    const element = ref.current;\n    gsap.to(element, {\n      display: \"block\",\n      scrollTrigger: {\n        trigger: element,\n        start: \"top top\",\n        scrub: true,\n      },\n    });\n  }, []);\n\n  return (\n    <Up onClick={scrollUp}>\n      <img ref={ref} src={SvgIcon} alt=\"to top\" />\n    </Up>\n  );\n};\n\nexport default ScrollToTop;\n"
  },
  {
    "path": "src/components/SvgBlock/index.js",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Rb = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 40%;\n  position: relative;\n  /* z-index: 10; */\n  svg {\n    width: 100%;\n    height: auto;\n  }\n  @media only Screen and (max-width: 48em) {\n    display: none;\n  }\n`;\n\nconst SvgBlock = ({ svg }) => {\n  const SvgIcon = require(`../../assets/${svg}`);\n  //console.log(SvgIcon);\n  return (\n    <Rb id=\"svgBlock\">\n      <img src={SvgIcon} alt=\"Services\" />\n    </Rb>\n  );\n};\n\nexport default SvgBlock;\n"
  },
  {
    "path": "src/components/TextBlock/index.js",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Lb = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n\n  width: 50%;\n  line-height: 1.5;\n  color: var(--white);\n\n  position: relative;\n\n  @media only Screen and (max-width: 48em) {\n    width: 100%;\n    align-items: center;\n    text-align: center;\n  }\n  /* z-index: 1; */\n`;\nconst Topic = styled.span`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: var(--nav);\n  color: var(--white);\n  font-weight: 700;\n  font-size: calc(0.4rem + 0.4vw);\n  padding: 0.5rem 1rem;\n  border-radius: 20px;\n\n  @media only Screen and (max-width: 48em) {\n    font-size: calc(0.4rem + 0.8vw);\n  }\n`;\nconst Circle = styled.span`\n  display: inline-block;\n  width: 1rem;\n  height: 1rem;\n  border-radius: 50%;\n  background-color: var(--purple);\n  margin-right: 0.5rem;\n`;\n\nconst Title = styled.div`\n  font-size: calc(1rem + 1vw);\n  line-height: 1.2;\n  padding: 0.5rem 0;\n  @media only Screen and (max-width: 48em) {\n    font-size: calc(1rem + 1.5vw);\n  }\n`;\n\nconst SubText = styled.div`\n  font-size: calc(0.5rem + 0.5vw);\n  color: var(--nav2);\n  @media only Screen and (max-width: 48em) {\n    font-size: calc(0.5rem + 1vw);\n  }\n`;\n\nconst TextBlock = ({ topic, title, subText, children }) => {\n  return (\n    <Lb id=\"leftBlock\">\n      <Topic>\n        <Circle />\n        <span>{topic}</span>\n      </Topic>\n      <Title>{title}</Title>\n      <SubText>{subText}</SubText>\n      {children}\n    </Lb>\n  );\n};\n\nexport default TextBlock;\n"
  },
  {
    "path": "src/globalStyles.js",
    "content": "import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n\n:root{\n   --background: #eff7f9;\n   --black:#0a0b10;\n   --purple:#803bec;\n   --pink:#e5a1f8;\n   --white:#fff;\n   --nav:#35353f;\n   --nav2:#3f3d56;\n}\n\n\n*,*::before,*::after{\n    margin:0;\n    padding:0;\n    box-sizing:border-box;\n    font-family: 'Poppins', sans-serif;\n}\nhtml{\n  ${\"\" /* overflow-y: scroll; */}\n  scroll-behavior:smooth;\n  \n}\n    body,\n    html,\n    a {\n        font-family: 'Poppins', sans-serif;\n            }\n    body {\n\n        margin:0;\n        padding:0;\n        border: 0;\n        outline: 0;\n        background: var(--background);\n\n        overflow-x: hidden;\n    }\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        margin:0;\n        padding:0;\n    }\n    a {\n\n        text-decoration: none;\n        outline: none;\n    }\n    button{\n        border:none;\n        outline:none;\n        &:focus{\n            outline:none;\n        }\n    }\n\n    *:focus {\n        outline: none;\n    }\n\n    img,svg{\n        width:100%;\n        height:auto;\n    }\n\n\n`;\n\n//  /* Colors */\n"
  },
  {
    "path": "src/index.js",
    "content": "import React from \"react\";\n// import ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n//import reportWebVitals from \"./reportWebVitals\";''\n\nimport { createRoot } from 'react-dom/client';\n\nconst domNode = document.getElementById('root');\nconst root = createRoot(domNode);\nroot.render(<App />);\n\n// ReactDOM.render(\n//   <React.StrictMode>\n//     <App />\n//   </React.StrictMode>,\n//   document.getElementById(\"root\")\n// );\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\n// reportWebVitals();\n"
  },
  {
    "path": "src/reportWebVitals.js",
    "content": "const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n"
  },
  {
    "path": "src/setupTests.js",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom';\n"
  }
]