417 lines
16 KiB
TypeScript
417 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import FadeIn from "@/components/FadeIn";
|
||
|
||
const dimensions = [
|
||
{ name: "Value", methods: ["Sector Z-Score Normalization"] },
|
||
{ name: "Growth", methods: ["Revenue & Earnings Trend Analysis"] },
|
||
{ name: "Momentum", methods: ["Short/Long-Term Trend Divergence"] },
|
||
{ name: "Quality", methods: ["Piotroski F-Score"] },
|
||
{ name: "Profitability", methods: ["Sloan Accruals Ratio"] },
|
||
{ name: "Sentiment", methods: ["VADER NLP"] },
|
||
{ name: "Analyst", methods: ["Analyst Consensus Normalization"] },
|
||
{ name: "Risk", methods: ["FINRA RegSHO Short-Volume Analysis"] },
|
||
];
|
||
|
||
const profiles = [
|
||
"Balanced",
|
||
"High Growth",
|
||
"Value / Defensive",
|
||
"Momentum / Swing",
|
||
"Dividend Income",
|
||
"Turnaround / Contrarian",
|
||
"Early-Stage",
|
||
];
|
||
|
||
const dataSources = [
|
||
"SEC EDGAR XBRL",
|
||
"FINRA RegSHO",
|
||
"13F Hedge Fund Filings",
|
||
"SEC Form 4 Insider Transactions",
|
||
"Live Analyst Consensus",
|
||
];
|
||
|
||
const pricingTiers = [
|
||
{
|
||
name: "Weekly",
|
||
price: "$6",
|
||
period: "7-day access",
|
||
sub: null,
|
||
discount: null,
|
||
popular: false,
|
||
priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_WEEKLY ?? "",
|
||
},
|
||
{
|
||
name: "Monthly",
|
||
price: "$19",
|
||
period: "30-day access",
|
||
sub: null,
|
||
discount: null,
|
||
popular: false,
|
||
priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_MONTHLY ?? "",
|
||
},
|
||
{
|
||
name: "Annual",
|
||
price: "$149",
|
||
period: "12-month access",
|
||
sub: "$12.42 / mo",
|
||
discount: "Save 35%",
|
||
popular: true,
|
||
priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_ANNUAL ?? "",
|
||
},
|
||
{
|
||
name: "Lifetime",
|
||
price: "$299",
|
||
period: "Never expires",
|
||
sub: null,
|
||
discount: null,
|
||
popular: false,
|
||
priceId: process.env.NEXT_PUBLIC_STRIPE_PRICE_LIFETIME ?? "",
|
||
},
|
||
];
|
||
|
||
export default function UIT() {
|
||
const handleBuy = async (priceId: string) => {
|
||
if (!priceId || priceId.startsWith("STRIPE_PRICE_ID") || priceId.startsWith("price_PLACEHOLDER")) {
|
||
alert("Purchase flow coming soon. Check back shortly.");
|
||
return;
|
||
}
|
||
try {
|
||
const res = await fetch("/api/checkout", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ priceId }),
|
||
});
|
||
const data = await res.json();
|
||
if (data.url) {
|
||
window.location.href = data.url;
|
||
} else {
|
||
alert("Something went wrong. Please try again or contact support@verimundsolutions.com.");
|
||
}
|
||
} catch {
|
||
alert("Something went wrong. Please try again or contact support@verimundsolutions.com.");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{/* ── Hero ─────────────────────────────────────────────────────────── */}
|
||
<section className="relative min-h-[60vh] flex flex-col items-center justify-center text-center px-6 pt-24 overflow-hidden">
|
||
<div
|
||
className="absolute inset-0 pointer-events-none"
|
||
style={{
|
||
backgroundImage:
|
||
"linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)",
|
||
backgroundSize: "60px 60px",
|
||
}}
|
||
/>
|
||
<div
|
||
className="absolute inset-0 pointer-events-none"
|
||
style={{
|
||
background:
|
||
"radial-gradient(ellipse 70% 50% at 50% 30%, rgba(74,222,128,0.04) 0%, transparent 70%)",
|
||
}}
|
||
/>
|
||
|
||
<div className="relative z-10 max-w-2xl mx-auto">
|
||
<p
|
||
className="text-xs font-semibold uppercase tracking-widest mb-4"
|
||
style={{ color: "#4ade80", letterSpacing: "0.2em" }}
|
||
>
|
||
Product
|
||
</p>
|
||
<h1
|
||
className="text-5xl md:text-6xl font-semibold mb-5"
|
||
style={{ letterSpacing: "-0.03em" }}
|
||
>
|
||
UIT
|
||
</h1>
|
||
<p className="text-base md:text-lg mb-8" style={{ color: "#888888", lineHeight: 1.7 }}>
|
||
A multi-dimensional stock screener that evaluates every major US-listed
|
||
equity across 8 scoring dimensions — weighted automatically to match
|
||
your investor profile.
|
||
</p>
|
||
<a
|
||
href="#pricing"
|
||
className="inline-block 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")}
|
||
>
|
||
Get Started
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Evaluation Methods ───────────────────────────────────────────── */}
|
||
<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-3 text-center"
|
||
style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
|
||
>
|
||
Methodology
|
||
</p>
|
||
<h2
|
||
className="text-2xl md:text-3xl font-semibold text-center mb-3"
|
||
style={{ letterSpacing: "-0.02em" }}
|
||
>
|
||
8-Dimension Composite Score
|
||
</h2>
|
||
<p className="text-sm text-center mb-12" style={{ color: "#888888" }}>
|
||
Every stock is scored 0–100 independently. Weights shift automatically based on your selected investor profile.
|
||
</p>
|
||
</FadeIn>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{dimensions.map((d, i) => (
|
||
<FadeIn key={d.name} delay={i * 0.05}>
|
||
<div
|
||
className="p-5 rounded-sm border h-full"
|
||
style={{ border: "1px solid #222222", background: "#111111" }}
|
||
>
|
||
<p className="text-sm font-semibold mb-3" style={{ color: "#ffffff" }}>
|
||
{d.name}
|
||
</p>
|
||
<div className="flex flex-col gap-1">
|
||
{d.methods.map((m) => (
|
||
<p key={m} className="text-xs" style={{ color: "#888888" }}>
|
||
{m}
|
||
</p>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</FadeIn>
|
||
))}
|
||
</div>
|
||
|
||
{/* Investor profiles */}
|
||
<FadeIn delay={0.2}>
|
||
<div className="mt-10 p-6 rounded-sm border" style={{ border: "1px solid #222222", background: "#111111" }}>
|
||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{ color: "#3a3a3a", letterSpacing: "0.15em" }}>
|
||
Investor Profiles
|
||
</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{profiles.map((p) => (
|
||
<span
|
||
key={p}
|
||
className="text-xs px-3 py-1 rounded-full border"
|
||
style={{ border: "1px solid #222222", color: "#888888" }}
|
||
>
|
||
{p}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</FadeIn>
|
||
|
||
{/* Data sources */}
|
||
<FadeIn delay={0.25}>
|
||
<div className="mt-4 p-6 rounded-sm border" style={{ border: "1px solid #222222", background: "#111111" }}>
|
||
<p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{ color: "#3a3a3a", letterSpacing: "0.15em" }}>
|
||
Data Sources
|
||
</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{dataSources.map((s) => (
|
||
<span
|
||
key={s}
|
||
className="text-xs px-3 py-1 rounded-full border"
|
||
style={{ border: "1px solid #1a1a1a", color: "#4ade80", background: "#4ade8010" }}
|
||
>
|
||
{s}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</FadeIn>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Pricing ──────────────────────────────────────────────────────── */}
|
||
<section id="pricing" className="py-24 px-6 border-t" style={{ borderColor: "#111111" }}>
|
||
<div className="max-w-4xl mx-auto">
|
||
<FadeIn>
|
||
<p
|
||
className="text-xs font-semibold uppercase tracking-widest mb-3 text-center"
|
||
style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
|
||
>
|
||
Pricing
|
||
</p>
|
||
<h2
|
||
className="text-2xl md:text-3xl font-semibold text-center mb-3"
|
||
style={{ letterSpacing: "-0.02em" }}
|
||
>
|
||
One-time payment. No subscription required.
|
||
</h2>
|
||
<p className="text-sm text-center mb-12" style={{ color: "#888888" }}>
|
||
Purchase a license key. Your key is emailed to you immediately after checkout.
|
||
</p>
|
||
</FadeIn>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{pricingTiers.map((tier, i) => (
|
||
<FadeIn key={tier.name} delay={i * 0.08}>
|
||
<div
|
||
className="relative p-6 rounded-sm border flex flex-col h-full"
|
||
style={{
|
||
border: tier.popular ? "1px solid #ffffff" : "1px solid #222222",
|
||
background: tier.popular ? "#181818" : "#111111",
|
||
}}
|
||
>
|
||
{tier.popular && (
|
||
<div
|
||
className="absolute -top-px left-1/2 -translate-x-1/2 px-3 py-0.5 text-xs font-semibold rounded-b-sm whitespace-nowrap"
|
||
style={{ background: "#ffffff", color: "#000000" }}
|
||
>
|
||
Most Popular
|
||
</div>
|
||
)}
|
||
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between mb-2 mt-1">
|
||
<p className="text-sm font-semibold">{tier.name}</p>
|
||
{tier.discount && (
|
||
<span
|
||
className="text-xs px-2 py-0.5 rounded-full font-semibold"
|
||
style={{ background: "#4ade8018", color: "#4ade80", border: "1px solid #4ade8030" }}
|
||
>
|
||
{tier.discount}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Price */}
|
||
<p className="text-4xl font-semibold mb-0.5" style={{ letterSpacing: "-0.03em" }}>
|
||
{tier.price}
|
||
</p>
|
||
{tier.sub && (
|
||
<p className="text-xs mb-0.5" style={{ color: "#4ade80" }}>
|
||
{tier.sub}
|
||
</p>
|
||
)}
|
||
<p className="text-xs mb-6" style={{ color: "#888888" }}>
|
||
{tier.period}
|
||
</p>
|
||
|
||
{/* Features */}
|
||
<ul className="flex flex-col gap-2 mb-6 flex-1">
|
||
{[
|
||
"Full screener access",
|
||
"All 7 investor profiles",
|
||
"Hedge fund & insider data",
|
||
"License key via email",
|
||
].map((f) => (
|
||
<li key={f} className="text-xs flex items-center gap-2" style={{ color: "#888888" }}>
|
||
<span style={{ color: "#4ade80" }}>✓</span> {f}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
{/* CTA */}
|
||
<button
|
||
onClick={() => handleBuy(tier.priceId)}
|
||
className="w-full py-2.5 text-sm font-medium rounded-sm transition-all duration-200"
|
||
style={
|
||
tier.popular
|
||
? { background: "#ffffff", color: "#000000" }
|
||
: { border: "1px solid #222222", color: "#ffffff", background: "transparent" }
|
||
}
|
||
onMouseEnter={(e) => {
|
||
if (tier.popular) {
|
||
e.currentTarget.style.background = "#e0e0e0";
|
||
} else {
|
||
e.currentTarget.style.borderColor = "#ffffff";
|
||
}
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
if (tier.popular) {
|
||
e.currentTarget.style.background = "#ffffff";
|
||
} else {
|
||
e.currentTarget.style.borderColor = "#222222";
|
||
}
|
||
}}
|
||
>
|
||
Buy Now
|
||
</button>
|
||
</div>
|
||
</FadeIn>
|
||
))}
|
||
</div>
|
||
|
||
<FadeIn delay={0.35}>
|
||
<p className="text-xs text-center mt-8" style={{ color: "#3a3a3a" }}>
|
||
Powered by Stripe. Your payment information is never stored on our servers.
|
||
</p>
|
||
</FadeIn>
|
||
|
||
{/* ── Active development strip ─────────────────────────────────── */}
|
||
<FadeIn delay={0.4}>
|
||
<div
|
||
className="mt-8 flex items-start sm:items-center gap-4 px-6 py-5 rounded-sm border"
|
||
style={{ border: "1px solid #1a1a1a", background: "#0f0f0f" }}
|
||
>
|
||
<div className="flex-shrink-0 flex items-center gap-2 pt-0.5 sm:pt-0">
|
||
<span
|
||
className="relative flex h-2 w-2"
|
||
>
|
||
<span
|
||
className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-60"
|
||
style={{ background: "#4ade80" }}
|
||
/>
|
||
<span
|
||
className="relative inline-flex rounded-full h-2 w-2"
|
||
style={{ background: "#4ade80" }}
|
||
/>
|
||
</span>
|
||
<span className="text-xs font-semibold whitespace-nowrap" style={{ color: "#4ade80" }}>
|
||
Actively developed
|
||
</span>
|
||
</div>
|
||
<p className="text-xs leading-relaxed" style={{ color: "#888888" }}>
|
||
UIT is updated regularly with new scoring signals, data sources, and improvements.
|
||
All updates are included with every license — what you buy today keeps getting better.
|
||
</p>
|
||
</div>
|
||
</FadeIn>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Discord ──────────────────────────────────────────────────────── */}
|
||
<section className="py-20 px-6 border-t" style={{ borderColor: "#111111" }}>
|
||
<FadeIn>
|
||
<div
|
||
className="max-w-3xl mx-auto rounded-sm border p-10 text-center"
|
||
style={{ border: "1px solid #222222", background: "#111111" }}
|
||
>
|
||
<p
|
||
className="text-xs font-semibold uppercase tracking-widest mb-4"
|
||
style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
|
||
>
|
||
Community
|
||
</p>
|
||
<h3 className="text-2xl font-semibold mb-3" style={{ letterSpacing: "-0.02em" }}>
|
||
Join the UIT Discord
|
||
</h3>
|
||
<p className="text-sm mb-7" style={{ color: "#888888" }}>
|
||
Get support, announcements, and connect with other UIT users.
|
||
</p>
|
||
<a
|
||
href="DISCORD_INVITE_LINK"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="inline-block px-6 py-3 text-sm font-medium rounded-sm border transition-all duration-200"
|
||
style={{ border: "1px solid #222222", color: "#ffffff" }}
|
||
onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#ffffff")}
|
||
onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#222222")}
|
||
>
|
||
Join Server
|
||
</a>
|
||
</div>
|
||
</FadeIn>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|