← back to Rentv Tour
videos/site-tour/index.html
543 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>RENTV — Full Site Walkthrough</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
body { margin:0; background:#070b10; font-family: system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; }
#root { position:relative; width:1920px; height:1080px; overflow:hidden; }
.clip { position:absolute; inset:0; }
#bg { background:radial-gradient(120% 120% at 50% 0%,#0d1725 0%,#070b10 60%); }
.shot { overflow:hidden; }
.shot-img { width:100%; height:100%; object-fit:cover; object-position:top center; will-change:transform,opacity; display:block; }
.card { display:grid; place-items:center; }
.card-inner { text-align:center; padding:0 120px; }
.card-tag { font-size:22px; letter-spacing:.42em; font-weight:600; margin-bottom:22px; }
.card h1 { margin:0; color:#f3f7fc; font-size:104px; font-weight:500; letter-spacing:-.01em; line-height:1.02; }
.card p { margin:22px 0 0; color:#8ea3b8; font-size:30px; font-weight:300; letter-spacing:.01em; }
.label { left:56px; bottom:56px; right:auto; top:auto; width:auto; height:auto; }
.lbl-inner { display:flex; align-items:center; gap:16px; }
.label .lbl-num { color:#fff; font-size:20px; font-weight:600; letter-spacing:.05em; padding:9px 14px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.label .lbl-txt { color:#fff; font-size:30px; font-weight:500; letter-spacing:.005em;
background:rgba(9,15,24,.9); padding:9px 20px; border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,.35); }
.corner-tag { display:flex; align-items:center; gap:11px; right:56px; top:50px; left:auto; bottom:auto;
width:auto; height:auto; color:#cdd9e6; font-size:19px; font-weight:600; letter-spacing:.14em;
background:rgba(9,15,24,.6); padding:9px 17px; border-radius:999px; }
.corner-tag .dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="59.42" data-fps="30">
<div id="bg" class="clip" data-start="0" data-duration="59.42" data-track-index="0"></div>
<audio id="vo" src="assets/rentv-vo-3act.m4a" data-start="0" data-volume="1"></audio>
<section id="title" class="clip card" data-start="0" data-duration="2.5" data-track-index="1">
<div class="card-inner">
<div class="card-tag" id="title-tag" style="color:#34d399">RENTV.COM</div>
<h1 id="title-title">Full Site Walkthrough</h1>
<p id="title-sub">Growth · Front End · Admin Backend</p>
</div>
</section>
<section id="growth-act" class="clip card" data-start="2.5" data-duration="1.5" data-track-index="1">
<div class="card-inner">
<div class="card-tag" id="growth-act-tag" style="color:#34d399">ACT I</div>
<h1 id="growth-act-title">The Growth Play</h1>
<p id="growth-act-sub">The strategy — build the owned audience</p>
</div>
</section>
<div id="g0" class="clip shot" data-start="4" data-duration="2.5828345" data-track-index="2">
<img id="g0-img" class="shot-img" src="assets/growth/00-growth.png" alt="Growth Strategy">
</div>
<div id="g0-lbl" class="clip label" data-start="4" data-duration="2.5828345" data-track-index="3">
<div class="lbl-inner" id="g0-lbl-in">
<span class="lbl-num" style="background:#10b981">01 / 6</span>
<span class="lbl-txt">Growth Strategy</span>
</div>
</div>
<div id="g1" class="clip shot" data-start="6.582834500000001" data-duration="2.5828345" data-track-index="2">
<img id="g1-img" class="shot-img" src="assets/growth/01-growth.png" alt="The Opportunity">
</div>
<div id="g1-lbl" class="clip label" data-start="6.582834500000001" data-duration="2.5828345" data-track-index="3">
<div class="lbl-inner" id="g1-lbl-in">
<span class="lbl-num" style="background:#10b981">02 / 6</span>
<span class="lbl-txt">The Opportunity</span>
</div>
</div>
<div id="g2" class="clip shot" data-start="9.165669000000001" data-duration="2.5828345" data-track-index="2">
<img id="g2-img" class="shot-img" src="assets/growth/02-growth.png" alt="Audience First">
</div>
<div id="g2-lbl" class="clip label" data-start="9.165669000000001" data-duration="2.5828345" data-track-index="3">
<div class="lbl-inner" id="g2-lbl-in">
<span class="lbl-num" style="background:#10b981">03 / 6</span>
<span class="lbl-txt">Audience First</span>
</div>
</div>
<div id="g3" class="clip shot" data-start="11.7485035" data-duration="2.5828345" data-track-index="2">
<img id="g3-img" class="shot-img" src="assets/growth/03-growth.png" alt="Deal + Conference Engine">
</div>
<div id="g3-lbl" class="clip label" data-start="11.7485035" data-duration="2.5828345" data-track-index="3">
<div class="lbl-inner" id="g3-lbl-in">
<span class="lbl-num" style="background:#10b981">04 / 6</span>
<span class="lbl-txt">Deal + Conference Engine</span>
</div>
</div>
<div id="g4" class="clip shot" data-start="14.331338" data-duration="2.5828345" data-track-index="2">
<img id="g4-img" class="shot-img" src="assets/growth/04-growth.png" alt="Every Page, Graded">
</div>
<div id="g4-lbl" class="clip label" data-start="14.331338" data-duration="2.5828345" data-track-index="3">
<div class="lbl-inner" id="g4-lbl-in">
<span class="lbl-num" style="background:#10b981">05 / 6</span>
<span class="lbl-txt">Every Page, Graded</span>
</div>
</div>
<div id="g5" class="clip shot" data-start="16.9141725" data-duration="2.5828345" data-track-index="2">
<img id="g5-img" class="shot-img" src="assets/growth/05-growth.png" alt="The Play">
</div>
<div id="g5-lbl" class="clip label" data-start="16.9141725" data-duration="2.5828345" data-track-index="3">
<div class="lbl-inner" id="g5-lbl-in">
<span class="lbl-num" style="background:#10b981">06 / 6</span>
<span class="lbl-txt">The Play</span>
</div>
</div>
<div id="tag-growth" class="clip corner-tag" data-start="4" data-duration="15.497" data-track-index="4"><span class="dot" style="background:#34d399"></span>GROWTH · strategy</div>
<section id="front-act" class="clip card" data-start="19.497007" data-duration="1.5" data-track-index="1">
<div class="card-inner">
<div class="card-tag" id="front-act-tag" style="color:#57b0ff">ACT II</div>
<h1 id="front-act-title">Front End</h1>
<p id="front-act-sub">The public CRE news platform</p>
</div>
</section>
<div id="f0" class="clip shot" data-start="20.997007" data-duration="0.6340835416666667" data-track-index="2">
<img id="f0-img" class="shot-img" src="assets/front/00-home.png" alt="Home">
</div>
<div id="f0-lbl" class="clip label" data-start="20.997007" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f0-lbl-in">
<span class="lbl-num" style="background:#0a6cff">01 / 24</span>
<span class="lbl-txt">Home</span>
</div>
</div>
<div id="f1" class="clip shot" data-start="21.631090541666666" data-duration="0.6340835416666667" data-track-index="2">
<img id="f1-img" class="shot-img" src="assets/front/01-hub.png" alt="Intelligence Hub">
</div>
<div id="f1-lbl" class="clip label" data-start="21.631090541666666" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f1-lbl-in">
<span class="lbl-num" style="background:#0a6cff">02 / 24</span>
<span class="lbl-txt">Intelligence Hub</span>
</div>
</div>
<div id="f2" class="clip shot" data-start="22.265174083333335" data-duration="0.6340835416666667" data-track-index="2">
<img id="f2-img" class="shot-img" src="assets/front/02-search.png" alt="Search">
</div>
<div id="f2-lbl" class="clip label" data-start="22.265174083333335" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f2-lbl-in">
<span class="lbl-num" style="background:#0a6cff">03 / 24</span>
<span class="lbl-txt">Search</span>
</div>
</div>
<div id="f3" class="clip shot" data-start="22.899257625" data-duration="0.6340835416666667" data-track-index="2">
<img id="f3-img" class="shot-img" src="assets/front/03-market-pulse.png" alt="Rates & Capital Markets">
</div>
<div id="f3-lbl" class="clip label" data-start="22.899257625" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f3-lbl-in">
<span class="lbl-num" style="background:#0a6cff">04 / 24</span>
<span class="lbl-txt">Rates & Capital Markets</span>
</div>
</div>
<div id="f4" class="clip shot" data-start="23.533341166666666" data-duration="0.6340835416666667" data-track-index="2">
<img id="f4-img" class="shot-img" src="assets/front/04-pulse.png" alt="Market Pulse">
</div>
<div id="f4-lbl" class="clip label" data-start="23.533341166666666" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f4-lbl-in">
<span class="lbl-num" style="background:#0a6cff">05 / 24</span>
<span class="lbl-txt">Market Pulse</span>
</div>
</div>
<div id="f5" class="clip shot" data-start="24.167424708333332" data-duration="0.6340835416666667" data-track-index="2">
<img id="f5-img" class="shot-img" src="assets/front/05-sector.png" alt="Sector Deep-Dives">
</div>
<div id="f5-lbl" class="clip label" data-start="24.167424708333332" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f5-lbl-in">
<span class="lbl-num" style="background:#0a6cff">06 / 24</span>
<span class="lbl-txt">Sector Deep-Dives</span>
</div>
</div>
<div id="f6" class="clip shot" data-start="24.80150825" data-duration="0.6340835416666667" data-track-index="2">
<img id="f6-img" class="shot-img" src="assets/front/06-metros.png" alt="Deal Flow by Metro">
</div>
<div id="f6-lbl" class="clip label" data-start="24.80150825" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f6-lbl-in">
<span class="lbl-num" style="background:#0a6cff">07 / 24</span>
<span class="lbl-txt">Deal Flow by Metro</span>
</div>
</div>
<div id="f7" class="clip shot" data-start="25.435591791666667" data-duration="0.6340835416666667" data-track-index="2">
<img id="f7-img" class="shot-img" src="assets/front/07-tools.png" alt="CRE Toolkit">
</div>
<div id="f7-lbl" class="clip label" data-start="25.435591791666667" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f7-lbl-in">
<span class="lbl-num" style="background:#0a6cff">08 / 24</span>
<span class="lbl-txt">CRE Toolkit</span>
</div>
</div>
<div id="f8" class="clip shot" data-start="26.069675333333333" data-duration="0.6340835416666667" data-track-index="2">
<img id="f8-img" class="shot-img" src="assets/front/08-watchlist.png" alt="Deal Watchlist">
</div>
<div id="f8-lbl" class="clip label" data-start="26.069675333333333" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f8-lbl-in">
<span class="lbl-num" style="background:#0a6cff">09 / 24</span>
<span class="lbl-txt">Deal Watchlist</span>
</div>
</div>
<div id="f9" class="clip shot" data-start="26.703758875" data-duration="0.6340835416666667" data-track-index="2">
<img id="f9-img" class="shot-img" src="assets/front/09-directory.png" alt="CRE Directory">
</div>
<div id="f9-lbl" class="clip label" data-start="26.703758875" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f9-lbl-in">
<span class="lbl-num" style="background:#0a6cff">10 / 24</span>
<span class="lbl-txt">CRE Directory</span>
</div>
</div>
<div id="f10" class="clip shot" data-start="27.337842416666668" data-duration="0.6340835416666667" data-track-index="2">
<img id="f10-img" class="shot-img" src="assets/front/10-compare.png" alt="Deal Comparison">
</div>
<div id="f10-lbl" class="clip label" data-start="27.337842416666668" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f10-lbl-in">
<span class="lbl-num" style="background:#0a6cff">11 / 24</span>
<span class="lbl-txt">Deal Comparison</span>
</div>
</div>
<div id="f11" class="clip shot" data-start="27.971925958333333" data-duration="0.6340835416666667" data-track-index="2">
<img id="f11-img" class="shot-img" src="assets/front/11-brief.png" alt="The RENTV Brief">
</div>
<div id="f11-lbl" class="clip label" data-start="27.971925958333333" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f11-lbl-in">
<span class="lbl-num" style="background:#0a6cff">12 / 24</span>
<span class="lbl-txt">The RENTV Brief</span>
</div>
</div>
<div id="f12" class="clip shot" data-start="28.6060095" data-duration="0.6340835416666667" data-track-index="2">
<img id="f12-img" class="shot-img" src="assets/front/12-syndicate.png" alt="Syndicate">
</div>
<div id="f12-lbl" class="clip label" data-start="28.6060095" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f12-lbl-in">
<span class="lbl-num" style="background:#0a6cff">13 / 24</span>
<span class="lbl-txt">Syndicate</span>
</div>
</div>
<div id="f13" class="clip shot" data-start="29.24009304166667" data-duration="0.6340835416666667" data-track-index="2">
<img id="f13-img" class="shot-img" src="assets/front/13-financing.png" alt="Sections — Financing">
</div>
<div id="f13-lbl" class="clip label" data-start="29.24009304166667" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f13-lbl-in">
<span class="lbl-num" style="background:#0a6cff">14 / 24</span>
<span class="lbl-txt">Sections — Financing</span>
</div>
</div>
<div id="f14" class="clip shot" data-start="29.874176583333334" data-duration="0.6340835416666667" data-track-index="2">
<img id="f14-img" class="shot-img" src="assets/front/14-deals.png" alt="Deals">
</div>
<div id="f14-lbl" class="clip label" data-start="29.874176583333334" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f14-lbl-in">
<span class="lbl-num" style="background:#0a6cff">15 / 24</span>
<span class="lbl-txt">Deals</span>
</div>
</div>
<div id="f15" class="clip shot" data-start="30.508260125" data-duration="0.6340835416666667" data-track-index="2">
<img id="f15-img" class="shot-img" src="assets/front/15-markets.png" alt="Markets">
</div>
<div id="f15-lbl" class="clip label" data-start="30.508260125" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f15-lbl-in">
<span class="lbl-num" style="background:#0a6cff">16 / 24</span>
<span class="lbl-txt">Markets</span>
</div>
</div>
<div id="f16" class="clip shot" data-start="31.14234366666667" data-duration="0.6340835416666667" data-track-index="2">
<img id="f16-img" class="shot-img" src="assets/front/16-la-commercial.png" alt="LA Commercial">
</div>
<div id="f16-lbl" class="clip label" data-start="31.14234366666667" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f16-lbl-in">
<span class="lbl-num" style="background:#0a6cff">17 / 24</span>
<span class="lbl-txt">LA Commercial</span>
</div>
</div>
<div id="f17" class="clip shot" data-start="31.776427208333335" data-duration="0.6340835416666667" data-track-index="2">
<img id="f17-img" class="shot-img" src="assets/front/17-review.png" alt="The REview">
</div>
<div id="f17-lbl" class="clip label" data-start="31.776427208333335" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f17-lbl-in">
<span class="lbl-num" style="background:#0a6cff">18 / 24</span>
<span class="lbl-txt">The REview</span>
</div>
</div>
<div id="f18" class="clip shot" data-start="32.41051075" data-duration="0.6340835416666667" data-track-index="2">
<img id="f18-img" class="shot-img" src="assets/front/18-cre-talk.png" alt="CRE Talk">
</div>
<div id="f18-lbl" class="clip label" data-start="32.41051075" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f18-lbl-in">
<span class="lbl-num" style="background:#0a6cff">19 / 24</span>
<span class="lbl-txt">CRE Talk</span>
</div>
</div>
<div id="f19" class="clip shot" data-start="33.04459429166667" data-duration="0.6340835416666667" data-track-index="2">
<img id="f19-img" class="shot-img" src="assets/front/19-conferences.png" alt="Conferences">
</div>
<div id="f19-lbl" class="clip label" data-start="33.04459429166667" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f19-lbl-in">
<span class="lbl-num" style="background:#0a6cff">20 / 24</span>
<span class="lbl-txt">Conferences</span>
</div>
</div>
<div id="f20" class="clip shot" data-start="33.67867783333333" data-duration="0.6340835416666667" data-track-index="2">
<img id="f20-img" class="shot-img" src="assets/front/20-blog.png" alt="Blog">
</div>
<div id="f20-lbl" class="clip label" data-start="33.67867783333333" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f20-lbl-in">
<span class="lbl-num" style="background:#0a6cff">21 / 24</span>
<span class="lbl-txt">Blog</span>
</div>
</div>
<div id="f21" class="clip shot" data-start="34.312761375" data-duration="0.6340835416666667" data-track-index="2">
<img id="f21-img" class="shot-img" src="assets/front/21-about.png" alt="About">
</div>
<div id="f21-lbl" class="clip label" data-start="34.312761375" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f21-lbl-in">
<span class="lbl-num" style="background:#0a6cff">22 / 24</span>
<span class="lbl-txt">About</span>
</div>
</div>
<div id="f22" class="clip shot" data-start="34.94684491666666" data-duration="0.6340835416666667" data-track-index="2">
<img id="f22-img" class="shot-img" src="assets/front/22-advertise.png" alt="Advertise">
</div>
<div id="f22-lbl" class="clip label" data-start="34.94684491666666" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f22-lbl-in">
<span class="lbl-num" style="background:#0a6cff">23 / 24</span>
<span class="lbl-txt">Advertise</span>
</div>
</div>
<div id="f23" class="clip shot" data-start="35.58092845833333" data-duration="0.6340835416666667" data-track-index="2">
<img id="f23-img" class="shot-img" src="assets/front/23-subscribe.png" alt="Subscribe / Newsletters">
</div>
<div id="f23-lbl" class="clip label" data-start="35.58092845833333" data-duration="0.6340835416666667" data-track-index="3">
<div class="lbl-inner" id="f23-lbl-in">
<span class="lbl-num" style="background:#0a6cff">24 / 24</span>
<span class="lbl-txt">Subscribe / Newsletters</span>
</div>
</div>
<div id="tag-front" class="clip corner-tag" data-start="20.997007" data-duration="15.218" data-track-index="4"><span class="dot" style="background:#57b0ff"></span>FRONT END · user</div>
<section id="admin-act" class="clip card" data-start="36.215012" data-duration="1.5" data-track-index="1">
<div class="card-inner">
<div class="card-tag" id="admin-act-tag" style="color:#c8a15a">ACT III</div>
<h1 id="admin-act-title">Admin Backend</h1>
<p id="admin-act-sub">Internal intelligence — admin only</p>
</div>
</section>
<div id="a0" class="clip shot" data-start="37.715012" data-duration="2.6715711428571427" data-track-index="2">
<img id="a0-img" class="shot-img" src="assets/admin/00-backend.png" alt="Backend Hub">
</div>
<div id="a0-lbl" class="clip label" data-start="37.715012" data-duration="2.6715711428571427" data-track-index="3">
<div class="lbl-inner" id="a0-lbl-in">
<span class="lbl-num" style="background:#c8a15a">01 / 7</span>
<span class="lbl-txt">Backend Hub</span>
</div>
</div>
<div id="a1" class="clip shot" data-start="40.38658314285714" data-duration="2.6715711428571427" data-track-index="2">
<img id="a1-img" class="shot-img" src="assets/admin/01-desk.png" alt="Broker & Owner Desk">
</div>
<div id="a1-lbl" class="clip label" data-start="40.38658314285714" data-duration="2.6715711428571427" data-track-index="3">
<div class="lbl-inner" id="a1-lbl-in">
<span class="lbl-num" style="background:#c8a15a">02 / 7</span>
<span class="lbl-txt">Broker & Owner Desk</span>
</div>
</div>
<div id="a2" class="clip shot" data-start="43.05815428571429" data-duration="2.6715711428571427" data-track-index="2">
<img id="a2-img" class="shot-img" src="assets/admin/02-audience.png" alt="Audience & CRM">
</div>
<div id="a2-lbl" class="clip label" data-start="43.05815428571429" data-duration="2.6715711428571427" data-track-index="3">
<div class="lbl-inner" id="a2-lbl-in">
<span class="lbl-num" style="background:#c8a15a">03 / 7</span>
<span class="lbl-txt">Audience & CRM</span>
</div>
</div>
<div id="a3" class="clip shot" data-start="45.72972542857143" data-duration="2.6715711428571427" data-track-index="2">
<img id="a3-img" class="shot-img" src="assets/admin/03-admin.png" alt="Admin Dashboards">
</div>
<div id="a3-lbl" class="clip label" data-start="45.72972542857143" data-duration="2.6715711428571427" data-track-index="3">
<div class="lbl-inner" id="a3-lbl-in">
<span class="lbl-num" style="background:#c8a15a">04 / 7</span>
<span class="lbl-txt">Admin Dashboards</span>
</div>
</div>
<div id="a4" class="clip shot" data-start="48.401296571428574" data-duration="2.6715711428571427" data-track-index="2">
<img id="a4-img" class="shot-img" src="assets/admin/04-versions.png" alt="Site Versions">
</div>
<div id="a4-lbl" class="clip label" data-start="48.401296571428574" data-duration="2.6715711428571427" data-track-index="3">
<div class="lbl-inner" id="a4-lbl-in">
<span class="lbl-num" style="background:#c8a15a">05 / 7</span>
<span class="lbl-txt">Site Versions</span>
</div>
</div>
<div id="a5" class="clip shot" data-start="51.072867714285714" data-duration="2.6715711428571427" data-track-index="2">
<img id="a5-img" class="shot-img" src="assets/admin/05-consulting.png" alt="Consulting">
</div>
<div id="a5-lbl" class="clip label" data-start="51.072867714285714" data-duration="2.6715711428571427" data-track-index="3">
<div class="lbl-inner" id="a5-lbl-in">
<span class="lbl-num" style="background:#c8a15a">06 / 7</span>
<span class="lbl-txt">Consulting</span>
</div>
</div>
<div id="a6" class="clip shot" data-start="53.74443885714285" data-duration="2.6715711428571427" data-track-index="2">
<img id="a6-img" class="shot-img" src="assets/admin/06-press.png" alt="Video Library">
</div>
<div id="a6-lbl" class="clip label" data-start="53.74443885714285" data-duration="2.6715711428571427" data-track-index="3">
<div class="lbl-inner" id="a6-lbl-in">
<span class="lbl-num" style="background:#c8a15a">07 / 7</span>
<span class="lbl-txt">Video Library</span>
</div>
</div>
<div id="tag-admin" class="clip corner-tag" data-start="37.715012" data-duration="18.701" data-track-index="4"><span class="dot" style="background:#c8a15a"></span>ADMIN · backend</div>
<section id="outro" class="clip card" data-start="56.41601" data-duration="3" data-track-index="1">
<div class="card-inner">
<h1 id="outro-title">rentv.agentabrams.com</h1>
<p id="outro-sub">One unified app · user + admin</p>
</div>
</section>
</div>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.from('#title-title',{y:36,autoAlpha:0,duration:0.6,ease:'power3.out'},0.000);
tl.from('#title-tag',{y:-18,autoAlpha:0,duration:0.5,ease:'power2.out'},0.100);
tl.from('#title-sub',{y:20,autoAlpha:0,duration:0.5,ease:'power2.out'},0.250);
tl.from('#growth-act-title',{y:36,autoAlpha:0,duration:0.6,ease:'power3.out'},2.500);
tl.from('#growth-act-tag',{y:-18,autoAlpha:0,duration:0.5,ease:'power2.out'},2.600);
tl.from('#growth-act-sub',{y:20,autoAlpha:0,duration:0.5,ease:'power2.out'},2.750);
tl.from('#g0-img',{opacity:0,duration:0.35,ease:'power1.out'},4.000);
tl.fromTo('#g0-img',{scale:1.06},{scale:1.0,duration:2.583,ease:'none'},4.000);
tl.from('#g0-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},4.050);
tl.from('#g1-img',{opacity:0,duration:0.35,ease:'power1.out'},6.583);
tl.fromTo('#g1-img',{scale:1.06},{scale:1.0,duration:2.583,ease:'none'},6.583);
tl.from('#g1-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},6.633);
tl.from('#g2-img',{opacity:0,duration:0.35,ease:'power1.out'},9.166);
tl.fromTo('#g2-img',{scale:1.06},{scale:1.0,duration:2.583,ease:'none'},9.166);
tl.from('#g2-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},9.216);
tl.from('#g3-img',{opacity:0,duration:0.35,ease:'power1.out'},11.749);
tl.fromTo('#g3-img',{scale:1.06},{scale:1.0,duration:2.583,ease:'none'},11.749);
tl.from('#g3-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},11.799);
tl.from('#g4-img',{opacity:0,duration:0.35,ease:'power1.out'},14.331);
tl.fromTo('#g4-img',{scale:1.06},{scale:1.0,duration:2.583,ease:'none'},14.331);
tl.from('#g4-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},14.381);
tl.from('#g5-img',{opacity:0,duration:0.35,ease:'power1.out'},16.914);
tl.fromTo('#g5-img',{scale:1.06},{scale:1.0,duration:2.583,ease:'none'},16.914);
tl.from('#g5-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},16.964);
tl.from('#tag-growth',{autoAlpha:0,duration:0.4},4.000);
tl.from('#front-act-title',{y:36,autoAlpha:0,duration:0.6,ease:'power3.out'},19.497);
tl.from('#front-act-tag',{y:-18,autoAlpha:0,duration:0.5,ease:'power2.out'},19.597);
tl.from('#front-act-sub',{y:20,autoAlpha:0,duration:0.5,ease:'power2.out'},19.747);
tl.from('#f0-img',{opacity:0,duration:0.35,ease:'power1.out'},20.997);
tl.fromTo('#f0-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},20.997);
tl.from('#f0-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},21.047);
tl.from('#f1-img',{opacity:0,duration:0.35,ease:'power1.out'},21.631);
tl.fromTo('#f1-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},21.631);
tl.from('#f1-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},21.681);
tl.from('#f2-img',{opacity:0,duration:0.35,ease:'power1.out'},22.265);
tl.fromTo('#f2-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},22.265);
tl.from('#f2-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},22.315);
tl.from('#f3-img',{opacity:0,duration:0.35,ease:'power1.out'},22.899);
tl.fromTo('#f3-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},22.899);
tl.from('#f3-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},22.949);
tl.from('#f4-img',{opacity:0,duration:0.35,ease:'power1.out'},23.533);
tl.fromTo('#f4-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},23.533);
tl.from('#f4-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},23.583);
tl.from('#f5-img',{opacity:0,duration:0.35,ease:'power1.out'},24.167);
tl.fromTo('#f5-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},24.167);
tl.from('#f5-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},24.217);
tl.from('#f6-img',{opacity:0,duration:0.35,ease:'power1.out'},24.802);
tl.fromTo('#f6-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},24.802);
tl.from('#f6-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},24.852);
tl.from('#f7-img',{opacity:0,duration:0.35,ease:'power1.out'},25.436);
tl.fromTo('#f7-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},25.436);
tl.from('#f7-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},25.486);
tl.from('#f8-img',{opacity:0,duration:0.35,ease:'power1.out'},26.070);
tl.fromTo('#f8-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},26.070);
tl.from('#f8-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},26.120);
tl.from('#f9-img',{opacity:0,duration:0.35,ease:'power1.out'},26.704);
tl.fromTo('#f9-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},26.704);
tl.from('#f9-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},26.754);
tl.from('#f10-img',{opacity:0,duration:0.35,ease:'power1.out'},27.338);
tl.fromTo('#f10-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},27.338);
tl.from('#f10-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},27.388);
tl.from('#f11-img',{opacity:0,duration:0.35,ease:'power1.out'},27.972);
tl.fromTo('#f11-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},27.972);
tl.from('#f11-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},28.022);
tl.from('#f12-img',{opacity:0,duration:0.35,ease:'power1.out'},28.606);
tl.fromTo('#f12-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},28.606);
tl.from('#f12-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},28.656);
tl.from('#f13-img',{opacity:0,duration:0.35,ease:'power1.out'},29.240);
tl.fromTo('#f13-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},29.240);
tl.from('#f13-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},29.290);
tl.from('#f14-img',{opacity:0,duration:0.35,ease:'power1.out'},29.874);
tl.fromTo('#f14-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},29.874);
tl.from('#f14-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},29.924);
tl.from('#f15-img',{opacity:0,duration:0.35,ease:'power1.out'},30.508);
tl.fromTo('#f15-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},30.508);
tl.from('#f15-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},30.558);
tl.from('#f16-img',{opacity:0,duration:0.35,ease:'power1.out'},31.142);
tl.fromTo('#f16-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},31.142);
tl.from('#f16-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},31.192);
tl.from('#f17-img',{opacity:0,duration:0.35,ease:'power1.out'},31.776);
tl.fromTo('#f17-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},31.776);
tl.from('#f17-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},31.826);
tl.from('#f18-img',{opacity:0,duration:0.35,ease:'power1.out'},32.411);
tl.fromTo('#f18-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},32.411);
tl.from('#f18-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},32.461);
tl.from('#f19-img',{opacity:0,duration:0.35,ease:'power1.out'},33.045);
tl.fromTo('#f19-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},33.045);
tl.from('#f19-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},33.095);
tl.from('#f20-img',{opacity:0,duration:0.35,ease:'power1.out'},33.679);
tl.fromTo('#f20-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},33.679);
tl.from('#f20-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},33.729);
tl.from('#f21-img',{opacity:0,duration:0.35,ease:'power1.out'},34.313);
tl.fromTo('#f21-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},34.313);
tl.from('#f21-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},34.363);
tl.from('#f22-img',{opacity:0,duration:0.35,ease:'power1.out'},34.947);
tl.fromTo('#f22-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},34.947);
tl.from('#f22-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},34.997);
tl.from('#f23-img',{opacity:0,duration:0.35,ease:'power1.out'},35.581);
tl.fromTo('#f23-img',{scale:1.06},{scale:1.0,duration:0.634,ease:'none'},35.581);
tl.from('#f23-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},35.631);
tl.from('#tag-front',{autoAlpha:0,duration:0.4},20.997);
tl.from('#admin-act-title',{y:36,autoAlpha:0,duration:0.6,ease:'power3.out'},36.215);
tl.from('#admin-act-tag',{y:-18,autoAlpha:0,duration:0.5,ease:'power2.out'},36.315);
tl.from('#admin-act-sub',{y:20,autoAlpha:0,duration:0.5,ease:'power2.out'},36.465);
tl.from('#a0-img',{opacity:0,duration:0.35,ease:'power1.out'},37.715);
tl.fromTo('#a0-img',{scale:1.06},{scale:1.0,duration:2.672,ease:'none'},37.715);
tl.from('#a0-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},37.765);
tl.from('#a1-img',{opacity:0,duration:0.35,ease:'power1.out'},40.387);
tl.fromTo('#a1-img',{scale:1.06},{scale:1.0,duration:2.672,ease:'none'},40.387);
tl.from('#a1-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},40.437);
tl.from('#a2-img',{opacity:0,duration:0.35,ease:'power1.out'},43.058);
tl.fromTo('#a2-img',{scale:1.06},{scale:1.0,duration:2.672,ease:'none'},43.058);
tl.from('#a2-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},43.108);
tl.from('#a3-img',{opacity:0,duration:0.35,ease:'power1.out'},45.730);
tl.fromTo('#a3-img',{scale:1.06},{scale:1.0,duration:2.672,ease:'none'},45.730);
tl.from('#a3-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},45.780);
tl.from('#a4-img',{opacity:0,duration:0.35,ease:'power1.out'},48.401);
tl.fromTo('#a4-img',{scale:1.06},{scale:1.0,duration:2.672,ease:'none'},48.401);
tl.from('#a4-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},48.451);
tl.from('#a5-img',{opacity:0,duration:0.35,ease:'power1.out'},51.073);
tl.fromTo('#a5-img',{scale:1.06},{scale:1.0,duration:2.672,ease:'none'},51.073);
tl.from('#a5-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},51.123);
tl.from('#a6-img',{opacity:0,duration:0.35,ease:'power1.out'},53.744);
tl.fromTo('#a6-img',{scale:1.06},{scale:1.0,duration:2.672,ease:'none'},53.744);
tl.from('#a6-lbl-in',{y:26,autoAlpha:0,duration:0.4,ease:'power2.out'},53.794);
tl.from('#tag-admin',{autoAlpha:0,duration:0.4},37.715);
tl.from('#outro-title',{y:36,autoAlpha:0,duration:0.6,ease:'power3.out'},56.416);
tl.from('#outro-sub',{y:20,autoAlpha:0,duration:0.5,ease:'power2.out'},56.666);
window.__timelines['main'] = tl;
</script>
</body>
</html>