1
This commit is contained in:
Flatlogic Bot
parent
780402b781
commit
7ff00efde7
@ -1,6 +1,5 @@
|
|||||||
import React, {useEffect, useRef} from 'react'
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useState } from 'react'
|
|
||||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||||
import BaseDivider from './BaseDivider'
|
import BaseDivider from './BaseDivider'
|
||||||
import BaseIcon from './BaseIcon'
|
import BaseIcon from './BaseIcon'
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import React, { ReactNode, useEffect } from 'react'
|
import React, { ReactNode, useEffect, useState } from 'react'
|
||||||
import { useState } from 'react'
|
|
||||||
import jwt from 'jsonwebtoken';
|
import jwt from 'jsonwebtoken';
|
||||||
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
|
||||||
import menuAside from '../menuAside'
|
import menuAside from '../menuAside'
|
||||||
|
|||||||
@ -7,6 +7,13 @@ const menuAside: MenuAsideItem[] = [
|
|||||||
icon: icon.mdiViewDashboardOutline,
|
icon: icon.mdiViewDashboardOutline,
|
||||||
label: 'Dashboard',
|
label: 'Dashboard',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: '/control-center',
|
||||||
|
label: 'Control Center',
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
icon: 'mdiTune' in icon ? icon['mdiTune' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
href: '/users/users-list',
|
href: '/users/users-list',
|
||||||
|
|||||||
1579
frontend/src/pages/control-center.tsx
Normal file
1579
frontend/src/pages/control-center.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@ -6,6 +6,9 @@ import type { ReactElement } from 'react'
|
|||||||
import LayoutAuthenticated from '../layouts/Authenticated'
|
import LayoutAuthenticated from '../layouts/Authenticated'
|
||||||
import SectionMain from '../components/SectionMain'
|
import SectionMain from '../components/SectionMain'
|
||||||
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
|
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'
|
||||||
|
import BaseButton from '../components/BaseButton'
|
||||||
|
import BaseDivider from '../components/BaseDivider'
|
||||||
|
import CardBox from '../components/CardBox'
|
||||||
import BaseIcon from "../components/BaseIcon";
|
import BaseIcon from "../components/BaseIcon";
|
||||||
import { getPageTitle } from '../config'
|
import { getPageTitle } from '../config'
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@ -485,6 +488,25 @@ const Dashboard = () => {
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<BaseDivider />
|
||||||
|
|
||||||
|
<CardBox className="overflow-hidden border border-white/10 bg-gradient-to-r from-[#08111F] via-[#0F1B31] to-[#10152A] shadow-lg shadow-cyan-500/10">
|
||||||
|
<div className="grid gap-6 lg:grid-cols-[1.5fr_0.9fr] lg:items-center">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">New first-slice workflow</p>
|
||||||
|
<h2 className="mt-3 text-3xl font-semibold text-white">Open the Control Center</h2>
|
||||||
|
<p className="mt-3 max-w-2xl text-sm leading-8 text-slate-300">
|
||||||
|
Set up payout wallets, register pool endpoints, save runtime guardrails, and review recent
|
||||||
|
sessions and reward payouts from one focused admin flow.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-3 lg:justify-end">
|
||||||
|
<BaseButton href="/control-center" color="info" label="Launch Control Center" />
|
||||||
|
<BaseButton href="/mining_sessions/mining_sessions-list" color="whiteDark" label="View sessions" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
</SectionMain>
|
</SectionMain>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,166 +1,273 @@
|
|||||||
|
import * as icon from '@mdi/js';
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import type { ReactElement } from 'react';
|
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import React from 'react';
|
||||||
|
import type { ReactElement } from 'react';
|
||||||
import BaseButton from '../components/BaseButton';
|
import BaseButton from '../components/BaseButton';
|
||||||
import CardBox from '../components/CardBox';
|
import CardBox from '../components/CardBox';
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
|
||||||
|
|
||||||
|
const featureCards = [
|
||||||
|
{
|
||||||
|
title: 'Wallet routing',
|
||||||
|
description:
|
||||||
|
'Register reward destinations, mark the default wallet, and keep payout targets visible for operators.',
|
||||||
|
iconName: 'mdiWallet',
|
||||||
|
accentClass: 'from-cyan-500/40 to-sky-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Runtime profiles',
|
||||||
|
description:
|
||||||
|
'Capture CPU caps, background behavior, and battery throttling so device usage stays controlled.',
|
||||||
|
iconName: 'mdiTune',
|
||||||
|
accentClass: 'from-violet-500/40 to-fuchsia-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Session telemetry',
|
||||||
|
description:
|
||||||
|
'Review recent sessions, hashrate snapshots, and payout records inside the admin workspace.',
|
||||||
|
iconName: 'mdiChartLine',
|
||||||
|
accentClass: 'from-emerald-500/40 to-teal-500/10',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function Starter() {
|
const workflowSteps = [
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
{
|
||||||
src: undefined,
|
step: '01',
|
||||||
photographer: undefined,
|
title: 'Connect a payout wallet',
|
||||||
photographer_url: undefined,
|
body: 'Give operators a clear destination for rewards and a human-friendly label for audits.',
|
||||||
})
|
},
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
{
|
||||||
const [contentType, setContentType] = useState('image');
|
step: '02',
|
||||||
const [contentPosition, setContentPosition] = useState('left');
|
title: 'Register a pool endpoint',
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
body: 'Capture the upstream protocol, URL, and worker template that the control plane should use.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: '03',
|
||||||
|
title: 'Save a runtime policy',
|
||||||
|
body: 'Define threads, CPU limits, battery throttling, and background execution in one place.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: '04',
|
||||||
|
title: 'Monitor sessions and payouts',
|
||||||
|
body: 'Review the latest telemetry and reward activity from the same branded operations hub.',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const title = 'Crypto Miner Monitor'
|
const getMdi = (name: string, fallback = icon.mdiTable) => {
|
||||||
|
return (name in icon ? icon[name as keyof typeof icon] : fallback) as string;
|
||||||
// Fetch Pexels image/video
|
};
|
||||||
useEffect(() => {
|
|
||||||
async function fetchData() {
|
|
||||||
const image = await getPexelsImage();
|
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<div
|
<>
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{getPageTitle('Crypto Miner Monitor')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
<div className="relative overflow-hidden bg-[#030712] text-white">
|
||||||
|
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.18),_transparent_28%),radial-gradient(circle_at_85%_15%,_rgba(139,92,246,0.16),_transparent_26%),radial-gradient(circle_at_50%_100%,_rgba(16,185,129,0.12),_transparent_32%)]" />
|
||||||
|
<div className="pointer-events-none absolute left-1/2 top-0 h-[32rem] w-[32rem] -translate-x-1/2 rounded-full bg-cyan-400/10 blur-3xl" />
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
<main className="relative mx-auto flex min-h-screen max-w-7xl flex-col px-6 py-8 lg:px-10 lg:py-10">
|
||||||
<div
|
<header className="flex flex-wrap items-center justify-between gap-4 border-b border-white/10 pb-6">
|
||||||
className={`flex ${
|
<div>
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-cyan-200">
|
||||||
} min-h-screen w-full`}
|
Crypto Miner Monitor
|
||||||
>
|
</p>
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
<p className="mt-2 max-w-xl text-sm leading-7 text-slate-400">
|
||||||
? imageBlock(illustrationImage)
|
Dark, modern operations software for payout routing, runtime setup, and browser-session visibility.
|
||||||
: null}
|
</p>
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
|
||||||
? videoBlock(illustrationVideo)
|
|
||||||
: null}
|
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<CardBoxComponentTitle title="Welcome to your Crypto Miner Monitor app!"/>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
|
||||||
<p className='text-center '>For guides and documentation please check
|
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
<BaseButtons>
|
<BaseButton href="/login" color="info" label="Login" />
|
||||||
<BaseButton
|
<BaseButton href="/dashboard" color="whiteDark" label="Open admin interface" />
|
||||||
href='/login'
|
</div>
|
||||||
label='Login'
|
</header>
|
||||||
color='info'
|
|
||||||
className='w-full'
|
|
||||||
/>
|
|
||||||
|
|
||||||
</BaseButtons>
|
<section className="grid flex-1 items-center gap-10 py-16 lg:grid-cols-[1.1fr_0.9fr] lg:py-24">
|
||||||
</CardBox>
|
<div>
|
||||||
</div>
|
<div className="inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-cyan-400/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-cyan-200">
|
||||||
</div>
|
Browser mining control plane
|
||||||
</SectionFullScreen>
|
</div>
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
<h1 className="mt-6 max-w-4xl text-5xl font-semibold tracking-tight text-white md:text-6xl lg:text-7xl">
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
Operate the workflow around browser mining without losing visibility.
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
</h1>
|
||||||
Privacy Policy
|
<p className="mt-6 max-w-2xl text-lg leading-9 text-slate-300">
|
||||||
</Link>
|
The first MVP slice delivers a polished admin experience: connect wallets, define pool connectivity,
|
||||||
</div>
|
save safe runtime constraints, and monitor the latest sessions and reward payouts from one place.
|
||||||
|
</p>
|
||||||
|
<div className="mt-10 flex flex-wrap gap-4">
|
||||||
|
<BaseButton href="/control-center" color="info" label="Launch control center" />
|
||||||
|
<BaseButton href="/dashboard" color="whiteDark" label="Go to admin dashboard" />
|
||||||
|
</div>
|
||||||
|
<div className="mt-10 grid gap-4 sm:grid-cols-3">
|
||||||
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4 backdrop-blur">
|
||||||
|
<p className="text-xs uppercase tracking-[0.22em] text-slate-400">Setup flow</p>
|
||||||
|
<p className="mt-2 text-2xl font-semibold text-white">3 steps</p>
|
||||||
|
<p className="mt-2 text-sm leading-7 text-slate-400">Wallet, pool endpoint, and runtime profile creation.</p>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4 backdrop-blur">
|
||||||
|
<p className="text-xs uppercase tracking-[0.22em] text-slate-400">Visibility</p>
|
||||||
|
<p className="mt-2 text-2xl font-semibold text-white">Live feed</p>
|
||||||
|
<p className="mt-2 text-sm leading-7 text-slate-400">Recent sessions, payouts, and readiness status.</p>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4 backdrop-blur">
|
||||||
|
<p className="text-xs uppercase tracking-[0.22em] text-slate-400">Admin access</p>
|
||||||
|
<p className="mt-2 text-2xl font-semibold text-white">Protected</p>
|
||||||
|
<p className="mt-2 text-sm leading-7 text-slate-400">Use the login flow to enter the control workspace.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
<CardBox className="overflow-hidden border border-white/10 bg-[#081120] shadow-2xl shadow-cyan-500/10">
|
||||||
|
<div className="relative overflow-hidden rounded-3xl">
|
||||||
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-cyan-400/60 to-transparent" />
|
||||||
|
<div className="flex items-center justify-between gap-4 border-b border-white/10 pb-5">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs uppercase tracking-[0.22em] text-cyan-200">Preview</p>
|
||||||
|
<h2 className="mt-2 text-3xl font-semibold text-white">Control center</h2>
|
||||||
|
</div>
|
||||||
|
<span className="rounded-full border border-emerald-400/20 bg-emerald-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-emerald-200">
|
||||||
|
Ready for ops
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 space-y-4">
|
||||||
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
|
||||||
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-white">Payout routing</p>
|
||||||
|
<p className="mt-1 text-sm leading-7 text-slate-400">
|
||||||
|
Assign a default wallet and keep reward destinations audit-friendly.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-gradient-to-br from-cyan-500/40 to-sky-500/10">
|
||||||
|
<svg viewBox="0 0 24 24" className="h-6 w-6 fill-current text-white" aria-hidden="true">
|
||||||
|
<path d={getMdi('mdiWallet', icon.mdiTable)} />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
|
||||||
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-white">Runtime guardrails</p>
|
||||||
|
<p className="mt-1 text-sm leading-7 text-slate-400">
|
||||||
|
Threads, CPU limits, and battery throttling live together in a single policy screen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-gradient-to-br from-violet-500/40 to-fuchsia-500/10">
|
||||||
|
<svg viewBox="0 0 24 24" className="h-6 w-6 fill-current text-white" aria-hidden="true">
|
||||||
|
<path d={getMdi('mdiTune', icon.mdiTable)} />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
|
||||||
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-white">Telemetry + payouts</p>
|
||||||
|
<p className="mt-1 text-sm leading-7 text-slate-400">
|
||||||
|
Review recent sessions and payout records without bouncing between generic CRUD pages.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-gradient-to-br from-emerald-500/40 to-teal-500/10">
|
||||||
|
<svg viewBox="0 0 24 24" className="h-6 w-6 fill-current text-white" aria-hidden="true">
|
||||||
|
<path d={getMdi('mdiChartLine', icon.mdiTable)} />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-8">
|
||||||
|
<div className="mb-8 flex flex-wrap items-end justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs uppercase tracking-[0.22em] text-cyan-200">What is included</p>
|
||||||
|
<h2 className="mt-3 text-3xl font-semibold text-white md:text-4xl">
|
||||||
|
A practical admin workflow for the first release.
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<Link href="/login" className="text-sm font-semibold text-cyan-200 transition hover:text-cyan-100">
|
||||||
|
Sign in to continue →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-6 lg:grid-cols-3">
|
||||||
|
{featureCards.map((feature) => (
|
||||||
|
<CardBox key={feature.title} className="h-full border border-white/10 bg-white/[0.03] backdrop-blur">
|
||||||
|
<div className={`flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-gradient-to-br ${feature.accentClass}`}>
|
||||||
|
<svg viewBox="0 0 24 24" className="h-7 w-7 fill-current text-white" aria-hidden="true">
|
||||||
|
<path d={getMdi(feature.iconName, icon.mdiTable)} />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="mt-6 text-2xl font-semibold text-white">{feature.title}</h3>
|
||||||
|
<p className="mt-3 text-sm leading-8 text-slate-400">{feature.description}</p>
|
||||||
|
</CardBox>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-12">
|
||||||
|
<div className="mb-8 max-w-3xl">
|
||||||
|
<p className="text-xs uppercase tracking-[0.22em] text-cyan-200">Operator journey</p>
|
||||||
|
<h2 className="mt-3 text-3xl font-semibold text-white md:text-4xl">From setup to monitoring in one thin slice.</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 lg:grid-cols-4">
|
||||||
|
{workflowSteps.map((item) => (
|
||||||
|
<div key={item.step} className="rounded-3xl border border-white/10 bg-white/[0.03] p-5 backdrop-blur">
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Step {item.step}</p>
|
||||||
|
<h3 className="mt-4 text-xl font-semibold text-white">{item.title}</h3>
|
||||||
|
<p className="mt-3 text-sm leading-7 text-slate-400">{item.body}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="pb-12 pt-4">
|
||||||
|
<div className="rounded-[2rem] border border-white/10 bg-gradient-to-r from-[#0A1220] via-[#101A31] to-[#10142A] p-8 md:p-10">
|
||||||
|
<div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs uppercase tracking-[0.24em] text-cyan-200">Admin entry</p>
|
||||||
|
<h2 className="mt-3 text-3xl font-semibold text-white md:text-4xl">
|
||||||
|
Ready to explore the first iteration?
|
||||||
|
</h2>
|
||||||
|
<p className="mt-3 max-w-2xl text-sm leading-8 text-slate-300">
|
||||||
|
Use the protected admin area to open the new Control Center, create the core records, and review the seeded mining-related entities in context.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
<BaseButton href="/login" color="info" label="Login" />
|
||||||
|
<BaseButton href="/dashboard" color="whiteDark" label="Admin interface" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer className="relative border-t border-white/10">
|
||||||
|
<div className="mx-auto flex max-w-7xl flex-col gap-4 px-6 py-6 text-sm text-slate-400 md:flex-row md:items-center md:justify-between lg:px-10">
|
||||||
|
<p>© 2026 Crypto Miner Monitor. Built for monitoring, setup, and operator visibility.</p>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<Link href="/privacy-policy" className="transition hover:text-white">
|
||||||
|
Privacy Policy
|
||||||
|
</Link>
|
||||||
|
<Link href="/terms-of-use" className="transition hover:text-white">
|
||||||
|
Terms of Use
|
||||||
|
</Link>
|
||||||
|
<Link href="/dashboard" className="transition hover:text-white">
|
||||||
|
Admin Interface
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user