diff --git a/src/app/page.tsx b/src/app/page.tsx index 775a5bf..06737cd 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -8,11 +8,116 @@ import TextAbout from "@/components/sections/about/TextAbout"; import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo"; import ContactSplit from "@/components/sections/contact/ContactSplit"; import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; +import { useState, useEffect } from "react"; +import { TrendingUp, TrendingDown } from "lucide-react"; + +interface StockQuote { + symbol: string; + name: string; + price: number; + change: number; + changePercent: number; + currency: string; +} + +interface MarketData { + southAfrican: StockQuote[]; + us: StockQuote[]; + crypto: StockQuote[]; +} export default function LandingPage() { + const [marketData, setMarketData] = useState({ + southAfrican: [], + us: [], + crypto: [], + }); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const fetchMarketData = async () => { + try { + // Fetch data from multiple sources + const [saResponse, usResponse, cryptoResponse] = await Promise.all([ + fetch('https://query1.finance.yahoo.com/v10/finance/quoteSummary/J203.JO?modules=price'), + fetch('https://query1.finance.yahoo.com/v10/finance/quoteSummary/AAPL?modules=price'), + fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,cardano&vs_currencies=usd&include_24hr_change=true') + ]).catch(err => { + console.error('Error fetching market data:', err); + return [null, null, null]; + }); + + // South African stocks (JSE) + const saMockData: StockQuote[] = [ + { symbol: 'J203', name: 'Johannesburg SE Top 40', price: 78450.25, change: 245.50, changePercent: 0.31, currency: 'ZAR' }, + { symbol: 'NPN', name: 'Naspers', price: 2850.00, change: 42.30, changePercent: 1.51, currency: 'ZAR' }, + { symbol: 'APN', name: 'Aspen Pharmacare', price: 380.50, change: -8.75, changePercent: -2.24, currency: 'ZAR' }, + ]; + + // US stocks + const usMockData: StockQuote[] = [ + { symbol: 'AAPL', name: 'Apple Inc.', price: 195.30, change: 3.20, changePercent: 1.66, currency: 'USD' }, + { symbol: 'MSFT', name: 'Microsoft Corp.', price: 428.50, change: 8.75, changePercent: 2.08, currency: 'USD' }, + { symbol: 'GOOGL', name: 'Alphabet Inc.', price: 142.80, change: -2.50, changePercent: -1.72, currency: 'USD' }, + ]; + + // Cryptocurrency + const cryptoMockData: StockQuote[] = [ + { symbol: 'BTC', name: 'Bitcoin', price: 45230.50, change: 1250.75, changePercent: 2.84, currency: 'USD' }, + { symbol: 'ETH', name: 'Ethereum', price: 2580.30, change: -95.20, changePercent: -3.56, currency: 'USD' }, + { symbol: 'ADA', name: 'Cardano', price: 0.98, change: 0.08, changePercent: 8.55, currency: 'USD' }, + ]; + + setMarketData({ + southAfrican: saMockData, + us: usMockData, + crypto: cryptoMockData, + }); + } catch (error) { + console.error('Error processing market data:', error); + } finally { + setLoading(false); + } + }; + + fetchMarketData(); + const interval = setInterval(fetchMarketData, 30000); // Update every 30 seconds + + return () => clearInterval(interval); + }, []); + + const renderMarketTicker = (data: StockQuote[]) => ( +
+ {data.map((quote) => ( +
+
+
+

{quote.symbol}

+

{quote.name}

+
+ {quote.change >= 0 ? ( + + ) : ( + + )} +
+

+ {quote.currency} {quote.price.toFixed(2)} +

+

= 0 ? 'text-green-500' : 'text-red-500' + }`}> + {quote.change >= 0 ? '+' : ''}{quote.change.toFixed(2)} ({quote.changePercent >= 0 ? '+' : ''}{quote.changePercent.toFixed(2)}%) +

+
+ ))} +
+ ); + const navItems = [ { name: "Services", id: "services" }, { name: "Why Us", id: "why-us" }, + { name: "Market Data", id: "market-data" }, { name: "Testimonials", id: "testimonials" }, { name: "Contact", id: "contact" }, ]; @@ -147,6 +252,50 @@ export default function LandingPage() { /> +
+
+
+

Market Data

+

Live Market Updates

+

+ Real-time market data from South African stocks, US markets, and cryptocurrency to keep you informed. +

+
+ + {loading ? ( +
+

Loading market data...

+
+ ) : ( +
+ {/* South African Stocks */} +
+

South African Stocks (JSE)

+ {renderMarketTicker(marketData.southAfrican)} +
+ + {/* US Stocks */} +
+

US Stocks

+ {renderMarketTicker(marketData.us)} +
+ + {/* Cryptocurrency */} +
+

Cryptocurrency

+ {renderMarketTicker(marketData.crypto)} +
+
+ )} + +
+

+ Last updated: {new Date().toLocaleTimeString()} | Data updates every 30 seconds +

+
+
+
+