146 lines
6.9 KiB
TypeScript
146 lines
6.9 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import BaseButton from '../components/BaseButton';
|
|
import CardBox from '../components/CardBox';
|
|
import SectionFullScreen from '../components/SectionFullScreen';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import BaseButtons from '../components/BaseButtons';
|
|
import { getPageTitle } from '../config';
|
|
import { useAppSelector } from '../stores/hooks';
|
|
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
import { getPexelsImage } from '../helpers/pexels';
|
|
import BaseIcon from '../components/BaseIcon';
|
|
import * as icon from '@mdi/js';
|
|
|
|
export default function Starter() {
|
|
const [illustrationImage, setIllustrationImage] = useState({
|
|
src: undefined,
|
|
photographer: undefined,
|
|
photographer_url: undefined,
|
|
})
|
|
|
|
const textColor = useAppSelector((state) => state.style.linkColor);
|
|
const title = 'CPU Mining Direct To Wallet'
|
|
|
|
// Fetch Pexels image
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
const image = await getPexelsImage();
|
|
setIllustrationImage(image);
|
|
}
|
|
fetchData();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-[#121212] text-white min-h-screen font-sans">
|
|
<Head>
|
|
<title>{getPageTitle('Bitcoin CPU Mining')}</title>
|
|
</Head>
|
|
|
|
<SectionFullScreen bg='violet'>
|
|
<div className="flex flex-col lg:flex-row min-h-screen w-full">
|
|
<div className="flex-1 flex flex-col justify-center px-8 lg:px-24 space-y-8 py-12">
|
|
<div className="inline-flex items-center space-x-2 bg-amber-500/10 text-amber-500 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">
|
|
<BaseIcon path={icon.mdiCpu64Bit} size={16} />
|
|
<span>CPU Optimized Mining</span>
|
|
</div>
|
|
|
|
<h1 className="text-5xl lg:text-7xl font-extrabold tracking-tight leading-none">
|
|
Direct To Wallet <br/>
|
|
<span className="text-amber-500">Bitcoin Mining</span>
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-400 max-w-xl">
|
|
Turn your idle CPU power into real Bitcoin rewards. Manage your workers, monitor hash rates, and receive payouts directly to your cold storage with no middleman.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl">
|
|
<div className="flex items-start space-x-4">
|
|
<div className="bg-blue-500/20 p-2 rounded-lg">
|
|
<BaseIcon path={icon.mdiWallet} className="text-blue-500" size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-lg">Direct Payouts</h3>
|
|
<p className="text-sm text-gray-500">Earnings go straight to your BTC address.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="bg-emerald-500/20 p-2 rounded-lg">
|
|
<BaseIcon path={icon.mdiMonitorDashboard} className="text-emerald-500" size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-lg">Real-time Stats</h3>
|
|
<p className="text-sm text-gray-500">Monitor hashrate, temp, and CPU usage.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<BaseButtons>
|
|
<BaseButton
|
|
href='/login'
|
|
label='Go to Dashboard'
|
|
color='info'
|
|
className='px-8 py-4 text-lg font-bold shadow-lg shadow-blue-500/20'
|
|
/>
|
|
<BaseButton
|
|
href='/register'
|
|
label='Get Started'
|
|
color='white'
|
|
outline
|
|
className='px-8 py-4 text-lg font-bold'
|
|
/>
|
|
</BaseButtons>
|
|
</div>
|
|
|
|
<div className="hidden lg:flex flex-1 relative bg-gradient-to-br from-blue-900/20 to-black overflow-hidden">
|
|
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-20"></div>
|
|
<div className="relative z-10 w-full h-full flex items-center justify-center p-12">
|
|
<div className="bg-[#1E1E1E] rounded-2xl border border-gray-800 shadow-2xl w-full max-w-lg overflow-hidden transform rotate-2 hover:rotate-0 transition-transform duration-500">
|
|
<div className="h-2 bg-amber-500 w-full"></div>
|
|
<div className="p-6 space-y-4">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-xs text-gray-500 uppercase font-bold tracking-widest">Live Mining Rig Status</span>
|
|
<span className="flex items-center space-x-1 text-emerald-500 text-xs font-bold">
|
|
<span className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
|
|
<span>ONLINE</span>
|
|
</span>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="text-3xl font-mono font-bold">6,500 H/s</div>
|
|
<div className="text-xs text-gray-500">Global Aggregated Hashrate</div>
|
|
</div>
|
|
<div className="h-32 bg-gray-900 rounded flex items-end space-x-1 p-2">
|
|
{[40, 70, 45, 90, 65, 80, 50, 95, 75, 85, 60, 100].map((h, i) => (
|
|
<div key={i} style={{height: `${h}%`}} className="flex-1 bg-amber-500/40 rounded-t-sm"></div>
|
|
))}
|
|
</div>
|
|
<div className="flex justify-between text-xs font-mono">
|
|
<span className="text-gray-500">Payout Address:</span>
|
|
<span className="text-amber-500">bc1q...x9m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SectionFullScreen>
|
|
|
|
<div className='bg-[#0A0A0A] border-t border-gray-900 text-gray-500 flex flex-col text-center justify-center md:flex-row py-12'>
|
|
<p className='text-sm'>© 2026 <span className="text-white font-bold">{title}</span>. Built for the Decentralized Future.</p>
|
|
<Link className='ml-4 text-sm hover:text-white transition-colors' href='/privacy-policy/'>
|
|
Privacy Policy
|
|
</Link>
|
|
<Link className='ml-4 text-sm hover:text-white transition-colors' href='/terms-of-use/'>
|
|
Terms of Use
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Starter.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
}; |