);
}
// A couple of cubelets per side lift and slide out of the plane, so the cube
// reads as an assembly of blocks rather than a printed grid.
const TileMoves = ({ seed = 0 }) => (
);
function HomeScreen({ onNav }) {
// A real 3D cube that turns around in space. It auto-rotates continuously and
// you can grab it to spin faster/slower — the front face carries the film, the
// other faces carry the firm's statements, so all four sides come around.
const [angle, setAngle] = React.useState(-18); // rotateY of the cube
const [pitch, setPitch] = React.useState(-14); // rotateX of the cube
const [dragging, setDragging] = React.useState(false);
const dragRef = React.useRef(null);
const velRef = React.useRef(-0.55); // idle spin speed (deg/frame)
const rafRef = React.useRef(null);
const tRef = React.useRef(0); // idle clock, drives the slow tumble on X
React.useEffect(() => {
let last = performance.now();
const tick = (now) => {
const dt = Math.min(2, (now - last) / 16.67); last = now;
if (!dragRef.current) {
setAngle((a) => a + velRef.current * dt);
// ease idle speed back to a gentle constant drift
velRef.current += (-0.55 - velRef.current) * 0.03;
// Slow tumble on the other axis so it turns on a diagonal, not a turntable.
tRef.current += dt;
const target = -14 + Math.sin(tRef.current * 0.0055) * 16;
setPitch((p) => p + (target - p) * 0.04);
}
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, []);
const onDown = (e) => { dragRef.current = { startX: e.clientX, startY: e.clientY, base: angle, baseP: pitch, lastX: e.clientX }; setDragging(true); e.preventDefault(); };
const onMove = (e) => {
const d = dragRef.current;
if (!d) return;
velRef.current = (e.clientX - d.lastX) * 0.4; // carry momentum on release
d.lastX = e.clientX;
setAngle(d.base + (e.clientX - d.startX) * 0.4);
// drag up/down tilts the cube, clamped so it never flips over
setPitch(Math.max(-70, Math.min(30, d.baseP + (e.clientY - d.startY) * 0.4)));
};
const endDrag = () => { dragRef.current = null; setDragging(false); };
React.useEffect(() => {
if (!dragging) return;
const mv = (e) => onMove(e);
window.addEventListener('mousemove', mv);
window.addEventListener('mouseup', endDrag);
return () => { window.removeEventListener('mousemove', mv); window.removeEventListener('mouseup', endDrag); };
}, [dragging]);
// Cube geometry — half-depth so faces sit flush at the edges.
const CUBE = 320, HALF = CUBE / 2;
// Face element stays a CLEAN 3d leaf (only transform/size/bg/backface) so
// backface-visibility culls reliably. Border + shadow live on an inner child.
const faceBase = {
position: 'absolute', width: CUBE, height: CUBE, left: '50%', top: '50%',
marginLeft: -HALF, marginTop: -HALF,
backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
transformStyle: 'preserve-3d',
};
const faceDecor = {
position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 5,
border: '1px solid rgba(255,255,255,0.35)',
boxShadow: 'inset 2px 2px 0 rgba(255,255,255,0.45), inset -3px -3px 0 rgba(0,0,0,0.35), inset -28px -28px 60px rgba(0,0,0,0.5), inset 22px 22px 70px rgba(255,255,255,0.14)',
};
// Nine cubelets per side: grooves on the thirds, with a lit edge either side
// of each groove so every tile reads as its own bevelled block.
const T = 100 / 3;
const groove = (dir) => `repeating-linear-gradient(${dir},
transparent 0 calc(${T}% - 5px),
rgba(255,255,255,0.22) calc(${T}% - 5px) calc(${T}% - 3px),
rgba(0,0,0,0.55) calc(${T}% - 3px) calc(${T}% + 1px),
rgba(255,255,255,0.16) calc(${T}% + 1px) calc(${T}% + 3px),
transparent calc(${T}% + 3px) ${T}%)`;
const tileGrid = {
position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 6,
background: `${groove('90deg')}, ${groove('180deg')}`,
backgroundSize: '100% 100%, 100% 100%',
mixBlendMode: 'overlay',
};
const faceClip = { position: 'absolute', inset: 0, overflow: 'hidden' };
const faceVideo = { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', background: 'linear-gradient(135deg,#2b2e33,#1d1f23)' };
const filmScrim = { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,14,6,0.35), rgba(20,14,6,0.62))' };
// Manual backface culling — CSS backface-visibility won't cull inside this
// preserve-3d group, so hide any face whose outward normal points away.
const rx = pitch * Math.PI / 180, rz = 6 * Math.PI / 180, ry = angle * Math.PI / 180;
const m3 = (a, b) => { const r = [[0,0,0],[0,0,0],[0,0,0]]; for (let i=0;i<3;i++) for (let j=0;j<3;j++) for (let k=0;k<3;k++) r[i][j]+=a[i][k]*b[k][j]; return r; };
const Rx = [[1,0,0],[0,Math.cos(rx),-Math.sin(rx)],[0,Math.sin(rx),Math.cos(rx)]];
const Rz = [[Math.cos(rz),-Math.sin(rz),0],[Math.sin(rz),Math.cos(rz),0],[0,0,1]];
const Ry = [[Math.cos(ry),0,Math.sin(ry)],[0,1,0],[-Math.sin(ry),0,Math.cos(ry)]];
const M = m3(m3(Rx, Rz), Ry);
const vis = (n) => (M[2][0]*n[0] + M[2][1]*n[1] + M[2][2]*n[2]) > 0.02 ? 'visible' : 'hidden';
const faceVis = { front: vis([0,0,1]), right: vis([1,0,0]), back: vis([0,0,-1]), left: vis([-1,0,0]), top: vis([0,1,0]), bottom: vis([0,-1,0]) };
// Refined sheen — a single quiet light fall across polished stone.
const cosmicSheen = { position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.12) 22%, transparent 50%), radial-gradient(90% 80% at 78% 96%, rgba(0,0,0,0.55), transparent 68%)' };
// Deep, muted mineral washes — bordeaux, graphite, bronze — not cosmic.
const nebula = (a, b) => `radial-gradient(95% 95% at 28% 18%, ${a}, transparent 78%), radial-gradient(95% 95% at 82% 92%, ${b}, transparent 80%), #6a4a1e`;
const panelText = {
position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center',
padding: 'var(--space-7)', color: 'var(--paper)',
};
const scrim = { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(12,11,16,0.35), rgba(12,11,16,0.7))' };
return (
{/* Hero — a 3D cube that turns to state the mandate; drag to spin it */}
{/* Facade texture — the tower read as light on glass, blended into the gold */}
{/* Moving gold light sweep */}
{/* Quiet vignette */}
{/* Hero content — statement + cube */}
Investment house creating value
Investing with conviction.
We negotiate, structure, and invest to create value for companies and technology leaders — across Dubai. London. Hong-Kong. Mumbai.
{/* Ground shadow — grounds the cube in 3D space */}
{/* FRONT — the film */}
WE
We.
drag to read the mandate →
{/* RIGHT — statement */}
negotiate,
{/* BACK — statement */}
structure,
{/* LEFT — statement */}
& invest.
{/* TOP */}
{/* BOTTOM */}
{/* Cinematic skyline band */}
Where capital meets conviction.
{/* Capabilities preview */}
What we do
Three disciplines, one table.
{/* Sectors — dynamic marquee */}
Sector-agnostic, tech-native
We work across markets — with particular interest in technology-driven businesses.
);
}
const INSIGHTS = [
{
cat: 'M&A', dateline: 'Perspective', read: '6 min read', img: 'assets/insight-ma.png',
title: 'Create PE arbitrage: the sum is more than individual parts, and vice versa.',
standfirst: 'Value is not only found in the assets acquired. It is created in the re-rating — when combined earnings are priced on a higher multiple than the parts ever commanded alone.',
body: [
'Every acquisition carries two sources of return. The first is arithmetic: the earnings you buy. The second, larger and less understood, is the arbitrage between the multiple you pay privately and the multiple the combined entity commands once consolidated.',
'That gap is where the real work sits. Buying earnings at a private multiple and holding them inside a platform valued on a higher one converts each transaction into an immediate re-rating — before a single operational synergy is realised.',
'The effect is geometric rather than additive. Each acquisition raises the earnings base, and the re-rating applies to the whole. Repeated with discipline, the platform compounds on both terms at once: growing earnings, and a multiple that expands as scale, diversification, and quality of earnings improve.',
React.createElement('span', null, React.createElement('strong', { style: { fontWeight: 700, fontSize: '1.35em', lineHeight: 1.35, color: 'var(--text-primary)' } }, 'The discipline is in what you decline.')),
],
takeaways: [
'Returns come from the multiple gap, not only the earnings acquired.',
'Re-rating makes growth geometric — each deal lifts the value of the whole.',
],
},
{
cat: 'CAPITAL', dateline: 'Analysis', read: '7 min read', img: 'assets/insight-capital.png',
title: 'Acquiring significant minority stakes and underwriting the whole journey to IPO.',
standfirst: 'A significant minority stake that underwrites the full capital requirement — two years of funding through to listing — removes the one risk founders cannot hedge: the next round.',
body: [
'Most growth capital is delivered in instalments. Each tranche buys eighteen months of runway and returns the company to the market for the next negotiation, usually at the least convenient moment. The financing risk never leaves the cap table.',
'The alternative is to underwrite the whole path at once. We take a significant minority position and commit to the full capital requirement through to the listing — including the IPO itself — so the company raises once and then executes.',
'The effect on negotiating posture is immediate. A business that is fully funded to its listing is never a forced seller of equity. It can time the market rather than be timed by it, and it approaches the IPO from a position of choice.',
'Minority is the deliberate part. We take enough to align our capital with the outcome and to bear the underwriting risk, and not so much that control leaves the founders who built the business. The structure carries the risk; the operators keep the company.',
],
takeaways: [
'Tranche-by-tranche funding leaves financing risk permanently on the cap table.',
'Underwriting the full requirement to IPO lets the company raise once and execute.',
'A significant minority aligns capital with the outcome without taking control.',
],
},
{
cat: 'MARKETS', dateline: 'Playbook', read: '5 min read', img: 'assets/insight-markets.png',
title: 'Finding true value across private and listed markets.',
standfirst: 'A company is rarely worth what either market says in isolation. True value sits between the two — and the work is knowing which market is mispricing the business, and when.',
body: [
'Private and listed markets price the same earnings differently. One rewards control, certainty, and negotiated terms; the other rewards liquidity, comparability, and narrative. Neither is right on its own, and the spread between them is where value is found.',
'We start by establishing what a business is actually worth on its fundamentals — quality of earnings, durability of the customer base, capital intensity — independent of whichever market is currently setting the price.',
'From there the question becomes practical: does this business realise more value negotiated privately, or re-rated publicly? The answer changes with scale, sector sentiment, and timing, and it determines the structure we build around it.',
'Operating across both markets is what makes the judgement credible. We are pricing against live comparables on either side, so the recommendation is grounded in what capital is genuinely paying today — not in a valuation exercise on paper.',
],
takeaways: [
'Private and listed markets price identical earnings on different logic.',
'Establish fundamental worth first — then choose the market that pays for it.',
'Credible judgement requires live comparables on both sides.',
],
},
];
const OFFICES = [
{ city: 'Dubai', role: 'MENA advisory & capital', img: 'assets/city-dubai.png' },
{ city: 'London', role: 'European structuring', img: 'assets/city-london.png' },
{ city: 'Hong Kong', role: 'APAC markets', img: 'assets/city-hongkong.png' },
{ city: 'Mumbai', role: 'India coverage & group headquarters', img: 'assets/city-mumbai.png' },
];
const SECTORS_A = ['Technology', 'Artificial Intelligence', 'Robotics', 'Real Estate', 'Financial Services'];
const SECTORS_B = ['Defence', 'Logistics', 'Energy', 'Public Markets', 'Infrastructure', 'Consumer & Retail'];
function MarqueeRow({ items, dir, dur }) {
const line = [...items, ...items];
return (
: 
{o.city}
))}