Files
SAM-AG/index.html
T
arsam fd3d229882 Import source: index
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:13:30 +03:30

623 lines
40 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SAM Agency — Professional web design, support &amp; speed</title>
<meta name="description" content="SAM Agency blends creativity with technology to build professional, user-friendly websites — with end-to-end design, dedicated support, and speed optimization." />
<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=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2339443A'/%3E%3Cpath d='M12 20c0-4.5 0-8 4.5-11.5C15.5 13 15.5 16 12 20Z' fill='%23C6D0B9'/%3E%3Cpath d='M12 20c-4.5-4.5-7-7-7-12.5C9.5 8 12 11 12 20Z' fill='%238FA081'/%3E%3C/svg%3E" />
<style>
:root{
--bg:#F2EEE5;
--bg-2:#EBE5D8;
--panel:#FBF9F3;
--ink:#1F211B;
--ink-soft:#43463C;
--muted:#76796C;
--forest:#39443A;
--forest-700:#2C352D;
--sage:#69785F;
--sage-300:#AEBCA1;
--sage-200:#C6D0B9;
--line:#DED7C7;
--line-soft:#E7E1D3;
--radius:18px;
--radius-lg:26px;
--shadow-sm:0 1px 2px rgba(40,44,33,.05), 0 6px 18px rgba(40,44,33,.04);
--shadow-md:0 18px 50px -20px rgba(40,46,33,.30);
--shadow-lg:0 40px 90px -40px rgba(34,40,28,.45);
--display:"Fraunces", Georgia, serif;
--body:"Hanken Grotesk", -apple-system, system-ui, sans-serif;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.55;overflow-x:hidden;position:relative}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,92vw);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:380;line-height:1.04;letter-spacing:-.018em;color:var(--ink)}
.it{font-style:italic;font-weight:340;color:var(--sage)}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--sage);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--sage-300)}
.btn{display:inline-flex;align-items:center;gap:.55rem;border:none;cursor:pointer;font-family:var(--body);font-weight:600;font-size:.94rem;padding:.9rem 1.55rem;border-radius:100px;transition:.4s var(--ease)}
.btn-dark{background:var(--forest);color:#F4F2E9}
.btn-dark:hover{background:var(--forest-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:#fff;border-color:var(--sage-300);transform:translateY(-2px)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translate(3px,-3px)}
/* NAV */
header.nav{position:sticky;top:0;z-index:100;backdrop-filter:saturate(140%) blur(10px);background:rgba(242,238,229,.72);border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
header.nav.scrolled{border-bottom-color:var(--line);background:rgba(242,238,229,.9)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:1.05rem 0;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:600;letter-spacing:.06em;font-size:.95rem;text-transform:uppercase}
.brand .mark{width:30px;height:30px;border-radius:50%;background:var(--forest);display:grid;place-items:center;flex:0 0 auto}
.brand .mark svg{width:16px;height:16px}
.nav-links{display:flex;gap:1.7rem;align-items:center}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--ink-soft);position:relative;transition:color .3s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--sage);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:1rem}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s}
.mobile-menu{display:none;flex-direction:column;gap:.2rem;padding:.4rem 0 1.2rem}
.mobile-menu a{padding:.7rem 0;border-bottom:1px solid var(--line-soft);font-weight:500}
.mobile-menu.open{display:flex}
/* HERO */
.hero{position:relative;padding:4.2rem 0 5rem}
.hero-grid{display:grid;grid-template-columns:1.02fr 1.1fr;gap:3.5rem;align-items:center}
.hero h1{font-size:clamp(3rem,7vw,5.8rem);margin:1.5rem 0 1.5rem}
.hero p.lead{font-size:1.12rem;color:var(--ink-soft);max-width:38ch;margin-bottom:2.1rem}
.hero-actions{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.hero-meta{display:flex;gap:2.2rem;margin-top:2.6rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.hero-meta .num{font-family:var(--display);font-size:1.85rem;color:var(--ink)}
.hero-meta .lbl{font-size:.78rem;color:var(--muted);letter-spacing:.03em}
.hero-visual{position:relative;min-height:440px;display:grid;place-items:center}
.blob{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sage-200),var(--sage-300));right:-30px;top:-10px;z-index:0}
.browser{position:relative;z-index:2;width:100%;max-width:520px;border-radius:16px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6);transform:rotate(.4deg)}
.browser .bar{display:flex;align-items:center;gap:.45rem;padding:.7rem .9rem;background:#EFEBE2;border-bottom:1px solid var(--line-soft)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#CFC8B8;display:block}
.browser .bar .url{margin-left:.7rem;font-size:.72rem;color:var(--muted);background:#fff;padding:.22rem .7rem;border-radius:6px;border:1px solid var(--line-soft)}
.float-card{position:absolute;z-index:3;background:var(--panel);border-radius:14px;padding:.95rem 1.15rem;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.7)}
.fc-stat{right:-18px;bottom:42px}
.fc-stat .t{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fc-stat .v{font-family:var(--display);font-size:1.55rem;color:var(--forest);line-height:1.1;margin-top:.15rem}
.fc-stat .v span{color:var(--sage);font-size:.9rem}
.fc-rate{left:-26px;top:30px;display:flex;align-items:center;gap:.7rem}
.fc-rate .dot{width:34px;height:34px;border-radius:9px;background:var(--sage-200);display:grid;place-items:center;color:var(--forest);font-family:var(--display);font-size:1.05rem}
.fc-rate .t{font-size:.7rem;color:var(--muted)}
.fc-rate .v{font-weight:600;font-size:.95rem}
/* MARQUEE */
.trust{border-block:1px solid var(--line);padding:1.4rem 0;overflow:hidden;background:var(--bg-2)}
.trust .lead-lbl{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:.9rem}
.trust-track{display:flex;gap:4rem;align-items:center;width:max-content;animation:slide 26s linear infinite;opacity:.65}
.trust-track span{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--ink-soft);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
/* SECTIONS */
section{padding:6rem 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
.sec-head h2{font-size:clamp(2rem,4vw,3.2rem)}
.sec-head p{color:var(--muted);max-width:36ch}
/* FEATURE / SERVICE CARDS */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.8rem;transition:.45s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--sage-300)}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--sage-200);display:grid;place-items:center;color:var(--forest);margin-bottom:1.1rem}
.card .ic svg{width:23px;height:23px}
.card h3{font-size:1.22rem;font-weight:400;margin-bottom:.5rem}
.card p{font-size:.92rem;color:var(--muted)}
/* PORTFOLIO */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.work{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--panel);border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);transition:.5s var(--ease)}
.work:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.work .thumb{overflow:hidden;aspect-ratio:16/10}
.work .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.work:hover .thumb img{transform:scale(1.05)}
.work .meta{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem}
.work .meta h3{font-size:1.3rem;font-weight:400}
.work .meta .tag{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600}
.work .meta .go{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.4s var(--ease);flex:0 0 auto}
.work:hover .meta .go{background:var(--forest);border-color:var(--forest);color:#fff}
/* SPLIT: PRICING + PROCESS */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.price-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.8rem;margin-bottom:1.2rem;transition:.45s var(--ease);position:relative}
.price-card.feature{background:var(--forest);color:#EAE7DC;border-color:var(--forest)}
.price-card.feature h3,.price-card.feature .amt{color:#F4F2E9}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.price-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;gap:1rem}
.price-card h3{font-size:1.4rem;font-weight:400}
.price-card .sub{font-size:.9rem;color:var(--muted)}
.price-card.feature .sub{color:#B9C0AC}
.price-card .amt{font-family:var(--display);font-size:1.7rem;white-space:nowrap}
.price-card .badge{position:absolute;top:1.4rem;right:1.4rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;background:var(--sage-200);color:var(--forest-700);padding:.3rem .7rem;border-radius:100px;font-weight:600}
.feat{list-style:none;margin:1.2rem 0 1.4rem;display:grid;gap:.6rem}
.feat li{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;color:var(--ink-soft)}
.price-card.feature .feat li{color:#D7DACC}
.feat li svg{width:16px;height:16px;flex:0 0 auto;color:var(--sage);margin-top:3px}
.price-card.feature .feat li svg{color:var(--sage-200)}
.price-card .note{font-size:.78rem;color:var(--muted);margin-bottom:1rem;font-style:italic}
.price-card.feature .note{color:#A9B19C}
.price-card .btn{width:100%;justify-content:center}
.price-card.feature .btn-dark{background:#EAE7DC;color:var(--forest-700)}
.price-card.feature .btn-dark:hover{background:#fff}
.steps{display:grid;gap:1.4rem}
.step{display:flex;gap:1.3rem;padding:1.5rem;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line-soft);transition:.4s var(--ease)}
.step:hover{transform:translateX(6px);border-color:var(--sage-300)}
.step .no{font-family:var(--display);font-style:italic;font-size:1.6rem;color:var(--sage);flex:0 0 auto;width:2.4rem}
.step h3{font-size:1.25rem;font-weight:400;margin-bottom:.3rem}
.step p{font-size:.92rem;color:var(--muted)}
/* PLUGIN BAND */
.plugin{background:var(--bg-2)}
.plugin-box{display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center}
.plugin-box h2{font-size:clamp(2rem,3.8vw,3rem);margin:1rem 0 .8rem}
.plugin-box .ph{font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--sage);margin-bottom:1rem}
.plugin-box p{color:var(--ink-soft);max-width:46ch}
.plugin-visual{position:relative;display:grid;place-items:center;min-height:300px}
.plugin-visual .pblob{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sage-200),var(--sage-300));z-index:0}
.read-card{position:relative;z-index:2;background:var(--panel);border-radius:18px;padding:1.6rem 1.8rem;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6);width:min(330px,80%)}
.read-card .row{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.read-card .clock{width:42px;height:42px;border-radius:11px;background:var(--sage-200);display:grid;place-items:center;color:var(--forest)}
.read-card .est{font-family:var(--display);font-size:1.3rem}
.read-card .est small{font-family:var(--body);font-size:.8rem;color:var(--muted)}
.read-bar{height:6px;border-radius:6px;background:var(--line-soft);overflow:hidden;margin-bottom:.5rem}
.read-bar i{display:block;height:100%;width:62%;background:var(--sage);border-radius:6px}
.read-card .meta2{font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between}
.tagrow{display:flex;gap:.5rem;margin-top:1.6rem;flex-wrap:wrap}
.tagrow span{font-size:.74rem;border:1px solid var(--line);padding:.3rem .8rem;border-radius:100px;color:var(--ink-soft)}
/* CONTACT / CTA */
.cta-sec{padding-bottom:6rem}
.cta-box{background:var(--forest);color:#EDEAE0;border-radius:var(--radius-lg);padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center;position:relative;overflow:hidden}
.cta-box::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(174,188,161,.28),transparent 70%);right:-80px;top:-120px}
.cta-box .eyebrow{color:var(--sage-200)}
.cta-box h2{color:#F5F3EA;font-size:clamp(1.9rem,3.4vw,2.8rem);margin:1.1rem 0 1rem}
.cta-box h2 .it{color:var(--sage-200)}
.cta-box .csub{color:#C9CDBE;max-width:40ch;margin-bottom:1.8rem;font-size:1rem}
.agent{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.agent img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
.agent .n{font-weight:600;color:#F5F3EA}.agent .r{font-size:.84rem;color:#B9C0AC}
.contact-list{display:grid;gap:.45rem;font-size:.92rem;color:#C9CDBE}
.contact-list a:hover{color:#fff}
form.lead-form{display:grid;gap:.85rem;position:relative;z-index:2}
form.lead-form input,form.lead-form textarea{width:100%;font-family:var(--body);font-size:.95rem;padding:.9rem 1.1rem;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#F2EFE6;transition:.3s}
form.lead-form input::placeholder,form.lead-form textarea::placeholder{color:#9AA08F}
form.lead-form input:focus,form.lead-form textarea:focus{outline:none;border-color:var(--sage-200);background:rgba(255,255,255,.1)}
form.lead-form textarea{resize:vertical;min-height:84px}
form.lead-form .btn{justify-content:center;margin-top:.3rem}
form.lead-form .btn-dark{background:#EAE7DC;color:var(--forest-700)}
form.lead-form .btn-dark:hover{background:#fff}
/* SPONSOR BAND */
.sponsor{padding:5rem 0;border-top:1px solid var(--line)}
.sponsor-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
.sponsor h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.sponsor .wp{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:1rem}
.sponsor p{color:var(--ink-soft);margin-bottom:1rem;max-width:60ch}
.sponsor .pill{display:inline-block;margin-top:.6rem;background:var(--sage-200);color:var(--forest-700);font-weight:600;font-size:.86rem;padding:.55rem 1.1rem;border-radius:100px}
/* FOOTER */
footer.site{background:var(--forest-700);color:#CFD3C5;padding:4rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
footer.site h4{font-family:var(--body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-200);margin-bottom:1.1rem;font-weight:600}
footer.site .brand{color:#F2EFE6;margin-bottom:1rem}
footer.site .fdesc{font-size:.9rem;color:#A9B19C;max-width:32ch}
footer.site ul{list-style:none;display:grid;gap:.6rem}
footer.site ul a,footer.site ul li{font-size:.9rem;color:#C2C7B7;transition:color .3s}
footer.site ul a:hover{color:#fff}
footer.site ul li b{color:#E7E9DD;font-weight:600}
.partners{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.2rem}
.partners span{font-size:.82rem;border:1px solid rgba(255,255,255,.14);padding:.4rem .8rem;border-radius:10px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.6rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.foot-bottom .wpb{font-family:var(--display);font-style:italic;color:var(--sage-200)}
.foot-bottom .copy{font-size:.82rem;color:#8E948166;color:#8E9481}
/* REVEAL */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.trust-track{animation:none}}
/* RESPONSIVE */
@media(max-width:1000px){.cards-4{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
.nav-links,.nav-cta .btn{display:none}.burger{display:flex}
.hero-grid,.split,.cta-box,.work-grid,.plugin-box,.sponsor-in{grid-template-columns:1fr}
.cards-3{grid-template-columns:1fr}
.hero-visual{order:-1;min-height:380px;margin-bottom:1rem}
.blob{width:340px;height:340px;right:0}
.plugin-visual{order:-1}
}
@media(max-width:560px){
.hero-meta{gap:1.2rem;flex-wrap:wrap}.float-card{display:none}
.cards-4{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}
section{padding:4rem 0}
}
</style>
</head>
<body>
<!-- ============ NAV ============ -->
<header class="nav" id="nav">
<div class="wrap nav-in">
<a class="brand" href="#">
<span class="mark"><svg viewBox="0 0 24 24" fill="none"><path d="M12 21c0-5 0-9 5-13-1 6-1 9-5 13Z" fill="#C6D0B9"/><path d="M12 21C7 16 4 13 4 7c5 1 8 4 8 14Z" fill="#8FA081"/></svg></span>
SAM Agency
</a>
<nav class="nav-links">
<a href="#services">Web Design</a>
<a href="#pricing">Support</a>
<a href="#blog">Blog</a>
<a href="#plugin">Plugins</a>
<a href="#work">Projects</a>
<a href="#about">About</a>
</nav>
<div class="nav-cta">
<a class="btn btn-dark" href="#contact">Quick consultation</a>
<button class="burger" id="burger" aria-label="Menu"><span></span><span></span><span></span></button>
</div>
</div>
<div class="wrap mobile-menu" id="mobileMenu">
<a href="#services">Web Design</a><a href="#pricing">Support</a><a href="#blog">Blog</a>
<a href="#plugin">Plugins</a><a href="#work">Projects</a><a href="#about">About</a>
<a href="#contact">Quick consultation</a>
</div>
</header>
<!-- ============ HERO ============ -->
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy">
<span class="eyebrow reveal">SAM Web Design Agency</span>
<h1 class="reveal" data-d="1">Think <span class="it">big.</span></h1>
<p class="lead reveal" data-d="2">At SAM Agency we blend creativity with technology to build you a professional, user-friendly, and lasting website. Our goal goes beyond a website — we help you get seen, build trust, and multiply your revenue.</p>
<div class="hero-actions reveal" data-d="3">
<a class="btn btn-dark" href="#contact">Quick consultation <span class="arr">↗</span></a>
<a class="btn btn-ghost" href="#work">View our work</a>
</div>
<div class="hero-meta reveal" data-d="4">
<div><div class="num">3 mo</div><div class="lbl">Free support included</div></div>
<div><div class="num">0→100</div><div class="lbl">Full custom builds</div></div>
<div><div class="num">A+</div><div class="lbl">PageSpeed optimized</div></div>
</div>
</div>
<div class="hero-visual reveal" data-d="2">
<div class="blob"></div>
<div class="browser">
<div class="bar"><i></i><i></i><i></i><span class="url">samwda.ir</span></div>
<img src="8c8b4ef1-45a0-4486-a3dd-ef8e212207c8.png" alt="A website built by SAM Agency" />
</div>
<div class="float-card fc-stat"><div class="t">Conversion rate</div><div class="v">+124% <span>▲</span></div></div>
<div class="float-card fc-rate"><div class="dot">A+</div><div><div class="t">Page speed</div><div class="v">98 / 100</div></div></div>
</div>
</div>
</section>
<!-- ============ TRUST / PARTNERS MARQUEE ============ -->
<div class="trust" aria-hidden="true">
<div class="lead-lbl">Trusted partners &amp; the tools we build on</div>
<div class="trust-track">
<span>Mihan WordPress</span><span>·</span><span>Mizban Fa</span><span>·</span><span>Sep</span><span>·</span><span>WordPress</span><span>·</span><span>Elementor</span><span>·</span><span>Limoo Host</span><span>·</span>
<span>Mihan WordPress</span><span>·</span><span>Mizban Fa</span><span>·</span><span>Sep</span><span>·</span><span>WordPress</span><span>·</span><span>Elementor</span><span>·</span><span>Limoo Host</span><span>·</span>
</div>
</div>
<!-- ============ WHY SAM ============ -->
<section id="about">
<div class="wrap">
<div class="sec-head">
<div class="reveal">
<span class="eyebrow">Why SAM Agency?</span>
<h2 style="margin-top:1rem">Your site is your<br><span class="it">storefront.</span></h2>
</div>
<p class="reveal" data-d="1">Your website is your virtual office and the showcase of your products and services. Keep your business always available and active with a site that never sleeps.</p>
</div>
<div class="cards-3">
<div class="card reveal">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
<h3>Affordable pricing</h3>
<p>Become the owner of a professional website at a fair price — with highly flexible plans that bend to your needs.</p>
</div>
<div class="card reveal" data-d="1">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg></div>
<h3>3 months free support</h3>
<p>For up to 3 months after delivery, we stand by you to fix security and technical issues — completely free of charge.</p>
</div>
<div class="card reveal" data-d="2">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2 7l10-4 10 4-10 4Z"/><path d="M6 10v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5"/></svg></div>
<h3>Complete site training</h3>
<p>With our full tutorials you take control of your own website — manage it confidently and grow your revenue.</p>
</div>
</div>
</div>
</section>
<!-- ============ SERVICES ============ -->
<section id="services" style="background:var(--bg-2)">
<div class="wrap">
<div class="sec-head">
<div class="reveal"><span class="eyebrow">What we do</span>
<h2 style="margin-top:1rem">Our <span class="it">services.</span></h2></div>
<p class="reveal" data-d="1">From a brand-new build to ongoing care and performance, everything your website needs under one roof.</p>
</div>
<div class="cards-4">
<div class="card reveal">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 9h18M7 14h6"/></svg></div>
<h3>Web design</h3>
<p>End-to-end design of a complete website — ready-made or fully custom — delivered with complete training.</p>
</div>
<div class="card reveal" data-d="1">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2a10 10 0 1 0 10 10"/><path d="M12 6v6l4 2"/></svg></div>
<h3>Site support</h3>
<p>Page design, fixing security and technical issues, regular backups, and everything in between.</p>
</div>
<div class="card reveal" data-d="2">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2Z"/></svg></div>
<h3>Technical services</h3>
<p>Hardening site security, resolving errors, and principled, careful site migration done right.</p>
</div>
<div class="card reveal" data-d="3">
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg></div>
<h3>Speed services</h3>
<p>Lazy-loading technology, smarter caching, and a measurably better PageSpeed score on every page.</p>
</div>
</div>
</div>
</section>
<!-- ============ WORK / PROJECTS ============ -->
<section id="work">
<div class="wrap">
<div class="sec-head">
<div class="reveal"><span class="eyebrow">Selected work</span>
<h2 style="margin-top:1rem">Recent projects<br>that <span class="it">perform.</span></h2></div>
<p class="reveal" data-d="1">Real builds for real businesses — designed to convert, built to load fast, and shipped ready to launch.</p>
</div>
<div class="work-grid">
<article class="work reveal">
<div class="thumb"><img src="8c8b4ef1-45a0-4486-a3dd-ef8e212207c8.png" alt="Wellnest skincare website"></div>
<div class="meta"><div><div class="tag">Skincare · E-commerce</div><h3>Wellnest</h3></div><span class="go">↗</span></div>
</article>
<article class="work reveal" data-d="1">
<div class="thumb"><img src="51aa5f34-60d4-431b-bb38-b716367a3a94.png" alt="Brix SaaS website"></div>
<div class="meta"><div><div class="tag">SaaS · Product</div><h3>Brix</h3></div><span class="go">↗</span></div>
</article>
<article class="work reveal" data-d="2">
<div class="thumb"><img src="870a3fcf-8bee-41bd-97ae-172702628cfa.png" alt="Aurora design studio website"></div>
<div class="meta"><div><div class="tag">Studio · Portfolio</div><h3>Aurora</h3></div><span class="go">↗</span></div>
</article>
<article class="work reveal" data-d="3">
<div class="thumb"><img src="8e06de26-7e7b-4d58-805a-666f72083537.png" alt="Neocora digital banking website"></div>
<div class="meta"><div><div class="tag">Fintech · Banking</div><h3>Neocora</h3></div><span class="go">↗</span></div>
</article>
</div>
</div>
</section>
<!-- ============ PRICING + PROCESS ============ -->
<section id="pricing" style="background:var(--bg-2)">
<div class="wrap split">
<div>
<div class="reveal"><span class="eyebrow">Plans &amp; support</span>
<h2 style="margin:1rem 0 2rem">Two ways<br>to <span class="it">work with us.</span></h2></div>
<div class="price-card reveal" data-d="1">
<div class="price-top">
<div><h3>Website design</h3><div class="sub">Ready-made or fully custom</div></div>
<div class="amt">Get a quote</div>
</div>
<ul class="feat">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg> Zero-to-launch full website build</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg> Complete training to run it yourself</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg> SEO-ready, responsive &amp; fast</li>
</ul>
<a class="btn btn-ghost" href="#contact">Request a quote</a>
</div>
<div class="price-card feature reveal" data-d="2">
<span class="badge">Most popular</span>
<div class="price-top">
<div><h3>Dedicated support</h3><div class="sub">Professional plan</div></div>
<div class="amt">Contact us</div>
</div>
<ul class="feat">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg> Suitable for all websites</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg> Updates across multiple cycles</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg> Speed boost (per page) &amp; full security</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6 9 17l-5-5"/></svg> Theme &amp; plugin fixes + better hosting migration</li>
</ul>
<div class="note">— Pay annually and get 2 months of support free —</div>
<a class="btn btn-dark" href="#contact">Free consultation &amp; order <span class="arr">↗</span></a>
</div>
</div>
<div>
<div class="reveal"><span class="eyebrow">How it works</span>
<h2 style="margin:1rem 0 2rem">From idea to live,<br>in just <span class="it">3 steps.</span></h2></div>
<div class="steps">
<div class="step reveal" data-d="1"><div class="no">01</div><div><h3>Consultation</h3><p>A quick call to understand your goals, your audience, and what your business really needs.</p></div></div>
<div class="step reveal" data-d="2"><div class="no">02</div><div><h3>Design &amp; build</h3><p>We design, develop, and optimize your website — sharing previews with you as we go.</p></div></div>
<div class="step reveal" data-d="3"><div class="no">03</div><div><h3>Launch &amp; support</h3><p>We deploy, train you to manage it, and stay by your side for 3 months — free.</p></div></div>
</div>
</div>
</div>
</section>
<!-- ============ BLOG ============ -->
<section id="blog">
<div class="wrap">
<div class="sec-head">
<div class="reveal"><span class="eyebrow">From the blog</span>
<h2 style="margin-top:1rem">Notes &amp; <span class="it">guides.</span></h2></div>
<p class="reveal" data-d="1">Writing about WordPress, security, branding, and the open web — straight from the SAM workshop.</p>
</div>
<div class="cards-4">
<article class="card reveal">
<div class="tag" style="font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:.7rem">SAM News · Security · WordPress</div>
<h3 style="margin-bottom:.6rem">Let's build a culture: no to nulled themes &amp; plugins</h3>
<p>The world of WordPress is full of colorful choices for web design. For anyone who wants a website that lasts…</p>
<a href="#blog" class="eyebrow" style="margin-top:1rem;color:var(--ink)">Start reading →</a>
</article>
<article class="card reveal" data-d="1">
<div class="tag" style="font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:.7rem">Digital Marketing</div>
<h3 style="margin-bottom:.6rem">Unblocking YouTube &amp; its effect on Persian YouTube: chance or threat?</h3>
<p>For years, one of the most debated topics in the digital space has been YouTube access and its effect on the economy…</p>
<a href="#blog" class="eyebrow" style="margin-top:1rem;color:var(--ink)">Start reading →</a>
</article>
<article class="card reveal" data-d="2">
<div class="tag" style="font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:.7rem">WordPress</div>
<h3 style="margin-bottom:.6rem">A complete guide to contributing to the WordPress open-source project (2025)</h3>
<p>WordPress is more than a CMS — it's a leading example of the open-source software world, powering over…</p>
<a href="#blog" class="eyebrow" style="margin-top:1rem;color:var(--ink)">Start reading →</a>
</article>
<article class="card reveal" data-d="3">
<div class="tag" style="font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:.7rem">Branding · Marketing · Web Design</div>
<h3 style="margin-bottom:.6rem">Why should we even have a website?</h3>
<p>Today the internet is an inseparable part of daily life. Most people use it to find information, buy products, and…</p>
<a href="#blog" class="eyebrow" style="margin-top:1rem;color:var(--ink)">Start reading →</a>
</article>
</div>
</div>
</section>
<!-- ============ PLUGIN BAND ============ -->
<section id="plugin" class="plugin">
<div class="wrap plugin-box">
<div class="reveal">
<span class="eyebrow">From our workshop</span>
<h2>SAM Reading Time <span class="it">plugin.</span></h2>
<div class="ph">A delightful experience for readers — without slowing your site down.</div>
<p>Showing reading time is a way of respecting your audience's time. SAM Reading Time — a lightweight, smart product from SAM Agency — tells readers exactly how far they are from the end of an article. Built with full multilingual and Schema support.</p>
<div class="tagrow"><span>Lightweight</span><span>Multilingual</span><span>Schema-ready</span><span>Open source</span></div>
</div>
<div class="plugin-visual reveal" data-d="1">
<div class="pblob"></div>
<div class="read-card">
<div class="row">
<div class="clock"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div>
<div class="est">5 min <small>read</small></div>
</div>
<div class="read-bar"><i></i></div>
<div class="meta2"><span>62% complete</span><span>~2 min left</span></div>
</div>
</div>
</div>
</section>
<!-- ============ CONTACT / CTA ============ -->
<section class="cta-sec" id="contact">
<div class="wrap">
<div class="cta-box reveal">
<div>
<span class="eyebrow">Let's talk</span>
<h2>Want us to review<br>your <span class="it">website?</span></h2>
<p class="csub">Should we check your site's health, identify your business needs, or find what's holding back your growth? Relax — we're online most of the time. Drop us a message and we'll solve it together.</p>
<div class="agent">
<!-- placeholder headshot: no source photo provided -->
<img src="https://placehold.co/120x120/AEBCA1/39443A?text=AM" alt="Founder of SAM Agency">
<div><div class="n">Seyyed Ahmadreza Mahjoob</div><div class="r">Founder, SAM Agency</div></div>
</div>
<div class="contact-list">
<a href="mailto:contact@samwda.ir">contact@samwda.ir</a>
<a href="tel:09999079112">0999 907 9112</a>
<a href="https://t.me/samwda" target="_blank" rel="noopener">Telegram · @samwda</a>
</div>
</div>
<form class="lead-form" onsubmit="event.preventDefault();this.reset();alert('Thanks — we will get back to you shortly.');">
<input type="text" placeholder="Your name" required>
<input type="tel" placeholder="Your phone number" required>
<input type="text" placeholder="Your website (optional)">
<textarea placeholder="Tell us about your project…"></textarea>
<button class="btn btn-dark" type="submit">Send <span class="arr">↗</span></button>
</form>
</div>
</div>
</section>
<!-- ============ SPONSOR BAND ============ -->
<div class="sponsor">
<div class="wrap sponsor-in">
<div class="reveal">
<span class="wp"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-8.4 10c0-1.2.26-2.34.72-3.37l3.96 10.86A8.41 8.41 0 0 1 3.6 12Zm8.4 8.4c-.82 0-1.62-.12-2.37-.34l2.52-7.32 2.58 7.07.06.12c-.86.31-1.8.47-2.79.47Zm1.16-12.35c.5-.03.96-.08.96-.08.45-.05.4-.72-.05-.69 0 0-1.36.1-2.23.1-.82 0-2.2-.1-2.2-.1-.46-.03-.51.66-.06.69 0 0 .43.05.89.08l1.32 3.62-1.86 5.57-3.09-9.19c.5-.03.96-.08.96-.08.45-.05.4-.72-.06-.69 0 0-1.35.1-2.22.1l-.43-.01A8.4 8.4 0 0 1 12 3.6c2.2 0 4.2.84 5.7 2.22l-.11-.01c-.83 0-1.42.72-1.42 1.5 0 .7.4 1.28.83 1.98.32.56.7 1.28.7 2.32 0 .72-.27 1.55-.64 2.72l-.83 2.79-3.02-8.97Zm6.07-.36a8.4 8.4 0 0 1-1.42 9.65l2.57-7.43c.48-1.2.64-2.16.64-3.01 0-.31-.02-.6-.06-.87l.27 1.66Z"/></svg> Independent WordPress sponsor</span>
<h2>An international<br>WordPress <span class="it">sponsor.</span></h2>
<span class="pill">Proudly sponsoring WordPress!</span>
</div>
<div class="reveal" data-d="1">
<p>Some spend all their energy repeating the word “WordPress” on landing pages and reselling other people's work — without spending a single minute on WordPress itself.</p>
<p>We're different: we build, we translate, we support, and we put our time where it actually matters.</p>
<p>Our name is proudly registered alongside Google, Elementor, and other major WordPress sponsors. We believe WordPress isn't a slogan — it's a commitment.</p>
</div>
</div>
</div>
<!-- ============ FOOTER ============ -->
<footer class="site">
<div class="wrap">
<div class="foot-grid">
<div>
<a class="brand" href="#"><span class="mark"><svg viewBox="0 0 24 24" fill="none"><path d="M12 21c0-5 0-9 5-13-1 6-1 9-5 13Z" fill="#C6D0B9"/><path d="M12 21C7 16 4 13 4 7c5 1 8 4 8 14Z" fill="#8FA081"/></svg></span> SAM Agency</a>
<p class="fdesc">Professional, user-friendly, and lasting websites — designed, supported, and made fast.</p>
</div>
<div>
<h4>Important links</h4>
<ul>
<li><a href="#about">About us</a></li>
<li><a href="#contact">Contact us</a></li>
<li><a href="#blog">SAM Blog</a></li>
<li><a href="#plugin">SAM Plugins</a></li>
<li><a href="#">Certificate verification</a></li>
<li><a href="#">License API</a></li>
</ul>
</div>
<div>
<h4>Get in touch</h4>
<ul>
<li>Email: <b>contact@samwda.ir</b></li>
<li>Phone: <b>0999 907 9112</b></li>
<li>GitHub: <b>samwda</b></li>
<li>X: <b>@samwdair</b></li>
<li>Telegram: <b>@samwda</b></li>
</ul>
</div>
<div>
<h4>Our partners</h4>
<div class="partners"><span>Mihan WordPress</span><span>Mizban Fa</span><span>Sep</span><span>Limoo Host</span></div>
</div>
</div>
<div class="foot-bottom">
<span class="wpb">Proudly sponsoring WordPress!</span>
<span class="copy">© 2022–2026 Seyyed Ahmadreza Mahjoob. All Rights Reserved.</span>
</div>
</div>
</footer>
<script>
const nav=document.getElementById('nav');
addEventListener('scroll',()=>nav.classList.toggle('scrolled',scrollY>10));
const burger=document.getElementById('burger'),menu=document.getElementById('mobileMenu');
burger.addEventListener('click',()=>menu.classList.toggle('open'));
menu.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>menu.classList.remove('open')));
const io=new IntersectionObserver((es)=>{es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:.12,rootMargin:'0px 0px -40px 0px'});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
</script>
</body>
</html>