184 lines
9.8 KiB
XML
184 lines
9.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="100%" height="100%" style="background:#000a12; font-family:'Outfit', 'Inter', system-ui, -apple-system, sans-serif;">
|
|
<defs>
|
|
<!-- Background Gradient -->
|
|
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#00070e" />
|
|
<stop offset="60%" stop-color="#001625" />
|
|
<stop offset="100%" stop-color="#001d2d" />
|
|
</linearGradient>
|
|
|
|
<!-- Glowing Spotlights -->
|
|
<radialGradient id="leftTealGlow" cx="20%" cy="50%" r="65%">
|
|
<stop offset="0%" stop-color="#00bcac" stop-opacity="0.15" />
|
|
<stop offset="100%" stop-color="#00bcac" stop-opacity="0" />
|
|
</radialGradient>
|
|
<radialGradient id="rightBlueGlow" cx="80%" cy="50%" r="65%">
|
|
<stop offset="0%" stop-color="#3d98c6" stop-opacity="0.18" />
|
|
<stop offset="100%" stop-color="#3d98c6" stop-opacity="0" />
|
|
</radialGradient>
|
|
|
|
<!-- Card Backgrounds -->
|
|
<linearGradient id="panelGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#001321" stop-opacity="0.9" />
|
|
<stop offset="100%" stop-color="#001c2e" stop-opacity="0.95" />
|
|
</linearGradient>
|
|
<linearGradient id="brandGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#00bcac" />
|
|
<stop offset="100%" stop-color="#3d98c6" />
|
|
</linearGradient>
|
|
|
|
<!-- Dropshadows -->
|
|
<filter id="panelShadow" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#000000" flood-opacity="0.4" />
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background Base -->
|
|
<rect width="1200" height="630" fill="url(#bgGrad)" />
|
|
|
|
<!-- Ambient Glowing Backdrops -->
|
|
<rect width="1200" height="630" fill="url(#leftTealGlow)" />
|
|
<rect width="1200" height="630" fill="url(#rightBlueGlow)" />
|
|
|
|
<!-- Abstract Graphic Overlays (Gears / Connections) -->
|
|
<g opacity="0.04" stroke="#00bcac" stroke-width="1.5" fill="none">
|
|
<circle cx="1080" cy="315" r="220" />
|
|
<circle cx="1080" cy="315" r="320" stroke-dasharray="10 10" />
|
|
<line x1="700" y1="315" x2="1200" y2="315" />
|
|
<line x1="1080" y1="0" x2="1080" y2="630" />
|
|
</g>
|
|
|
|
<!-- Left/Right Divider Lines -->
|
|
<line x1="660" y1="100" x2="660" y2="530" stroke="#002135" stroke-width="1.5" />
|
|
|
|
<!-- LEFT COLUMN: VALUE PROPOSITION -->
|
|
<g transform="translate(70, 70)">
|
|
|
|
<!-- BRAND HEADER -->
|
|
<g transform="translate(0, 0)">
|
|
<rect x="0" y="0" width="44" height="44" rx="12" fill="url(#brandGrad)" />
|
|
<path d="M 12,31 L 20,16 L 30,31 Z" fill="#000a12" opacity="0.9" />
|
|
<circle cx="21" cy="23" r="3.5" fill="#ffffff" />
|
|
<text x="56" y="22" font-size="20" font-weight="900" fill="#ffffff" letter-spacing="1">LITECHARMS</text>
|
|
<text x="56" y="37" font-size="10" font-weight="700" fill="#00bcac" letter-spacing="2.5">IT SERVICES & CLOUD</text>
|
|
</g>
|
|
|
|
<!-- CORE HERO TITLE -->
|
|
<g transform="translate(0, 90)">
|
|
<text x="0" y="20" font-size="13" font-weight="700" fill="#00bcac" letter-spacing="3" font-family="'JetBrains Mono', monospace">SOUTH AFRICAN SOFTWARE HOUSE</text>
|
|
<text x="0" y="75" font-size="44" font-weight="800" fill="#ffffff" letter-spacing="-1">Honest Budgets,</text>
|
|
<text x="0" y="130" font-size="44" font-weight="800" fill="#5eb3de" letter-spacing="-1">Pristine Engineering.</text>
|
|
<text x="0" y="165" font-size="15" font-weight="400" fill="#94a3b8">Web layouts, custom gRPC API servers, secure setups & cloud portals.</text>
|
|
</g>
|
|
|
|
<!-- COMPLIANCE CHECKPOINTS -->
|
|
<g transform="translate(0, 290)">
|
|
<!-- Point 1 -->
|
|
<g transform="translate(0, 0)">
|
|
<path d="M 0,8 L 4,12 L 10,4" stroke="#00bcac" stroke-width="2.5" fill="none" />
|
|
<text x="18" y="10" font-size="13" font-weight="700" fill="#ffffff">POPIA Compliant Security</text>
|
|
<text x="18" y="26" font-size="11" fill="#64748b">Ensuring South African legal storage safety rules for data.</text>
|
|
</g>
|
|
|
|
<!-- Point 2 -->
|
|
<g transform="translate(0, 45)">
|
|
<path d="M 0,8 L 4,12 L 10,4" stroke="#00bcac" stroke-width="2.5" fill="none" />
|
|
<text x="18" y="10" font-size="13" font-weight="700" fill="#ffffff">Zero-Risk Scope Safeguards</text>
|
|
<text x="18" y="26" font-size="11" fill="#64748b">Out-of-scope tasks are protected by mutual written rate changes.</text>
|
|
</g>
|
|
|
|
<!-- Point 3 -->
|
|
<g transform="translate(0, 90)">
|
|
<path d="M 0,8 L 4,12 L 10,4" stroke="#00bcac" stroke-width="2.5" fill="none" />
|
|
<text x="18" y="10" font-size="13" font-weight="700" fill="#ffffff">Mandatory SIT & UAT testing</text>
|
|
<text x="18" y="26" font-size="11" fill="#64748b">Final balance paid only upon successful client functional testing.</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- CALL-TO-ACTION BUTTON -->
|
|
<g transform="translate(0, 445)">
|
|
<rect x="0" y="0" width="260" height="48" rx="14" fill="url(#brandGrad)" />
|
|
<text x="130" y="28" font-size="13" font-weight="900" fill="#000a12" text-anchor="middle" letter-spacing="1">CALCULATE BUDGET LIVE →</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- RIGHT COLUMN: INTERACTIVE ESTIMATOR MOCKUP -->
|
|
<g transform="translate(710, 70)" filter="url(#panelShadow)">
|
|
<rect width="420" height="490" rx="24" fill="url(#panelGrad)" stroke="#00bcac" stroke-opacity="0.15" stroke-width="1.5" />
|
|
|
|
<!-- Header of Mockup dashboard -->
|
|
<g transform="translate(25, 30)">
|
|
<circle cx="10" cy="10" r="5" fill="#ef4444" />
|
|
<circle cx="26" cy="10" r="5" fill="#f59e0b" />
|
|
<circle cx="42" cy="10" r="5" fill="#10b981" />
|
|
<text x="370" y="15" font-size="10" font-weight="700" fill="#00bcac" font-family="'JetBrains Mono', monospace" text-anchor="end">ESTIMATION CONSOLE</text>
|
|
</g>
|
|
|
|
<!-- Mockup Item: Active Project Selection -->
|
|
<g transform="translate(25, 75)">
|
|
<rect width="370" height="75" rx="14" fill="#001b2a" stroke="#00bcac" stroke-opacity="0.3" stroke-width="1.2" />
|
|
<text x="18" y="26" font-size="10" font-weight="700" fill="#00bcac" letter-spacing="1">PROJECT SPECIFICATIONS</text>
|
|
<text x="18" y="48" font-size="14" font-weight="800" fill="#ffffff">Web Layout, APIs & gRPC System</text>
|
|
<rect x="300" y="26" width="52" height="18" rx="9" fill="#002d43" />
|
|
<text x="326" y="38" font-size="8" font-weight="800" fill="#00bcac" text-anchor="middle">ACTIVE</text>
|
|
</g>
|
|
|
|
<!-- Mockup Item: Urgency Timelines -->
|
|
<g transform="translate(25, 165)">
|
|
<text x="0" y="14" font-size="11" font-weight="700" fill="#94a3b8">CHOSEN DEVELOPMENT TIMELINE</text>
|
|
|
|
<!-- Option 1 (Express 50%) -->
|
|
<g transform="translate(0, 25)">
|
|
<rect width="115" height="42" rx="10" fill="#001826" stroke="#ef4444" stroke-opacity="0.2" stroke-width="1.2" />
|
|
<text x="57" y="20" font-size="10" font-weight="800" fill="#ef4444" text-anchor="middle">EXPRESS (50%)</text>
|
|
<text x="57" y="32" font-size="7" font-weight="600" fill="#64748b" text-anchor="middle">Fastest Delivery</text>
|
|
</g>
|
|
|
|
<!-- Option 2 (Balanced 40%) - Highlighted -->
|
|
<g transform="translate(127, 25)">
|
|
<rect width="115" height="42" rx="10" fill="#002d43" stroke="#00bcac" stroke-width="1.5" />
|
|
<text x="57" y="20" font-size="10" font-weight="800" fill="#ffffff" text-anchor="middle">BALANCED (40%)</text>
|
|
<text x="57" y="32" font-size="7" font-weight="700" fill="#00bcac" text-anchor="middle">Recommended</text>
|
|
</g>
|
|
|
|
<!-- Option 3 (Phased 30%) -->
|
|
<g transform="translate(254, 25)">
|
|
<rect width="115" height="42" rx="10" fill="#001826" stroke="#94a3b8" stroke-opacity="0.1" stroke-width="1" />
|
|
<text x="57" y="20" font-size="10" font-weight="800" fill="#94a3b8" text-anchor="middle">PHASED (30%)</text>
|
|
<text x="57" y="32" font-size="7" font-weight="600" fill="#64748b" text-anchor="middle">Multi-Month Rollout</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Upfront Initiation Fee Calculator Area -->
|
|
<g transform="translate(25, 255)">
|
|
<rect width="370" height="95" rx="14" fill="#121e25" stroke="#3d98c6" stroke-opacity="0.3" stroke-width="1.2" />
|
|
<text x="18" y="25" font-size="10" font-weight="700" fill="#3d98c6" letter-spacing="1">40% UPFRONT INITIATION FEE</text>
|
|
<text x="18" y="55" font-size="24" font-weight="800" fill="#ffffff">R 24,000 - R 40,000</text>
|
|
<text x="18" y="78" font-size="9" fill="#94a3b8">Based on a R60k - R100k standard project blueprint estimate</text>
|
|
<!-- Shield lock mini icon -->
|
|
<path d="M 324,52 L 324,59 L 332,59 L 332,52 Z" fill="#00bcac" />
|
|
<path d="M 326,52 L 326,49 C 326,46 330,46 330,49 L 330,52" stroke="#00bcac" stroke-width="1.5" fill="none" />
|
|
</g>
|
|
|
|
<!-- Bottom Pricing Result of Mockup -->
|
|
<g transform="translate(25, 375)">
|
|
<line x1="0" y1="0" x2="370" y2="0" stroke="#002135" stroke-width="1.5" />
|
|
|
|
<text x="0" y="30" font-size="11" font-weight="700" fill="#94a3b8">TOTAL ESTIMATE BUDGET</text>
|
|
<text x="0" y="65" font-size="30" font-weight="800" fill="#00bcac">R 59,999+ <tspan font-size="14" font-weight="600" fill="#94a3b8">ZAR</tspan></text>
|
|
<text x="0" y="85" font-size="9" fill="#64748b">ZAR Estimate • South African PoPIA Compliance Enforced</text>
|
|
|
|
<!-- Success Check badge -->
|
|
<circle cx="340" cy="50" r="18" fill="#002d43" stroke="#00bcac" stroke-width="1" />
|
|
<path d="M 333,50 L 338,55 L 348,44" stroke="#00bcac" stroke-width="2" fill="none" />
|
|
</g>
|
|
|
|
</g>
|
|
|
|
<!-- SMALL CAPTION AT EXTREME BOTTOM -->
|
|
<g transform="translate(70, 580)" font-size="11" font-weight="500" fill="#475569">
|
|
<text x="0" y="0">LiteCharms (PTY) Ltd • Noordwyk, Midrand • Reg. 2020/269438/07 • contact@litecharms.co.za</text>
|
|
<text x="1060" y="0" text-anchor="end" font-weight="600" fill="#00bcac">OFFICIAL ADVERTISING VARIANT • LANDSCAPE V3</text>
|
|
</g>
|
|
</svg>
|
