<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Minutieus – Sam Tahoori</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,600;12..96,700;12..96,800&family=Golos+Text:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
:root{
--gold:#fcc300;
--gold-lt:#ffd84d;
--gold-dk:#e0ac00;
--green:#006b21;
--green-lt:#008a2a;
--green-dk:#004f18;
--dark:#ffffff;
--dark-2:#f7f7f7;
--dark-3:#efefef;
--dark-4:#e5e5e5;
--text:#1a1a1a;
--muted:#6b6b6b;
--card-w:420px;
--radius:22px;
--btn-r:18px;
}
*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}
html,
body{
min-height:100%;
background:#f0f0f0;
display:flex;
align-items:center;
justify-content:center;
font-family:'Golos Text',sans-serif;
color:var(--text);
padding:24px 16px;
overflow-x:hidden;
position:relative;
}
body::before{
content:'';
position:fixed;
top:-180px;
left:-180px;
width:520px;
height:520px;
background:
radial-gradient(
circle,
rgba(252,195,0,0.12) 0%,
transparent 65%
);
pointer-events:none;
z-index:0;
}
body::after{
content:'';
position:fixed;
bottom:-180px;
right:-180px;
width:520px;
height:520px;
background:
radial-gradient(
circle,
rgba(0,107,33,0.08) 0%,
transparent 65%
);
pointer-events:none;
z-index:0;
}
.rvx-card{
position:relative;
z-index:1;
width:100%;
max-width:var(--card-w);
background:#ffffff;
border:1px solid rgba(0,0,0,0.07);
border-radius:var(--radius);
overflow:hidden;
box-shadow:
0 30px 80px rgba(0,0,0,0.12),
0 10px 30px rgba(0,0,0,0.08),
0 0 0 1px rgba(252,195,0,0.08);
animation:cardIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn{
from{
opacity:0;
transform:translateY(20px) scale(.98);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
.rvx-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:
linear-gradient(
90deg,
var(--green),
var(--gold),
var(--green-lt),
var(--gold),
var(--green)
);
z-index:2;
}
.rvx-header{
padding:38px 34px 22px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
background:
radial-gradient(
ellipse at 50% 0%,
rgba(252,195,0,0.07) 0%,
transparent 68%
);
}
.rvx-chip{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:9px;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--green);
padding:7px 16px;
border-radius:999px;
background:rgba(0,107,33,0.07);
border:1px solid rgba(0,107,33,0.18);
margin-bottom:18px;
animation:fadeUp .5s .1s both;
}
.rvx-logo-wrap{
width:220px;
height:90px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:10px;
animation:fadeUp .55s .15s cubic-bezier(.22,1,.36,1) both;
}
.rvx-logo-wrap img{
max-width:100%;
max-height:100%;
object-fit:contain;
}
.rvx-logo-fallback{
font-family:'Bricolage Grotesque',sans-serif;
font-size:32px;
font-weight:800;
letter-spacing:.1em;
color:var(--text);
display:none;
}
.rvx-logo-fallback em{
color:var(--gold);
font-style:normal;
}
.rvx-sep{
margin:0 32px;
height:1px;
background:
linear-gradient(
90deg,
transparent,
rgba(0,107,33,0.20),
rgba(252,195,0,0.30),
rgba(0,107,33,0.20),
transparent
);
}
.rvx-body{
padding:22px;
display:flex;
flex-direction:column;
gap:10px;
}
.rvx-item{
display:flex;
align-items:center;
gap:14px;
padding:14px 15px;
text-decoration:none;
color:var(--text);
border-radius:18px;
background:rgba(0,0,0,0.02);
border:1px solid rgba(0,0,0,0.06);
position:relative;
transition:
all .28s ease;
animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both;
overflow:hidden;
}
.rvx-item:nth-child(1){animation-delay:.38s;}
.rvx-item:nth-child(2){animation-delay:.44s;}
.rvx-item:nth-child(3){animation-delay:.50s;}
.rvx-item:nth-child(4){animation-delay:.56s;}
.rvx-item::before{
content:'';
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background:var(--green);
transform:scaleY(0);
transition:transform .25s ease;
transform-origin:center;
}
.rvx-item:hover{
background:rgba(0,107,33,0.04);
border-color:rgba(0,107,33,0.18);
transform:translateY(-3px);
box-shadow:
0 10px 25px rgba(0,0,0,0.08);
}
.rvx-item:hover::before{
transform:scaleY(1);
}
.rvx-icon{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(0,107,33,0.07);
border:1px solid rgba(0,107,33,0.15);
color:var(--green);
flex-shrink:0;
transition:all .25s ease;
}
.rvx-item:hover .rvx-icon{
transform:scale(1.05);
background:rgba(0,107,33,0.12);
border-color:rgba(0,107,33,0.30);
}
.rvx-label{
font-size:9px;
font-weight:700;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:4px;
}
.rvx-value{
font-size:14px;
font-weight:500;
color:var(--text);
line-height:1.4;
word-break:break-word;
}
.rvx-save-section{
padding:6px 22px 22px;
animation:fadeUp .55s .64s both;
}
.rvx-save-btn{
width:100%;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:16px 24px;
background:
linear-gradient(
135deg,
#006b21 0%,
#008a2a 50%,
#006b21 100%
);
background-size:200% 200%;
color:#fff;
font-family:'Bricolage Grotesque',sans-serif;
font-size:13px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
border:none;
border-radius:18px;
cursor:pointer;
position:relative;
overflow:hidden;
transition:
transform .25s ease,
box-shadow .25s ease,
background-position .5s ease;
box-shadow:
0 12px 35px rgba(0,107,33,0.22),
0 4px 14px rgba(0,0,0,0.15);
}
.rvx-save-btn:hover{
transform:translateY(-3px);
background-position:100% 100%;
box-shadow:
0 18px 45px rgba(0,107,33,0.30),
0 8px 18px rgba(0,0,0,0.20);
}
.rvx-save-btn::before{
content:'';
position:absolute;
top:0;
left:-120%;
width:70%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.25),
transparent
);
transform:skewX(-20deg);
transition:.7s;
}
.rvx-save-btn:hover::before{
left:140%;
}
.rvx-save-btn svg{
width:18px;
height:18px;
flex-shrink:0;
}
.rvx-btn-arrow{
display:flex;
transition:transform .25s ease;
}
.rvx-save-btn:hover .rvx-btn-arrow{
transform:translateX(4px);
}
.rvx-qr-section{
padding:10px 22px 30px;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
border-top:1px solid rgba(0,0,0,0.06);
background:
radial-gradient(
ellipse at 50% 100%,
rgba(252,195,0,0.06) 0%,
transparent 70%
);
animation:fadeUp .55s .72s both;
}
.rvx-qr-label-top{
font-size:9px;
font-weight:700;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--muted);
padding-top:14px;
}
.rvx-qr-box{
width:118px;
height:118px;
background:#fff;
padding:8px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:
0 12px 28px rgba(0,0,0,0.12),
0 0 0 1px rgba(0,107,33,0.10);
}
#qrcode canvas,
#qrcode img{
width:100px !important;
height:100px !important;
border-radius:8px;
}
.rvx-qr-caption{
font-size:10px;
color:var(--muted);
letter-spacing:.05em;
}
.rvx-footer-tag{
text-align:center;
padding:0 20px 22px;
font-size:9px;
font-weight:700;
letter-spacing:.15em;
text-transform:uppercase;
color:rgba(0,0,0,0.25);
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(12px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.rvx-icon.pulse{
position:relative;
}
.rvx-icon.pulse::after{
content:'';
position:absolute;
inset:-4px;
border-radius:18px;
border:1px solid rgba(0,107,33,0.30);
animation:rvxPulse 2.6s ease-in-out infinite;
}
@keyframes rvxPulse{
0%,100%{
opacity:.7;
transform:scale(1);
}
50%{
opacity:0;
transform:scale(1.2);
}
}
@media(max-width:480px){
:root{
--card-w:100%;
}
.rvx-header{
padding:32px 22px 18px;
}
.rvx-body{
padding:18px;
}
.rvx-save-section{
padding:6px 18px 20px;
}
.rvx-qr-section{
padding:8px 18px 28px;
}
.rvx-footer-tag{
padding:0 18px 20px;
}
.rvx-logo-wrap{
width:180px;
height:72px;
}
}
</style>
</head>
<body>
<div class="rvx-card">
<div class="rvx-header">
<div class="rvx-chip">
Sam Tahoori · Minutieus
</div>
<div class="rvx-logo-wrap">
<img
src="https://www.minutieus.nl/wp-content/uploads/2025/07/cropped-sam-tahoori-black-text-e1752845346281.png"
alt="Minutieus Logo"
onerror="this.style.display='none';this.nextElementSibling.style.display='block';"
>
<div class="rvx-logo-fallback">
MINU<em>TIEUS</em>
</div>
</div>
</div>
<div class="rvx-sep"></div>
<div class="rvx-body">
<a href="tel:+0617275691" class="rvx-item">
<div class="rvx-icon pulse">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"/>
</svg>
</div>
<div>
<div class="rvx-label">Phone</div>
<div class="rvx-value">+06 17 275 691</div>
</div>
</a>
<a href="mailto:info@minutieus.nl" class="rvx-item">
<div class="rvx-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/>
</svg>
</div>
<div>
<div class="rvx-label">Email</div>
<div class="rvx-value">info@minutieus.nl</div>
</div>
</a>
<a href="https://minutieus.nl" target="_blank" rel="noopener" class="rvx-item">
<div class="rvx-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/>
</svg>
</div>
<div>
<div class="rvx-label">Website</div>
<div class="rvx-value">minutieus.nl</div>
</div>
</a>
</div>
<div class="rvx-save-section">
<button class="rvx-save-btn" onclick="downloadVCard()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
</svg>
Save Contact
<span class="rvx-btn-arrow">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="13" height="13">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
</svg>
</span>
</button>
</div>
<div class="rvx-qr-section">
<div class="rvx-qr-label-top">
Scan to open digital card
</div>
<div class="rvx-qr-box">
<div id="qrcode"></div>
</div>
<div class="rvx-qr-caption">
minutieus.nl
</div>
</div>
<div class="rvx-footer-tag">
Minutieus · Sam Tahoori
</div>
</div>
<script>
window.addEventListener('load',function(){
new QRCode(
document.getElementById('qrcode'),
{
text:'https://minutieus.nl',
width:100,
height:100,
colorDark:'#006b21',
colorLight:'#ffffff',
correctLevel:QRCode.CorrectLevel.M
}
);
});
function downloadVCard(){
var vcard=[
'BEGIN:VCARD',
'VERSION:3.0',
'FN:Sam Tahoori',
'N:Tahoori;Sam;;;',
'ORG:Minutieus',
'TEL;TYPE=CELL,VOICE:+0617275691',
'EMAIL;TYPE=WORK:info@minutieus.nl',
'URL:https://minutieus.nl',
'END:VCARD'
].join('\r\n');
var blob=new Blob(
[vcard],
{
type:'text/vcard;charset=utf-8'
}
);
var url=URL.createObjectURL(blob);
var a=document.createElement('a');
a.href=url;
a.download='Sam-Tahoori-Minutieus.vcf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
</body>
</html>