209 lines
8.2 KiB
TypeScript
209 lines
8.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
import FadeIn from "@/components/FadeIn";
|
|
|
|
const products = [
|
|
{
|
|
name: "UIT",
|
|
tagline: "Institutional-grade stock screening for independent investors.",
|
|
href: "/uit",
|
|
badge: "Available Now",
|
|
badgeColor: "#4ade80",
|
|
},
|
|
{
|
|
name: "More Coming",
|
|
tagline: "Additional tools are in development. Stay tuned.",
|
|
href: "#",
|
|
badge: "Soon",
|
|
badgeColor: "#888888",
|
|
},
|
|
];
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
{/* ── Hero ─────────────────────────────────────────────────────────── */}
|
|
<section className="relative min-h-screen flex flex-col items-center justify-center text-center px-6 overflow-hidden">
|
|
{/* Background grid */}
|
|
<div
|
|
className="absolute inset-0 pointer-events-none"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)",
|
|
backgroundSize: "60px 60px",
|
|
}}
|
|
/>
|
|
{/* Radial glow */}
|
|
<div
|
|
className="absolute inset-0 pointer-events-none"
|
|
style={{
|
|
background:
|
|
"radial-gradient(ellipse 80% 50% at 50% 40%, rgba(255,255,255,0.04) 0%, transparent 70%)",
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10 max-w-3xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 16 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
|
|
>
|
|
<p
|
|
className="text-xs font-semibold uppercase tracking-widest mb-6"
|
|
style={{ color: "#4ade80", letterSpacing: "0.2em" }}
|
|
>
|
|
Verimund Solutions
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
className="text-5xl md:text-7xl font-semibold leading-tight mb-6"
|
|
style={{ letterSpacing: "-0.03em" }}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
|
|
>
|
|
Precision tools for{" "}
|
|
<span style={{ color: "#888888" }}>serious investors.</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-base md:text-lg mb-10 max-w-xl mx-auto"
|
|
style={{ color: "#888888", lineHeight: 1.7 }}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
|
|
>
|
|
Verimund Solutions builds finance-focused software that brings
|
|
institutional-level analysis to independent investors.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
className="flex flex-col sm:flex-row gap-3 justify-center"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
|
|
>
|
|
<Link
|
|
href="/uit"
|
|
className="px-6 py-3 text-sm font-medium rounded-sm transition-all duration-200"
|
|
style={{ background: "#ffffff", color: "#000000" }}
|
|
onMouseEnter={(e) => (e.currentTarget.style.background = "#e0e0e0")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.background = "#ffffff")}
|
|
>
|
|
Explore UIT
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="px-6 py-3 text-sm font-medium rounded-sm border transition-all duration-200"
|
|
style={{ border: "1px solid #222222", color: "#888888" }}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = "#888888";
|
|
e.currentTarget.style.color = "#ffffff";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = "#222222";
|
|
e.currentTarget.style.color = "#888888";
|
|
}}
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<motion.div
|
|
className="absolute bottom-10 left-1/2 -translate-x-1/2"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1 }}
|
|
>
|
|
<motion.div
|
|
className="w-px h-10 mx-auto"
|
|
style={{ background: "linear-gradient(to bottom, #333333, transparent)" }}
|
|
animate={{ scaleY: [1, 0.5, 1] }}
|
|
transition={{ duration: 1.8, repeat: Infinity, ease: "easeInOut" }}
|
|
/>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* ── About ────────────────────────────────────────────────────────── */}
|
|
<section className="py-24 px-6 border-t" style={{ borderColor: "#111111" }}>
|
|
<FadeIn>
|
|
<div className="max-w-2xl mx-auto text-center">
|
|
<p
|
|
className="text-xs font-semibold uppercase tracking-widest mb-5"
|
|
style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
|
|
>
|
|
About
|
|
</p>
|
|
<p className="text-base md:text-lg leading-relaxed" style={{ color: "#888888" }}>
|
|
We build software that makes institutional-grade financial analysis
|
|
accessible — without a Bloomberg terminal. No account needed.
|
|
Every product runs on a single license key, activated directly on your machine.
|
|
</p>
|
|
</div>
|
|
</FadeIn>
|
|
</section>
|
|
|
|
{/* ── Products ─────────────────────────────────────────────────────── */}
|
|
<section className="py-24 px-6 border-t" style={{ borderColor: "#111111" }}>
|
|
<div className="max-w-5xl mx-auto">
|
|
<FadeIn>
|
|
<p
|
|
className="text-xs font-semibold uppercase tracking-widest mb-12 text-center"
|
|
style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
|
|
>
|
|
Products
|
|
</p>
|
|
</FadeIn>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
{products.map((p, i) => (
|
|
<FadeIn key={p.name} delay={i * 0.1}>
|
|
<Link
|
|
href={p.href}
|
|
className="block p-8 rounded-sm border transition-all duration-300"
|
|
style={{ border: "1px solid #222222", background: "#111111" }}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLElement).style.borderColor = "#333333";
|
|
(e.currentTarget as HTMLElement).style.background = "#181818";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget as HTMLElement).style.borderColor = "#222222";
|
|
(e.currentTarget as HTMLElement).style.background = "#111111";
|
|
}}
|
|
>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<h3 className="text-xl font-semibold">{p.name}</h3>
|
|
<span
|
|
className="text-xs px-2 py-0.5 rounded-full font-medium"
|
|
style={{
|
|
background: `${p.badgeColor}18`,
|
|
color: p.badgeColor,
|
|
border: `1px solid ${p.badgeColor}30`,
|
|
}}
|
|
>
|
|
{p.badge}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm leading-relaxed" style={{ color: "#888888" }}>
|
|
{p.tagline}
|
|
</p>
|
|
{p.href !== "#" && (
|
|
<p className="mt-6 text-xs font-medium" style={{ color: "#3a3a3a" }}>
|
|
Learn more →
|
|
</p>
|
|
)}
|
|
</Link>
|
|
</FadeIn>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|