diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 25e4f98..c640b80 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,6 +9,8 @@ "version": "0.0.0", "dependencies": { "@tailwindcss/vite": "^4.1.12", + "framer-motion": "^12.23.12", + "lucide-react": "^0.542.0", "react": "^19.1.1", "react-dom": "^19.1.1", "tailwindcss": "^4.1.12" @@ -2254,6 +2256,33 @@ "dev": true, "license": "ISC" }, + "node_modules/framer-motion": { + "version": "12.23.12", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz", + "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.23.12", + "motion-utils": "^12.23.6", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2748,6 +2777,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.542.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.542.0.tgz", + "integrity": "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.18", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz", @@ -2806,6 +2844,21 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/motion-dom": { + "version": "12.23.12", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz", + "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.23.6" + } + }, + "node_modules/motion-utils": { + "version": "12.23.6", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", + "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -3209,6 +3262,12 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 5284511..074ce79 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,8 +11,10 @@ }, "dependencies": { "@tailwindcss/vite": "^4.1.12", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "framer-motion": "^12.23.12", + "lucide-react": "^0.542.0", + "react": "^19.1.1", + "react-dom": "^19.1.1", "tailwindcss": "^4.1.12" }, "devDependencies": { diff --git a/frontend/public/undraw_crypto-portfolio_cat6.svg b/frontend/public/undraw_crypto-portfolio_cat6.svg new file mode 100644 index 0000000..86d2126 --- /dev/null +++ b/frontend/public/undraw_crypto-portfolio_cat6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/pages/HeroPage.jsx b/frontend/src/pages/HeroPage.jsx index 9636e11..c9fbc97 100644 --- a/frontend/src/pages/HeroPage.jsx +++ b/frontend/src/pages/HeroPage.jsx @@ -1,138 +1,458 @@ -const HeroPage = () => { - return ( - <> -
- {/* Background decorative elements */} - {/*
-
-
-
-
-
-
-
-
-
-
-
-
-
*/} +import { useState, useEffect } from "react" +import { motion } from "framer-motion" +import { Facebook, Twitter, Instagram, Youtube, TrendingUp, Shield, Bot } from "lucide-react" - {/* Header */} -
- +
- + {/* Hero Section */} -
-
- {/* Trust Badge */} -
- Top Trading Experience +
+
+
+ +

+ Your Gateway to Superior, Seamless & Elite Trading +

+

+ Join the ranks of elite traders using cutting-edge AI technology and advanced market analytics. Our platform delivers institutional-grade trading tools designed for both beginners and professionals seeking superior returns in the cryptocurrency markets. +

+
+ + +
+ + + Crypto trading dashboard visualization +
+
+
- {/* Main Headline */} -

- We Provide -
- Seamless Live Trading -
- On The Go -

- - {/* Subheading */} -

- Track, Grow, Save, and Trade CryptoCurrency easily and fast -
- With Real Transaction History -
- And A Seamless User Experience -

- - {/* CTA buttons */} -
- - +
+ Limited Time Offer! +
+

+ Join The Elite Today +

+

+ Transform your financial future with our exclusive trading platform. Get access to professional-grade tools, AI-powered strategies, and a community of successful traders. Start with our risk-free demo account and experience the difference that elite-level trading makes. Our proven algorithms have helped traders achieve an average of 23% monthly returns. +

+
+
+
+ ✓ No trading experience required +
+
+
+ ✓ 24/7 automated trading +
+
+
+ ✓ Free $100,000 demo account +
+
+ +
-
- - {/* Trusted By Section */} -
-
-

Trade in

+
-
-
- {/*
*/} - BitCoin + {/* Crypto Section */} +
+
+ +

+ Top Cryptocurrencies Available for Trading +

+

+ Access the most popular cryptocurrencies with real-time pricing, advanced analytics, and instant execution. Our platform supports over 150+ digital assets. +

+ + {loading ? ( +
Loading crypto data...
+ ) : error ? ( +
Error: {error}
+ ) : ( +
+ {cryptoData.map((item, index) => ( + +
+
+

{item.name}

+ = 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}> + {item.change >= 0 ? '+' : ''}{item.change?.toFixed(2)}% + +
+
{item.symbol}/USD
+
${item.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 })}
+
+
Volume (24h):
+
${(item.volume / 1000000000).toFixed(2)}B
+
+
+ + ))}
+ )} +
+
+ + {/* Services Section */} +
+
+ +

+ What We Offer +

+

+ Elite Trader provides comprehensive trading solutions designed to maximize your investment potential. From beginner-friendly automation to advanced professional tools, we have everything you need to succeed in the cryptocurrency markets. +

+ +
+ {services.map((service, index) => ( + +
+ +
+

{service.title}

+

{service.description}

+ + ))} +
+
+
-
- {/*
*/} - Etherum + {/* Why Choose Us Section */} +
+
+
+ +

+ Why Choose Elite Trader +

+
+ {stats.map((stat, index) => ( + +
{stat.number}
+
{stat.label}
+ + ))} +
+

+ Join thousands of successful traders who trust Elite Trader for their cryptocurrency investments. Our proven track record, cutting-edge technology, and commitment to security make us the preferred choice for both novice and experienced traders looking to maximize their returns in the digital asset space. +

+ + + + Professional cryptocurrency trading workspace + +
+
+
+ + {/* Sign Up Section */} +
+
+
+
+
+
+ + + +
+
+
+ +

+ Ready to Join the + Elite Traders? +

+

+ Transform your financial future with professional-grade trading tools and AI-powered strategies. + Join the exclusive community of elite traders achieving consistent profits in cryptocurrency markets. +

+ + +
+ +
+
+ + + + Risk-Free Demo Account Available +
+

+ Join the elite with a free demo account including $100,000 virtual funds. No commitment required - experience professional trading today. +

+ +
+
-
- {/*
*/} - BNB + {/* Footer */} + +
+ ) +} \ No newline at end of file