feat: add Ina Trading portal flows and API integration
This commit is contained in:
Wira Basalamah
173
src/app/(dashboard)/dashboard/help/page.tsx
Normal file
173
src/app/(dashboard)/dashboard/help/page.tsx
Normal file
@ -0,0 +1,173 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
const categories = [
|
||||
{
|
||||
icon: "payments",
|
||||
title: "Payment Protocol",
|
||||
desc: "Financial clearing cycles, escrow rules, and institutional wire frameworks.",
|
||||
},
|
||||
{
|
||||
icon: "local_shipping",
|
||||
title: "Shipping & Logistics",
|
||||
desc: "Global supply chain tracking, customs documentation, and freight insurance.",
|
||||
},
|
||||
{
|
||||
icon: "verified_user",
|
||||
title: "Account & Compliance",
|
||||
desc: "KYC requirements, identity verification, and regional trading licenses.",
|
||||
},
|
||||
{
|
||||
icon: "language",
|
||||
title: "Global Trading Rules",
|
||||
desc: "International trade laws, market restrictions, and tariff updates.",
|
||||
},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
"How to verify my business identity?",
|
||||
"What are the shipping limits for Europe?",
|
||||
"How to contact a trade curator?",
|
||||
];
|
||||
|
||||
export default function HelpPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-surface">
|
||||
{/* Hero */}
|
||||
<section className="relative bg-surface-container-low py-20 px-8 md:px-16 overflow-hidden">
|
||||
{/* Dot grid */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.05]"
|
||||
style={{
|
||||
backgroundImage: "radial-gradient(#5b403d 0.5px, transparent 0.5px)",
|
||||
backgroundSize: "24px 24px",
|
||||
}}
|
||||
/>
|
||||
{/* Decorative accent */}
|
||||
<div className="absolute top-0 right-0 w-1/3 h-full opacity-10 pointer-events-none">
|
||||
<div className="w-full h-full bg-primary rotate-12 translate-x-24 -translate-y-12" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-4xl">
|
||||
<h1 className="text-5xl md:text-6xl font-black font-headline text-on-surface tracking-tighter leading-none mb-8">
|
||||
How can we help <br />
|
||||
<span className="text-primary">you today?</span>
|
||||
</h1>
|
||||
<div className="relative group max-w-2xl">
|
||||
<span className="material-symbols-outlined absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors">
|
||||
search
|
||||
</span>
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full h-14 pl-14 pr-6 bg-white shadow-xl text-base font-medium placeholder:text-slate-400 focus:ring-2 focus:ring-primary/20 focus:outline-none rounded-xl border-none transition-all"
|
||||
placeholder="Search for documentation, protocols, or support articles..."
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Popular Categories */}
|
||||
<section className="px-8 md:px-16 py-14">
|
||||
<div className="flex items-end justify-between mb-10">
|
||||
<div>
|
||||
<p className="text-[10px] font-bold text-primary uppercase tracking-[0.3em] mb-1">Resource Infrastructure</p>
|
||||
<h2 className="text-2xl font-black font-headline tracking-tight uppercase">Popular Categories</h2>
|
||||
</div>
|
||||
<div className="h-[2px] flex-1 bg-surface-container ml-8 mb-1.5 hidden md:block" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{categories.map((cat) => (
|
||||
<div
|
||||
key={cat.title}
|
||||
className="bg-white p-8 rounded-xl shadow-sm hover:-translate-y-1 hover:shadow-xl transition-all cursor-pointer group relative overflow-hidden border border-surface-container"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-1 h-full bg-primary opacity-0 group-hover:opacity-100 transition-opacity rounded-l-xl" />
|
||||
<span className="material-symbols-outlined text-4xl text-primary mb-5 block">{cat.icon}</span>
|
||||
<h3 className="text-base font-black font-headline mb-2 uppercase tracking-tight">{cat.title}</h3>
|
||||
<p className="text-sm text-slate-500 leading-relaxed">{cat.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ + Contact Support */}
|
||||
<section className="px-8 md:px-16 pb-16 grid grid-cols-1 lg:grid-cols-3 gap-10">
|
||||
{/* FAQ */}
|
||||
<div className="lg:col-span-2">
|
||||
<h2 className="text-xl font-black font-headline tracking-tight uppercase mb-6">
|
||||
Top Frequently Asked Questions
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{faqs.map((q) => (
|
||||
<div
|
||||
key={q}
|
||||
className="p-5 bg-surface-container-low rounded-xl flex justify-between items-center group hover:bg-surface-container transition-colors cursor-pointer"
|
||||
>
|
||||
<span className="font-bold text-on-surface">{q}</span>
|
||||
<span className="material-symbols-outlined text-primary group-hover:translate-x-1 transition-transform">
|
||||
arrow_forward
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Support */}
|
||||
<div className="relative bg-primary rounded-2xl p-8 text-white flex flex-col justify-between overflow-hidden shadow-2xl shadow-primary/20 min-h-[320px]">
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-20"
|
||||
style={{
|
||||
backgroundImage: "radial-gradient(#fff 0.5px, transparent 0.5px)",
|
||||
backgroundSize: "24px 24px",
|
||||
}}
|
||||
/>
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-2xl font-black font-headline leading-tight uppercase mb-4">
|
||||
Can't find what you're looking for?
|
||||
</h2>
|
||||
<p className="text-white/80 text-sm leading-relaxed mb-6">
|
||||
Our expert trade curators are available 24/7 for institutional grade support and technical troubleshooting.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative z-10 space-y-3">
|
||||
<button className="w-full bg-white text-primary font-black py-3.5 rounded-xl flex items-center justify-center gap-2 hover:bg-surface-container-low transition-colors uppercase text-xs tracking-widest">
|
||||
<span className="material-symbols-outlined text-base">chat_bubble</span>
|
||||
Open a Ticket
|
||||
</button>
|
||||
<button className="w-full border-2 border-white/40 text-white font-black py-3.5 rounded-xl flex items-center justify-center gap-2 hover:bg-white/10 transition-colors uppercase text-xs tracking-widest">
|
||||
<span className="material-symbols-outlined text-base">support_agent</span>
|
||||
Contact Human Agent
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-slate-50 border-t border-surface-container flex flex-col md:flex-row justify-between items-center gap-6 w-full py-10 px-10">
|
||||
<div className="flex flex-col items-center md:items-start gap-2">
|
||||
<div className="font-black text-slate-900 font-headline text-lg">Ina Trading</div>
|
||||
<p className="text-[10px] font-medium uppercase tracking-widest text-slate-400 text-center md:text-left max-w-xs">
|
||||
© 2024 Ina Trading Marketplace. All Rights Reserved.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
{["Privacy Policy", "Compliance Framework", "Terms of Service", "Operational Status"].map((l) => (
|
||||
<a
|
||||
key={l}
|
||||
href="#"
|
||||
className="text-[10px] font-medium uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"
|
||||
>
|
||||
{l}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user