create-hokage-js-app
Version:
🔥 Best CLI tool to create a MERN stack template. Quick, clean, and customizable.
119 lines (107 loc) • 7.63 kB
JSX
import { useState, useEffect } from 'react';
import reactLogo from '../assets/react.svg';
import viteLogo from '/vite.svg';
import { NavLink } from 'react-router';
const Home = () => {
const [conn, setConn] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [count, setCount] = useState(0);
useEffect(() => {
const connectBackend = async () => {
try {
setLoading(true);
const res = await fetch("http://localhost:5000");
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
const data = await res.json();
setConn(data);
setError(null);
} catch (err) {
console.error("Backend connection failed:", err);
setError(err.message);
} finally {
setLoading(false);
}
};
connectBackend();
}, []);
return (
<div className="relative z-10 flex w-full max-w-5xl flex-col gap-8">
<div className="fixed inset-0 -z-10 overflow-hidden">
<div className="bubble1 animate-float absolute h-[300px] w-[300px] rounded-full bg-white/10 blur-sm" style={{ top: '10%', left: '5%', animationDuration: '25s' }}></div>
<div className="bubble2 animate-float absolute h-[200px] w-[200px] rounded-full bg-white/10 blur-sm" style={{ bottom: '15%', right: '10%', animationDuration: '20s' }}></div>
<div className="bubble3 animate-float absolute h-[150px] w-[150px] rounded-full bg-white/10 blur-sm" style={{ top: '40%', right: '20%', animationDuration: '15s' }}></div>
<div className="bubble4 animate-float absolute h-[250px] w-[250px] rounded-full bg-white/10 blur-sm" style={{ bottom: '30%', left: '20%', animationDuration: '30s' }}></div>
</div>
<div className="flex flex-col items-center gap-6 rounded-2xl border border-white/20 bg-white/10 p-10 text-center shadow-xl backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl">
<div className="flex items-center justify-center gap-8">
<a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
<img src={viteLogo} className="h-30 drop-shadow-lg transition-all duration-300 hover:scale-110 hover:drop-shadow-[0_0_2em_#646cffaa]" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank" rel="noopener noreferrer">
<img src={reactLogo} className="h-30 animate-logo-spin drop-shadow-lg transition-all duration-300 hover:scale-110 hover:drop-shadow-[0_0_2em_#61dafbaa]" alt="React logo" />
</a>
</div>
<h1 className="my-2 bg-gradient-to-r from-[#7a7cff] via-[#6ecbf5] to-[#ff7eb3] bg-clip-text text-5xl font-bold tracking-tight text-transparent">
Vite + React
</h1>
<p className="max-w-[500px] text-xl text-white/85">Modern frontend experience</p>
{loading ? (
<div className="animate-fade-in flex items-center justify-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-gray-400">
<div className="inline-block h-5 w-5 animate-spin rounded-full border-3 border-white/30 border-t-white"></div>
<span>Connecting to backend...</span>
</div>
) : error ? (
<div className="animate-fade-in rounded-full bg-red-500/20 px-4 py-2 text-sm text-red-500">
<span>Connection failed: {error}</span>
</div>
) : conn?.success ? (
<div className="animate-pulse-slow animate-fade-in rounded-full bg-emerald-500/20 px-4 py-2 text-sm text-emerald-400">
<span>Backend connected successfully!</span>
</div>
) : null}
</div>
<div className="flex flex-wrap items-center justify-between gap-10 rounded-2xl border border-white/20 bg-white/10 p-10 shadow-xl backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl">
<div className="flex min-w-[200px] flex-col items-center gap-4">
<button
className="flex h-40 w-40 cursor-pointer flex-col items-center justify-center rounded-[18px] border border-white/20 bg-white/15 p-6 shadow-xl backdrop-blur-md transition-all duration-300 hover:scale-105 hover:bg-white/25 active:scale-98"
onClick={() => setCount((count) => count + 1)}
>
<span className="text-5xl font-bold leading-none text-white">{count}</span>
<span className="mt-2 text-lg text-white/80">Clicks</span>
</button>
<div className="text-sm text-white/70">Click to increase the counter</div>
</div>
<div className="min-w-[300px] flex-1">
<p className="mb-6 text-xl leading-relaxed">
Edit <code className="rounded-md bg-white/10 px-2 py-0.5 font-mono">src/pages/Home.jsx</code> and save to test HMR
</p>
<div className="flex flex-wrap gap-6">
<div className="min-w-[140px] flex-1 rounded-2xl border border-white/20 bg-white/8 p-6 text-center transition-all duration-300 hover:-translate-y-0.5 hover:bg-white/15">
<div className="mb-3 text-4xl">âš¡</div>
<div className="text-lg font-semibold">Blazing Fast</div>
</div>
<div className="min-w-[140px] flex-1 rounded-2xl border border-white/20 bg-white/8 p-6 text-center transition-all duration-300 hover:-translate-y-0.5 hover:bg-white/15">
<div className="mb-3 text-4xl">🧩</div>
<div className="text-lg font-semibold">Modular</div>
</div>
<div className="min-w-[140px] flex-1 rounded-2xl border border-white/20 bg-white/8 p-6 text-center transition-all duration-300 hover:-translate-y-0.5 hover:bg-white/15">
<div className="mb-3 text-4xl">🔧</div>
<div className="text-lg font-semibold">Developer Friendly</div>
</div>
</div>
</div>
</div>
<div className="rounded-2xl border border-white/20 bg-white/10 p-6 px-10 text-center shadow-xl backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl">
<p className="mb-6 text-lg">Click on the Vite and React logos to learn more</p>
<div className="flex flex-wrap justify-center gap-8">
<NavLink to="/signup" className="rounded-xl border border-white/20 bg-white/8 px-5 py-3 text-white/90 no-underline transition-all duration-300 hover:-translate-y-0.5 hover:bg-white/20">Signup</NavLink>
<NavLink to="/login" className="rounded-xl border border-white/20 bg-white/8 px-5 py-3 text-white/90 no-underline transition-all duration-300 hover:-translate-y-0.5 hover:bg-white/20">Login</NavLink>
</div>
</div>
</div>
);
}
export default Home