├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.css ├── App.tsx ├── assets │ ├── automated_campaigns_icon.png │ ├── checkmark-icon.svg │ ├── data_tree2.webp │ ├── falling_leaves2.webm │ ├── intelligent_search_icon.png │ ├── istockphoto-1437816897-612x612.jpg │ ├── logo-02.png │ ├── logo_icon.png │ ├── microsoft-centered.svg │ ├── network_canopy.webm │ ├── oracle-svgrepo-com.svg │ ├── personalized_messaging_icon.png │ ├── profile-image-woman.html │ ├── pumpfun_logo.webp │ ├── reply_tracking_icon.png │ ├── salesforce_logo.svg │ ├── sample_profile_image.jpg │ ├── scheduled_emails_icon.png │ ├── smart_response_icon.png │ ├── updated_background6_dark.png │ └── updated_background_transparent.png ├── contexts │ └── ThemeContext.tsx ├── custom.d.ts ├── hooks │ └── useTokenData.ts ├── main.tsx └── pages │ └── AttainmintLanding.tsx ├── tailwind.config.js └── tsconfig.json /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + 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 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-react-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "framer-motion": "^12.0.5", 14 | "react": "^19.0.0", 15 | "react-dom": "^19.0.0", 16 | "react-router-dom": "^6.28.2" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.17.0", 20 | "@types/react": "^19.0.8", 21 | "@types/react-dom": "^19.0.3", 22 | "@vitejs/plugin-react": "^4.3.4", 23 | "eslint": "^9.17.0", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.16", 26 | "globals": "^15.14.0", 27 | "typescript": "~5.6.2", 28 | "typescript-eslint": "^8.18.2", 29 | "vite": "^6.0.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | // src/App.tsx 2 | import React from 'react'; 3 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 4 | import { AuthProvider } from './contexts/AuthContext'; 5 | import { ThemeProvider } from './contexts/ThemeContext'; 6 | import { UserProvider } from './contexts/UserContext'; 7 | import AttainmintLanding from './pages/AttainmintLanding'; 8 | import BlockchainResume from './pages/BlockchainResume'; 9 | import Pricing from './pages/Pricing'; 10 | import ContactUs from './pages/ContactUs'; 11 | import LoginForm from './pages/LoginForm'; 12 | import SignupForm from './pages/SignupForm'; 13 | import PublicLayout from './components/PublicLayout'; 14 | import { useTheme } from './contexts/ThemeContext'; 15 | import './App.css'; 16 | 17 | function AppContent() { 18 | const { darkMode, toggleDarkMode } = useTheme(); 19 | 20 | const handleGoogleSignIn = () => { 21 | // TODO: Implement Google sign in 22 | console.log('Google sign in clicked'); 23 | }; 24 | 25 | const handleMicrosoftSignIn = () => { 26 | // TODO: Implement Microsoft sign in 27 | console.log('Microsoft sign in clicked'); 28 | }; -------------------------------------------------------------------------------- /src/assets/automated_campaigns_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/automated_campaigns_icon.png -------------------------------------------------------------------------------- /src/assets/checkmark-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/data_tree2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/data_tree2.webp -------------------------------------------------------------------------------- /src/assets/falling_leaves2.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/falling_leaves2.webm -------------------------------------------------------------------------------- /src/assets/intelligent_search_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/intelligent_search_icon.png -------------------------------------------------------------------------------- /src/assets/istockphoto-1437816897-612x612.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/istockphoto-1437816897-612x612.jpg -------------------------------------------------------------------------------- /src/assets/logo-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/logo-02.png -------------------------------------------------------------------------------- /src/assets/logo_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/logo_icon.png -------------------------------------------------------------------------------- /src/assets/microsoft-centered.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/network_canopy.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/network_canopy.webm -------------------------------------------------------------------------------- /src/assets/oracle-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/personalized_messaging_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/personalized_messaging_icon.png -------------------------------------------------------------------------------- /src/assets/pumpfun_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/pumpfun_logo.webp -------------------------------------------------------------------------------- /src/assets/reply_tracking_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/reply_tracking_icon.png -------------------------------------------------------------------------------- /src/assets/salesforce_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/sample_profile_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/sample_profile_image.jpg -------------------------------------------------------------------------------- /src/assets/scheduled_emails_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/scheduled_emails_icon.png -------------------------------------------------------------------------------- /src/assets/smart_response_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/smart_response_icon.png -------------------------------------------------------------------------------- /src/assets/updated_background6_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/updated_background6_dark.png -------------------------------------------------------------------------------- /src/assets/updated_background_transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Whitecoolman/React-web3-tailwindCSS-typescript/ff644db7aff4146924c70c1ebc01972be05821ba/src/assets/updated_background_transparent.png -------------------------------------------------------------------------------- /src/contexts/ThemeContext.tsx: -------------------------------------------------------------------------------- 1 | // src/contexts/ThemeContext.tsx 2 | import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'; 3 | 4 | interface ThemeContextType { 5 | darkMode: boolean; 6 | toggleDarkMode: () => void; 7 | } 8 | 9 | const ThemeContext = createContext(undefined); 10 | 11 | export const useTheme = () => { 12 | const context = useContext(ThemeContext); 13 | if (!context) { 14 | throw new Error('useTheme must be used within ThemeProvider'); 15 | } 16 | return context; 17 | }; 18 | 19 | export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { 20 | const [darkMode, setDarkMode] = useState(() => { 21 | const stored = localStorage.getItem('darkMode'); 22 | return stored !== null ? stored === 'true' : true; 23 | }); 24 | 25 | const toggleDarkMode = useCallback(() => { 26 | setDarkMode(prev => { 27 | const newMode = !prev; 28 | localStorage.setItem('darkMode', String(newMode)); 29 | return newMode; 30 | }); 31 | }, []); 32 | 33 | useEffect(() => { 34 | document.documentElement.classList.toggle('dark', darkMode); 35 | }, [darkMode]); 36 | 37 | return ( 38 | 39 | {children} 40 | 41 | ); 42 | }; -------------------------------------------------------------------------------- /src/custom.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.webm' { 2 | const src: string; 3 | export default src; 4 | } 5 | 6 | declare module '*.webp' { 7 | const src: string; 8 | export default src; 9 | } 10 | 11 | declare module '*.png' { 12 | const src: string; 13 | export default src; 14 | } 15 | 16 | declare module '*.jpg' { 17 | const src: string; 18 | export default src; 19 | } 20 | 21 | declare module '*.svg' { 22 | const src: string; 23 | export default src; 24 | } -------------------------------------------------------------------------------- /src/hooks/useTokenData.ts: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import axios from 'axios'; 3 | 4 | interface TokenData { 5 | marketCap: string; 6 | price: string; 7 | volume24h: string; 8 | isLoading: boolean; 9 | error: string | null; 10 | } 11 | 12 | const PUMP_FUN_TOKEN_ADDRESS = '5BYrEaDL7NhFjJ9gmyZqVQoAUBg3PqruqPa7fnsWpump'; 13 | 14 | // Fallback values in case of API issues 15 | const FALLBACK_DATA = { 16 | marketCap: '$7.1K', 17 | price: '$0.000142', 18 | volume24h: '$1.2K' 19 | }; 20 | 21 | export const useTokenData = (): TokenData => { 22 | const [data, setData] = useState({ 23 | ...FALLBACK_DATA, 24 | isLoading: true, 25 | error: null 26 | }); 27 | 28 | useEffect(() => { 29 | let isMounted = true; 30 | 31 | // Function to fetch data 32 | const fetchData = async () => { 33 | try { 34 | console.log('🔄 Fetching token data from DexScreener...'); 35 | const response = await axios.get( 36 | `https://api.dexscreener.com/latest/dex/tokens/${PUMP_FUN_TOKEN_ADDRESS}` 37 | ); 38 | 39 | if (!isMounted) return; 40 | 41 | console.log('📊 Raw DexScreener response:', response.data); 42 | 43 | if (response.data.pairs && response.data.pairs.length > 0) { 44 | const pair = response.data.pairs[0]; // Get the first/main pair 45 | console.log('💰 Found pair data:', { 46 | marketCap: pair.marketCap, 47 | price: pair.priceUsd, 48 | volume24h: pair.volume?.h24 49 | }); 50 | 51 | setData({ 52 | marketCap: new Intl.NumberFormat('en-US', { 53 | style: 'currency', 54 | currency: 'USD', 55 | notation: 'compact', 56 | maximumFractionDigits: 1 57 | }).format(pair.marketCap || 7100), 58 | price: new Intl.NumberFormat('en-US', { 59 | style: 'currency', 60 | currency: 'USD', 61 | minimumFractionDigits: 6, 62 | maximumFractionDigits: 6 63 | }).format(parseFloat(pair.priceUsd) || 0.000142), 64 | volume24h: new Intl.NumberFormat('en-US', { 65 | style: 'currency', 66 | currency: 'USD', 67 | notation: 'compact', 68 | maximumFractionDigits: 1 69 | }).format(pair.volume?.h24 || 1200), 70 | isLoading: false, 71 | error: null 72 | }); 73 | } else { 74 | console.log('⚠️ No pairs found in DexScreener response, using fallback data'); 75 | setData({ 76 | ...FALLBACK_DATA, 77 | isLoading: false, 78 | error: null 79 | }); 80 | } 81 | } catch (error: any) { 82 | console.error('❌ Error fetching token data:', error); 83 | if (error.response) { 84 | console.error('❌ Error response:', error.response.data); 85 | } 86 | if (isMounted) { 87 | setData(prev => ({ 88 | ...prev, 89 | isLoading: false, 90 | error: 'Failed to fetch token data' 91 | })); 92 | } 93 | } 94 | }; 95 | 96 | // Initial fetch 97 | fetchData(); 98 | 99 | // Set up interval for subsequent fetches 100 | const interval = setInterval(fetchData, 15000); // Fetch every 15 seconds 101 | 102 | return () => { 103 | isMounted = false; 104 | clearInterval(interval); 105 | }; 106 | }, []); 107 | 108 | return data; 109 | }; -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /src/pages/AttainmintLanding.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react'; 2 | import { 3 | ArrowRight, Shield, Brain, Target, 4 | CheckCircle, MessageSquare, FileText, 5 | BarChart3, Users, Sparkles, Layers, 6 | LineChart, Trophy, Clock, ArrowUpRight, 7 | Bot, Mail, Phone, Coins, Briefcase, 8 | Star, Search, Zap, RefreshCw, Play, Pause, 9 | Search as MagnifyingGlass, Share, Lock, User, UserCheck, Database, Building, UserPlus, Link, Award, TrendingUp, Eye 10 | } from 'lucide-react'; 11 | import { motion, useScroll, useTransform, AnimatePresence } from 'framer-motion'; 12 | import { useTheme } from '../contexts/ThemeContext'; 13 | import IntegrationAnimation from '../components/IntegrationAnimation'; 14 | import logo from '../assets/logo_icon.png'; 15 | import backgroundImage from '../assets/updated_background_transparent.png'; 16 | import networkCanopy from '../assets/network_canopy.webm'; 17 | import dataTree from '../assets/data_tree2.webp'; 18 | import axios from 'axios'; 19 | import { useLocation, useNavigate } from 'react-router-dom'; 20 | import pumpfunLogo from '../assets/pumpfun_logo.webp'; 21 | import { useTokenData } from '../hooks/useTokenData'; 22 | import BlockchainResume from './BlockchainResume'; 23 | import fallingLeaves from '../assets/falling_leaves2.webm'; 24 | 25 | interface LandingPageProps { 26 | onOpenWaitlistSignup: () => void; 27 | } 28 | 29 | interface Feature { 30 | id: string; 31 | title: string; 32 | subtitle: string; 33 | description: string; 34 | icon: React.ElementType; 35 | benefits: string[]; 36 | color: string; 37 | stats: Array<{ label: string; value: string }>; 38 | tradingLink?: { 39 | url: string; 40 | logo: string; 41 | chart?: string; 42 | }; 43 | } 44 | 45 | interface Benefit { 46 | icon: React.ElementType; 47 | title: string; 48 | description: string; 49 | } 50 | 51 | interface AIFeature { 52 | icon: React.ElementType; 53 | title: string; 54 | description: string; 55 | stats: Array<{ label: string; value: string }>; 56 | features: string[]; 57 | } 58 | 59 | interface HiringFeature { 60 | icon: React.ElementType; 61 | title: string; 62 | description: string; 63 | features: string[]; 64 | } 65 | 66 | interface FAQ { 67 | q: string; 68 | a: string; 69 | } 70 | 71 | // Declare TradingView types 72 | declare global { 73 | interface Window { 74 | TradingView: { 75 | widget: new (config: any) => any; 76 | }; 77 | } 78 | } 79 | 80 | const TokenChart = () => { 81 | return ( 82 |
83 |