86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { isAuthenticated } from "@/lib/auth";
|
|
import { ExternalLink, ArrowRight, LineChart, ShieldCheck, Zap, Bold } from "lucide-react";
|
|
|
|
export function HomePage() {
|
|
const navigate = useNavigate();
|
|
const authenticated = isAuthenticated();
|
|
|
|
return (
|
|
<div className="flex flex-col gap-12">
|
|
<section className="pt-12 pb-16 md:pt-20 md:pb-28">
|
|
<div className="text-center space-y-6">
|
|
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
|
|
IoT Plotter
|
|
<span className="text-primary">.</span>
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto">
|
|
Monitor, visualize, and analyze your IoT data in real-time with our easy-to-use platform
|
|
</p>
|
|
<div className="flex flex-wrap justify-center gap-4 pt-4">
|
|
<Button
|
|
size="lg"
|
|
onClick={() => navigate(authenticated ? "/dashboard" : "/register")}
|
|
className="h-12 px-6"
|
|
>
|
|
{authenticated ? "Dashboard" : "Get Started"}{" "}
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
|
|
{!authenticated && (
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
onClick={() => navigate("/login")}
|
|
className="h-12 px-6"
|
|
>
|
|
Login
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => window.open("https://io-doc.monasefloadbalancer.ir", "_blank")}
|
|
className="h-12"
|
|
>
|
|
<ExternalLink className="mr-2 h-6 w-6" />
|
|
API Documentation
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-10">
|
|
<div className="grid gap-8 md:grid-cols-3">
|
|
<div className="flex flex-col items-center text-center p-6 rounded-lg border bg-card shadow-sm">
|
|
<LineChart className="h-12 w-12 text-primary mb-4" />
|
|
<h3 className="text-xl font-semibold mb-2">Real-time Visualization</h3>
|
|
<p className="text-muted-foreground">
|
|
Monitor your IoT device data in real-time with interactive charts and customizable
|
|
dashboards
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center text-center p-6 rounded-lg border bg-card shadow-sm">
|
|
<ShieldCheck className="h-12 w-12 text-primary mb-4" />
|
|
<h3 className="text-xl font-semibold mb-2">Secure Communication</h3>
|
|
<p className="text-muted-foreground">
|
|
Industry-standard encryption and authentication for all your IoT communications
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center text-center p-6 rounded-lg border bg-card shadow-sm">
|
|
<Zap className="h-12 w-12 text-primary mb-4" />
|
|
<h3 className="text-xl font-semibold mb-2">Simple Integration</h3>
|
|
<p className="text-muted-foreground">
|
|
Easy-to-use API with comprehensive documentation for quick integration with any device
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|