├── src ├── assets │ ├── Crypto.png │ ├── People.png │ └── react.svg ├── main.jsx ├── index.css ├── components │ ├── PackagesInfo.jsx │ ├── Card.jsx │ ├── CTA.jsx │ ├── Hero.jsx │ ├── Testimonial.jsx │ ├── Features.jsx │ ├── Packages.jsx │ ├── Navbar.jsx │ ├── Footer.jsx │ └── About.jsx ├── App.jsx └── data.js ├── postcss.config.cjs ├── tailwind.config.js ├── vite.config.js ├── .gitignore ├── README.md ├── index.html ├── .eslintrc.cjs └── package.json /src/assets/Crypto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EshaalB/Crypto-project/HEAD/src/assets/Crypto.png -------------------------------------------------------------------------------- /src/assets/People.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EshaalB/Crypto-project/HEAD/src/assets/People.png -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 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 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | @import "tailwindcss/components"; 3 | @import "tailwindcss/utilities"; 4 | 5 | body { 6 | background: radial-gradient( 7 | 4000px circle at 60.39% 42.44%, 8 | #1b1234 0%, 9 | #17023b 100% 10 | ); 11 | } 12 | 13 | ul { 14 | list-style-type: none; 15 | } 16 | .fade-in { 17 | opacity: 1; 18 | transition: all 0.5s ease-in-out; 19 | } 20 | 21 | .app { 22 | opacity: 0; 23 | } 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Smart Hashes 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /src/components/PackagesInfo.jsx: -------------------------------------------------------------------------------- 1 | const PackagesInfo = [ 2 | { 3 | name: "Personal", 4 | monthlyPrice: "FREE", 5 | annuallyPrice: "FREE", 6 | features: [ 7 | "Access to Beginner Mining Tools", 8 | "Limited Mining Power", 9 | "Beginner-Friendly Tutorials", 10 | ], 11 | }, 12 | { 13 | name: "Professional", 14 | monthlyPrice: "19€", 15 | annuallyPrice: "32€", 16 | features: [ 17 | "Enhanced Mining Power", 18 | "Expanded Coin Options:", 19 | "Advanced Analytics Tools", 20 | ], 21 | }, 22 | { 23 | name: "Enterprise", 24 | monthlyPrice: "37€", 25 | annuallyPrice: "49€", 26 | features: [ 27 | "Elite Mining Hardware", 28 | "Dedicated Customer Support", 29 | "Early Access to New Features", 30 | ], 31 | }, 32 | ]; 33 | 34 | export default PackagesInfo; 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "crypto-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@emotion/react": "^11.11.4", 14 | "framer-motion": "^11.0.20", 15 | "postcss-cli": "^11.0.0", 16 | "react": "^18.2.0", 17 | "react-awesome-reveal": "^4.2.8", 18 | "react-dom": "^18.2.0", 19 | "react-icons": "^5.0.1", 20 | "react-parallax": "^3.5.1", 21 | "react-parallax-tilt": "^1.7.217", 22 | "react-reveal": "^1.2.2", 23 | "react-scroll": "^1.9.0" 24 | }, 25 | "devDependencies": { 26 | "@types/react": "^18.2.64", 27 | "@types/react-dom": "^18.2.21", 28 | "@vitejs/plugin-react": "^4.2.1", 29 | "autoprefixer": "^10.4.18", 30 | "eslint": "^8.57.0", 31 | "eslint-plugin-react": "^7.34.0", 32 | "eslint-plugin-react-hooks": "^4.6.0", 33 | "eslint-plugin-react-refresh": "^0.4.5", 34 | "postcss": "^8.4.36", 35 | "tailwindcss": "^3.4.1", 36 | "vite": "^5.1.6" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaQuoteLeft, FaQuoteRight } from "react-icons/fa"; 3 | 4 | const Card = (props) => { 5 | let review = props.review; 6 | 7 | return ( 8 |
9 |
10 | 14 | 15 |
19 |
20 | 21 |
22 |

23 | {review.name} 24 |

25 |

{review.job}

26 |
27 | 28 |
29 | 30 |
31 | 32 |
{review.text}
33 | 34 |
35 | 36 |
37 |
38 | ); 39 | }; 40 | 41 | export default Card; 42 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Element } from "react-scroll"; 3 | import { Fade } from "react-reveal"; 4 | import Navbar from "./components/Navbar"; 5 | import Hero from "./components/Hero"; 6 | import Features from "./components/Features"; 7 | import Packages from "./components/Packages"; 8 | import About from "./components/About"; 9 | import Testimonials from "./components/Testimonial"; 10 | import CTA from "./components/CTA"; 11 | import Footer from "./components/Footer"; 12 | import reviews from "./data"; 13 | 14 | import "./index.css"; 15 | 16 | function App() { 17 | return ( 18 | <> 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |