├── src ├── index.css ├── setupTests.js ├── App.test.js ├── reportWebVitals.js ├── Components │ ├── MyLoader.js │ ├── Preloader.js │ ├── Clients.js │ ├── ScrollArrow.js │ ├── Companies.js │ ├── Projects.js │ ├── Experience.js │ ├── CarouselDemo.js │ ├── Header.js │ ├── Blog.js │ ├── CarouselClients.js │ ├── Navbar.js │ ├── Services.js │ └── Footer.js ├── index.js ├── App.js ├── app.css └── logo.svg ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── postcss.config.js ├── tailwind.config.js ├── .gitignore ├── package.json └── README.md /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baabashinelle/Breed-Digital-Agency/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baabashinelle/Breed-Digital-Agency/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baabashinelle/Breed-Digital-Agency/HEAD/public/logo512.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 3 | theme: { 4 | extend: { 5 | }, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /.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/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/Components/MyLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Loader from "react-js-loader"; 3 | 4 | 5 | function MyLoader() { 6 | return ( 7 |
8 |
9 | 16 |
17 |
18 | ); 19 | } 20 | 21 | export default MyLoader -------------------------------------------------------------------------------- /src/Components/Preloader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import MyLoader from './MyLoader'; 3 | import { useState, useEffect } from 'react' 4 | 5 | 6 | function Preloader() { 7 | const [isLoader, setIsLoader] = useState(true); 8 | 9 | useEffect(() => { 10 | return () => { 11 | window.addEventListener("load", () => { 12 | setIsLoader(false) 13 | }) 14 | }; 15 | }, []); 16 | 17 | return
{isLoader && }
; 18 | } 19 | 20 | export default Preloader -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { BrowserRouter } from 'react-router-dom'; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById('root')); 9 | root.render( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /src/Components/Clients.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import CarouselClients from "./CarouselClients"; 3 | import Fade from "react-reveal/Fade"; 4 | 5 | function Clients() { 6 | return ( 7 |
8 |
9 | 10 |

11 | What Our Clients Say 12 |

13 |

14 | Trusted by 5000+ companies worldwide. 15 |

16 | 17 | 18 | 19 |
20 |
21 | ); 22 | } 23 | 24 | export default Clients; 25 | -------------------------------------------------------------------------------- /src/Components/ScrollArrow.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { BsFillArrowUpCircleFill } from "react-icons/bs"; 3 | import "../app.css"; 4 | 5 | const ScrollArrow = () => { 6 | const [showScroll, setShowScroll] = useState(false); 7 | 8 | const checkScrollTop = () => { 9 | if (!showScroll && window.pageYOffset > 400) { 10 | setShowScroll(true); 11 | } else if (showScroll && window.pageYOffset <= 400) { 12 | setShowScroll(false); 13 | } 14 | }; 15 | 16 | const scrollTop = () => { 17 | window.scrollTo({ top: 0, behavior: "smooth" }); 18 | }; 19 | 20 | window.addEventListener("scroll", checkScrollTop); 21 | 22 | return ( 23 | 28 | ); 29 | }; 30 | 31 | export default ScrollArrow; 32 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Header from './Components/Header'; 2 | import Companies from './Components/Companies' 3 | import Services from './Components/Services'; 4 | import Experience from './Components/Experience'; 5 | import Projects from './Components/Projects'; 6 | import Clients from './Components/Clients'; 7 | import Blog from './Components/Blog'; 8 | import './app.css' 9 | // import Preloader from './Components/Preloader'; 10 | import Footer from './Components/Footer'; 11 | import ScrollArrow from './Components/ScrollArrow'; 12 | 13 | 14 | 15 | 16 | 17 | function App() { 18 | return ( 19 |
20 | {/* */} 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
31 | ); 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "breed-agency", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@headlessui/react": "^1.6.0", 7 | "@heroicons/react": "^1.0.6", 8 | "@testing-library/jest-dom": "^5.16.4", 9 | "@testing-library/react": "^13.1.1", 10 | "@testing-library/user-event": "^13.5.0", 11 | "react": "^18.0.0", 12 | "react-dom": "^18.0.0", 13 | "react-icons": "^4.3.1", 14 | "react-js-loader": "^0.1.0", 15 | "react-responsive-carousel": "^3.2.23", 16 | "react-reveal": "^1.2.2", 17 | "react-router-dom": "^6.3.0", 18 | "react-router-hash-link": "^2.4.3", 19 | "react-scripts": "5.0.1", 20 | "web-vitals": "^2.1.4" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | }, 46 | "devDependencies": { 47 | "autoprefixer": "^10.4.5", 48 | "postcss": "^8.4.12", 49 | "tailwindcss": "^3.0.24" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/Components/Companies.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Fade from "react-reveal/Fade"; 3 | 4 | function Companies() { 5 | return ( 6 |
7 | 8 |

9 | Trusted by 5000+ Companies Worldwide 10 |

11 |
12 | Netflix 16 | Google 20 | Amazon 24 | Air BNB 28 | Grab 32 | Facebook 36 |
37 | 38 |
39 | ); 40 | } 41 | 42 | export default Companies -------------------------------------------------------------------------------- /src/Components/Projects.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Carousel from './CarouselDemo'; 3 | import Fade from "react-reveal/Fade"; 4 | 5 | function Projects() { 6 | return ( 7 | <> 8 |
9 |
10 | 11 |
12 |
13 |

14 | Featured Projects 15 |

16 |

17 | Trusted by 5000+ companies worldwide. 18 |

19 |
20 |
21 | 26 |
27 | 28 |
29 |
30 | 31 | {/*Carousel*/} 32 | 33 | ); 34 | } 35 | 36 | export default Projects -------------------------------------------------------------------------------- /src/Components/Experience.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Fade from "react-reveal/Fade"; 3 | 4 | function Experience() { 5 | return ( 6 |
7 |
8 | 9 |
10 | Employee Experiencing Digital World 14 |
15 |
16 |
17 |

18 | Get an amazing experience with our top-quality team. 19 |

20 |

21 | Trusted by 5000+ companies worldwide. Trusted by 5000+ companies 22 | worldwide 23 |

24 | 31 |
32 | 33 |
34 |
35 | ); 36 | } 37 | 38 | export default Experience -------------------------------------------------------------------------------- /src/Components/CarouselDemo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "react-responsive-carousel/lib/styles/carousel.min.css"; 3 | import { Carousel } from "react-responsive-carousel"; 4 | 5 | 6 | 7 | function CarouselDemo() { 8 | return ( 9 |
10 | 11 |
12 | Image 16 | Image 20 | Image 24 |
25 |
26 | Image 30 | Image 34 | Image 38 |
39 |
40 | Image 44 | Image 48 | Image 52 |
53 | 54 |
55 | ); 56 | 57 | } 58 | 59 | export default CarouselDemo -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 19 | 20 | 24 | 25 | 34 | React App 35 | 36 | 37 | 38 |
39 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /src/Components/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "./Navbar"; 3 | import Fade from "react-reveal/Fade"; 4 | 5 | function Header() { 6 | return ( 7 |
8 | 9 |
10 | 11 |
12 |

13 | The power of now, the{" "} 14 | 15 | {" "} 16 | future{" "} 17 | 18 | of you 19 |

20 |
21 |
22 | 29 |
30 |

31 | Breed is a digital studio that offers several services such as 32 | UI/UX design to developers, we will provide the best service for 33 | those of you who use our services. 34 |

35 |
36 |
37 | 38 | 39 |
40 | 41 |
42 | Boy Experiencing Digital World 46 |
47 | 48 |
49 |
50 |
51 | ); 52 | } 53 | 54 | export default Header; 55 | -------------------------------------------------------------------------------- /src/app.css: -------------------------------------------------------------------------------- 1 | .carousel .thumbs-wrapper, 2 | .carousel-status { 3 | display: none; 4 | } 5 | .carousel.carousel-slider .control-arrow:hover { 6 | background: transparent; 7 | } 8 | .parent-loader { 9 | background-color: #231e3d; 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | z-index: 99999; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | flex-wrap: nowrap; 18 | flex-direction: row; 19 | width: 100%; 20 | height: 100vh; 21 | } 22 | .font-link { 23 | font-family: "Manrope", sans-serif; 24 | } 25 | .c-btn span:first-child { 26 | transform: translateX(-101%); 27 | transition: transform 0.3s ease-in; 28 | } 29 | .c-btn:hover span { 30 | transform: translateX(0); 31 | } 32 | .socials .footer-div span:last-child { 33 | position: absolute; 34 | top: 0; 35 | right: 0; 36 | bottom: 0; 37 | left: 0; 38 | display: flex; 39 | align-items: center; 40 | justify-content: center; 41 | transform: translateY(-100%); 42 | } 43 | .socials span { 44 | transition: transform 0.2s ease-out; 45 | } 46 | 47 | .socials .footer-div:hover span:first-child { 48 | transform: translateY(100%); 49 | } 50 | 51 | .socials .footer-div:hover span:last-child { 52 | transform: none; 53 | } 54 | .boy-illustration { 55 | transform-origin: center; 56 | transform-style: preserve-3d; 57 | transform: scale(1); 58 | transition: transform 225ms ease-out; 59 | } 60 | .boy-illustration:hover { 61 | transform: scale(1) rotateX(30deg) rotateY(0deg); 62 | transition: transform 380ms cubic-bezier(0.18, 0.89, 0.32, 1.28); 63 | } 64 | .scrollTop { 65 | position: fixed; 66 | width: auto; 67 | bottom: 20px; 68 | right: 30px; 69 | height: 20px; 70 | z-index: 1000; 71 | cursor: pointer; 72 | animation: fadeIn 0.3s; 73 | transition: opacity 0.4s; 74 | opacity: 0.5; 75 | } 76 | 77 | .scrollTop:hover { 78 | opacity: 1; 79 | } 80 | 81 | @keyframes fadeIn { 82 | 0% { 83 | opacity: 0; 84 | } 85 | 100% { 86 | opacity: 0.5; 87 | } 88 | } 89 | @media screen and (max-width: 768px) { 90 | .contact-btn { 91 | display: none; 92 | } 93 | } 94 | @media screen and (max-width: 400px) { 95 | :placeholder-shown { 96 | font-size: 12px; 97 | } 98 | } 99 | @media screen and (min-width: 424px) and (max-width: 500px) { 100 | .submit-btn { 101 | top: 7%; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Components/Blog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Fade from "react-reveal/Fade"; 3 | 4 | function Blog() { 5 | return ( 6 |
7 | 8 |

9 | Latest From Our Blog 10 |

11 |

12 | Trusted by 5000+ companies worldwide. 13 |

14 |
15 |
16 |
17 | 21 |
22 |

23 | 24 | Careers 25 | 26 |

27 |

28 | Class adds $30 million to its balance sheet for a Zoom-friendly 29 | edtech solution 30 |

31 |

32 | Class, launched less than a year ago by Blackboard co-founder 33 | Michael Chasen, integrates exclusively... 34 |

35 |

36 | Read more 37 |

38 |
39 | 40 |
41 |
42 | 43 |
44 |

45 | Class Technologies Inc. Closes $30 Million Series A Financing 46 | to Meet High Demand 47 |

48 |

49 | Class Technologies Inc., the company that created Class,... 50 |

51 |
52 |
53 | 54 |
55 | 56 |
57 |

58 | Zoom’s earliest investors are betting millions on a better 59 | Zoom for schools 60 |

61 |

62 | Zoom was never created to be a consumer product. Nonetheless, 63 | the... 64 |

65 |
66 |
67 | 68 |
69 | 70 |
71 |

72 | Former Blackboard CEO Raises $16M to Bring LMS Features to 73 | Zoom Classrooms 74 |

75 |

76 | This year, investors have reaped big financial returns from 77 | betting on Zoom... 78 |

79 |
80 |
81 |
82 |
83 | 84 |
85 | ); 86 | } 87 | 88 | export default Blog -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Breed is a digital agency and here's a landing page for breed. Tech used: React and Tailwind CSS. 2 | 3 | ![localhost_3001_](https://user-images.githubusercontent.com/83133493/171520043-24a4e94e-5c5f-44c1-a4e4-3a01e3f342fd.png) 4 | 5 | 6 | # Getting Started with Create React App 7 | 8 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 9 | 10 | ## Available Scripts 11 | 12 | In the project directory, you can run: 13 | 14 | ### `npm start` 15 | 16 | Runs the app in the development mode.\ 17 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 18 | 19 | The page will reload when you make changes.\ 20 | You may also see any lint errors in the console. 21 | 22 | ### `npm test` 23 | 24 | Launches the test runner in the interactive watch mode.\ 25 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 26 | 27 | ### `npm run build` 28 | 29 | Builds the app for production to the `build` folder.\ 30 | It correctly bundles React in production mode and optimizes the build for the best performance. 31 | 32 | The build is minified and the filenames include the hashes.\ 33 | Your app is ready to be deployed! 34 | 35 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 36 | 37 | ### `npm run eject` 38 | 39 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 40 | 41 | 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. 42 | 43 | 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. 44 | 45 | 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. 46 | 47 | ## Learn More 48 | 49 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 50 | 51 | To learn React, check out the [React documentation](https://reactjs.org/). 52 | 53 | ### Code Splitting 54 | 55 | 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) 56 | 57 | ### Analyzing the Bundle Size 58 | 59 | 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) 60 | 61 | ### Making a Progressive Web App 62 | 63 | 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) 64 | 65 | ### Advanced Configuration 66 | 67 | 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) 68 | 69 | ### Deployment 70 | 71 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 72 | 73 | ### `npm run build` fails to minify 74 | 75 | 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) 76 | -------------------------------------------------------------------------------- /src/Components/CarouselClients.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "react-responsive-carousel/lib/styles/carousel.min.css"; 3 | import { Carousel } from "react-responsive-carousel"; 4 | 5 | 6 | 7 | function CarouselClients() { 8 | return ( 9 |
10 | 11 |
12 | 13 |
14 |
15 | " 16 |
17 |

18 | Dream house isn't dream anymore 19 |

20 |

21 | AltexSoft has been supporting our business for the past 9 months 22 | in both the creation and implementation of new and tailored 23 | software. We have worked with several of their developers and 24 | cannot speak highly enough of the team. They are reliable, 25 | thorough, smart, available, extremely good communicators and very 26 | friendly! We would recommend hiring Altexsoft to anyone looking 27 | for a highly productive and solution driven team. We plan to 28 | continue to work with them for the long term. 29 |

30 |

Jassir Jones

31 |

32 | Chief Technology Officer, Google 33 |

34 |
35 |
36 |
37 | 38 |
39 |
40 | " 41 |
42 |

43 | Dream house isn't dream anymore 44 |

45 |

46 | AltexSoft has been supporting our business for the past 9 months 47 | in both the creation and implementation of new and tailored 48 | software. We have worked with several of their developers and 49 | cannot speak highly enough of the team. They are reliable, 50 | thorough, smart, available, extremely good communicators and very 51 | friendly! We would recommend hiring Altexsoft to anyone looking 52 | for a highly productive and solution driven team. We plan to 53 | continue to work with them for the long term. 54 |

55 |

Jassir Jones

56 |

57 | Chief Technology Officer, Google 58 |

59 |
60 |
61 |
62 | 63 |
64 |
65 | " 66 |
67 |

68 | Dream house isn't dream anymore 69 |

70 |

71 | AltexSoft has been supporting our business for the past 9 months 72 | in both the creation and implementation of new and tailored 73 | software. We have worked with several of their developers and 74 | cannot speak highly enough of the team. They are reliable, 75 | thorough, smart, available, extremely good communicators and very 76 | friendly! We would recommend hiring Altexsoft to anyone looking 77 | for a highly productive and solution driven team. We plan to 78 | continue to work with them for the long term. 79 |

80 |

Jassir Jones

81 |

82 | Chief Technology Officer, Google 83 |

84 |
85 |
86 | 87 |
88 | ); 89 | } 90 | 91 | export default CarouselClients -------------------------------------------------------------------------------- /src/Components/Navbar.js: -------------------------------------------------------------------------------- 1 | import { MenuIcon, XIcon } from "@heroicons/react/outline"; 2 | import React, { useState } from "react"; 3 | 4 | import { Disclosure } from "@headlessui/react"; 5 | import { HashLink } from "react-router-hash-link"; 6 | 7 | const navigation = [ 8 | { name: "Home", href: "/", current: true }, 9 | { name: "Projects", href: "#projects", current: false }, 10 | { name: "Our Services", href: "#services", current: false }, 11 | { name: "About Us", href: "#about", current: false }, 12 | ]; 13 | 14 | function classNames(...classes) { 15 | return classes.filter(Boolean).join(" "); 16 | } 17 | 18 | export default function Navbar({ className }) { 19 | const [navs, setNavs] = useState(navigation); 20 | 21 | const handleActive = (nav) => { 22 | navs.forEach((e) => (e.current = e.name === nav.name)); 23 | setNavs([...navs]); 24 | }; 25 | return ( 26 | 27 | {({ open }) => ( 28 | <> 29 |
30 |
31 |
32 | {/* Mobile menu button*/} 33 | 34 | Open main menu 35 | {open ? ( 36 | 41 |
42 |
43 |
44 |

BR33D

45 |
46 |
47 |
48 | {navs.map((item) => ( 49 | handleActive(item)} 51 | smooth 52 | key={item.name} 53 | to={item.href} 54 | className={classNames( 55 | item.current 56 | ? "text-transparent bg-clip-text bg-gradient-to-br from-[#6664F1] to-[#C94AF0] md:text-xs lg:text-base" 57 | : "text-gray-300", 58 | "px-3 py-2 rounded-md text-sm font-medium md:text-xs lg:text-base hover:text-white hover:scale-110 ease-in duration-200" 59 | )} 60 | aria-current={item.current ? "page" : undefined} 61 | > 62 | {item.name} 63 | 64 | ))} 65 |
66 |
67 |
68 |
69 | 76 |
77 |
78 |
79 | 80 | 81 |
82 | {navs.map((item) => ( 83 | handleActive(item)} 88 | className={classNames( 89 | item.current 90 | ? "bg-transparent text-white" 91 | : "text-gray-300 hover:bg-gray-700 hover:text-white", 92 | "block px-3 py-2 rounded-md text-base font-medium" 93 | )} 94 | aria-current={item.current ? "page" : undefined} 95 | > 96 | {item.name} 97 | 98 | ))} 99 |
100 | 101 | 102 | )} 103 | 104 | ); 105 | } 106 | -------------------------------------------------------------------------------- /src/Components/Services.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Fade from "react-reveal/Fade"; 3 | 4 | function Services() { 5 | return ( 6 |
7 | 8 |
9 |

Our Services

10 |

11 | Trusted by 5000+ Companies Worldwide 12 |

13 | 14 |
15 |
16 | UI/UX Design 17 | 25 | 30 | 31 |
32 |
33 | Digital Strategy 34 | 42 | 47 | 48 |
49 |
50 | UI/UX Design 51 | 59 | 64 | 65 |
66 |
67 | App Development 68 | 76 | 81 | 82 |
83 |
84 | Product Design 85 | 93 | 98 | 99 |
100 |
101 | Social Media 102 | 110 | 115 | 116 |
117 |
118 | Brand Identity 119 | 127 | 132 | 133 |
134 |
135 | SEO Optimization 136 | 144 | 149 | 150 |
151 |
152 | Media Planing 153 | 161 | 166 | 167 |
168 |
169 | 170 |
171 | ); 172 | } 173 | 174 | export default Services; 175 | -------------------------------------------------------------------------------- /src/Components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { GrFacebookOption } from "react-icons/gr"; 3 | import { FiYoutube } from "react-icons/fi"; 4 | import { AiOutlineSkype } from "react-icons/ai"; 5 | import { FiFigma } from "react-icons/fi"; 6 | import { FaWhatsapp } from "react-icons/fa"; 7 | import Fade from "react-reveal/Fade"; 8 | 9 | function Footer() { 10 | return ( 11 |
12 | 13 |
14 |
15 |

BR33D

16 |

17 | We ara a lorem ipsum dolor sit amet, consectetur adipiscing elit, 18 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 19 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 20 | nisi ut aliquip ex ea commodo consequat. 21 |

22 |
23 |
24 | 32 | 37 | 38 |
39 |

Have a question?

40 |

312-417-2366

41 |
42 |
43 | 44 |
45 | 53 | 58 | 59 |
60 |

Contact us at

61 |

breedagency@gmail.com

62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 |

70 | Newsletter 71 |

72 |

73 | Be the first one to know about discounts, offers and events. 74 | Unsubscribe whenever you like. 75 |

76 |
77 | 81 | 88 |
89 |
90 | 91 |
92 |
93 | 94 | 95 | 96 | 97 | 98 | 99 |
100 |
101 | 102 | 103 | 104 | 105 | 106 | 107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 |
117 | 118 | 119 | 120 | 121 | 122 | 123 |
124 |
125 | 126 | 127 | 128 | 129 | 130 | 131 |
132 |
133 |
134 |
135 | 136 | {/* Lower footer */} 137 |
138 |
139 |

About Us

140 |

Contact

141 |

Privacy Policy

142 |

Sitemap

143 |

Terms of Use

144 |
145 |
146 | © 2000-2021, All Rights Reserved 147 |
148 |
149 | 150 |
151 | ); 152 | } 153 | 154 | export default Footer --------------------------------------------------------------------------------