import React from "react";
export default function AboutUs() {
return (
<main className="bg-[#070D16] text-white">
{/* HERO */}
<section className="min-h-screen flex items-center">
<div className="container mx-auto px-6 max-w-7xl">
<span className="text-[#D4AF37] uppercase tracking-[3px]">
About NEFVEX
</span>
<h1 className="text-6xl font-bold leading-tight mt-6 max-w-5xl">
Connecting Global Markets Through
<span className="text-[#D4AF37]"> Strategic Trade</span>
{" "} & Financial Coordination
</h1>
<p className="text-gray-400 text-xl mt-8 max-w-3xl">
NEFVEX is an international holding company headquartered in Panama,
operating as a global platform for international trade,
commercial representation, international paymaster services,
and cross-border business development.
</p>
</div>
</section>
{/* OUR STORY */}
<section className="py-32">
<div className="container mx-auto px-6 max-w-7xl">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div>
<span className="text-[#D4AF37] uppercase tracking-[3px]">
Our Story
</span>
<h2 className="text-5xl font-bold mt-4 mb-8">
From Ancient Trade Routes to Modern Global Commerce
</h2>
<p className="text-gray-400 leading-8 mb-6">
The name NEFVEX originates from the ancient concept of Nefu —
sailors, captains, and maritime traders who connected
civilizations through international sea routes.
</p>
<p className="text-gray-400 leading-8">
Today, NEFVEX represents the evolution of global commerce,
strategic finance, and international business intelligence,
connecting opportunities across the Middle East, Latin America,
Africa, Asia, and international markets.
</p>
</div>
<div>
<img
src="/images/about-nefvex.jpg"
alt="NEFVEX"
className="rounded-2xl border border-gray-800"
/>
</div>
</div>
</div>
</section>
{/* STATS */}
<section className="pb-32">
<div className="container mx-auto px-6">
<div className="grid md:grid-cols-4 gap-8">
<div className="bg-[#0F1B2D] p-8 rounded-xl">
<h3 className="text-[#D4AF37] text-4xl font-bold">50+</h3>
<p className="mt-2 text-gray-400">
Countries Reached
</p>
</div>
<div className="bg-[#0F1B2D] p-8 rounded-xl">
<h3 className="text-[#D4AF37] text-4xl font-bold">05</h3>
<p className="mt-2 text-gray-400">
Core Business Divisions
</p>
</div>
<div className="bg-[#0F1B2D] p-8 rounded-xl">
<h3 className="text-[#D4AF37] text-4xl font-bold">Global</h3>
<p className="mt-2 text-gray-400">
Partner Network
</p>
</div>
<div className="bg-[#0F1B2D] p-8 rounded-xl">
<h3 className="text-[#D4AF37] text-4xl font-bold">24/7</h3>
<p className="mt-2 text-gray-400">
International Operations
</p>
</div>
</div>
</div>
</section>
{/* VISION MISSION VALUES */}
<section className="py-32 bg-[#0B1320]">
<div className="container mx-auto px-6">
<div className="text-center mb-20">
<span className="text-[#D4AF37] uppercase tracking-[3px]">
Core Philosophy
</span>
<h2 className="text-5xl font-bold mt-4">
The Foundation of Every Partnership
</h2>
</div>
<div className="grid lg:grid-cols-3 gap-8">
<div className="bg-[#0F1B2D] p-10 rounded-xl">
<h3 className="text-3xl font-bold mb-6">
Vision
</h3>
<p className="text-gray-400">
To become one of the leading global companies in international
trade solutions, paymaster services, strategic commercial
representation, and business development.
</p>
</div>
<div className="bg-[#0F1B2D] p-10 rounded-xl">
<h3 className="text-3xl font-bold mb-6">
Mission
</h3>
<p className="text-gray-400">
To provide secure, flexible, and professional commercial
and financial solutions that empower companies and
international partners worldwide.
</p>
</div>
<div className="bg-[#0F1B2D] p-10 rounded-xl">
<h3 className="text-3xl font-bold mb-6">
Values
</h3>
<ul className="space-y-3 text-gray-400">
<li>Trust</li>
<li>Confidentiality</li>
<li>Professionalism</li>
<li>Transparency</li>
<li>Strategic Partnerships</li>
</ul>
</div>
</div>
</div>
</section>
{/* SERVICES */}
<section className="py-32">
<div className="container mx-auto px-6">
<div className="text-center mb-20">
<span className="text-[#D4AF37] uppercase tracking-[3px]">
What We Do
</span>
<h2 className="text-5xl font-bold mt-4">
Core Business Divisions
</h2>
</div>
<div className="grid lg:grid-cols-5 gap-6">
{[
"International Trade",
"Paymaster Services",
"Commercial Representation",
"Petroleum & Energy",
"Halal Protein"
].map((service) => (
<div
key={service}
className="bg-[#0F1B2D] p-8 rounded-xl border border-gray-800"
>
<h3 className="font-bold text-xl">
{service}
</h3>
</div>
))}
</div>
</div>
</section>
{/* QUOTE */}
<section className="py-40 text-center">
<div className="container mx-auto px-6 max-w-5xl">
<div className="text-[#D4AF37] text-7xl mb-10">
"
</div>
<h2 className="text-5xl leading-relaxed font-semibold">
Global business is not merely about transactions.
It is about building trusted bridges between markets,
cultures, and opportunities.
</h2>
<div className="mt-12 text-[#D4AF37] text-2xl">
NEFVEX
</div>
<p className="text-gray-400 mt-3">
Global Trade • Strategic Representation • Financial Coordination
</p>
</div>
</section>
{/* CTA */}
<section className="py-32 bg-[#0B1320]">
<div className="container mx-auto px-6 text-center">
<h2 className="text-5xl font-bold">
Let's Build Global Opportunities Together
</h2>
<p className="text-gray-400 mt-8 max-w-3xl mx-auto">
Whether you are a supplier, buyer, investor, refinery,
producer, or strategic partner, NEFVEX provides the expertise,
network, and coordination necessary for successful
international growth.
</p>
<div className="flex justify-center gap-6 mt-12">
<button className="bg-[#D4AF37] text-black px-8 py-4 rounded-lg font-semibold">
Contact Us
</button>
<button className="border border-[#D4AF37] text-[#D4AF37] px-8 py-4 rounded-lg">
Explore Services
</button>
</div>
</div>
</section>
</main>
);
}
