Added advertisement files
This commit is contained in:
@@ -0,0 +1,183 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1920" width="100%" height="100%" style="background:#000a12; font-family:'Outfit', 'Inter', system-ui, -apple-system, sans-serif;">
|
||||
<defs>
|
||||
<!-- Background Gradients -->
|
||||
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#000810" />
|
||||
<stop offset="35%" stop-color="#001420" />
|
||||
<stop offset="70%" stop-color="#001d2a" />
|
||||
<stop offset="100%" stop-color="#000a12" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glowing Orbs -->
|
||||
<radialGradient id="topTealGlow" cx="50%" cy="15%" r="45%">
|
||||
<stop offset="0%" stop-color="#00bcac" stop-opacity="0.2" />
|
||||
<stop offset="100%" stop-color="#00bcac" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="midBlueGlow" cx="50%" cy="55%" r="50%">
|
||||
<stop offset="0%" stop-color="#3d98c6" stop-opacity="0.18" />
|
||||
<stop offset="100%" stop-color="#3d98c6" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="bottomTealGlow" cx="50%" cy="88%" r="40%">
|
||||
<stop offset="0%" stop-color="#00bcac" stop-opacity="0.15" />
|
||||
<stop offset="100%" stop-color="#00bcac" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
<!-- Card Gradients -->
|
||||
<linearGradient id="cardGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#001626" stop-opacity="0.9" />
|
||||
<stop offset="100%" stop-color="#002135" stop-opacity="0.95" />
|
||||
</linearGradient>
|
||||
<linearGradient id="activeCardGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#001f35" />
|
||||
<stop offset="100%" stop-color="#002d4a" />
|
||||
</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>
|
||||
|
||||
<filter id="cardShadow" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feDropShadow dx="0" dy="12" stdDeviation="16" flood-color="#000000" flood-opacity="0.6" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background Base -->
|
||||
<rect width="1080" height="1920" fill="url(#bgGrad)" />
|
||||
|
||||
<!-- Ambient Lights -->
|
||||
<rect width="1080" height="1920" fill="url(#topTealGlow)" />
|
||||
<rect width="1080" height="1920" fill="url(#midBlueGlow)" />
|
||||
<rect width="1080" height="1920" fill="url(#bottomTealGlow)" />
|
||||
|
||||
<!-- Grid Pattern Overlay -->
|
||||
<g opacity="0.03" stroke="#00bcac" stroke-width="1.5">
|
||||
<!-- Horizontal lines -->
|
||||
<path d="M 0,120 L 1080,120 M 0,240 L 1080,240 M 0,360 L 1080,360 M 0,480 L 1080,480 M 0,600 L 1080,600 M 0,720 L 1080,720 M 0,840 L 1080,840 M 0,960 L 1080,960 M 0,1080 L 1080,1080 M 0,1200 L 1080,1200 M 0,1320 L 1080,1320 M 0,1440 L 1080,1440 M 0,1560 L 1080,1560 M 0,1680 L 1080,1680 M 0,1800 L 1080,1800" />
|
||||
<!-- Vertical lines -->
|
||||
<path d="M 120,0 L 120,1920 M 240,0 L 240,1920 M 360,0 L 360,1920 M 480,0 L 480,1920 M 600,0 L 600,1920 M 720,0 L 720,1920 M 840,0 L 840,1920 M 960,0 L 960,1920" />
|
||||
</g>
|
||||
|
||||
<!-- Decorative Rings -->
|
||||
<circle cx="540" cy="150" r="300" stroke="#00bcac" stroke-width="1" fill="none" opacity="0.08" />
|
||||
<circle cx="540" cy="150" r="450" stroke="#3d98c6" stroke-width="1" stroke-dasharray="6 6" fill="none" opacity="0.05" />
|
||||
|
||||
<!-- BRAND HEADER -->
|
||||
<g transform="translate(0, 120)">
|
||||
<!-- Logo Icon -->
|
||||
<g transform="translate(540, 0)" text-anchor="middle">
|
||||
<rect x="-35" y="-35" width="70" height="70" rx="18" fill="url(#brandGrad)" />
|
||||
<path d="M -16,16 L -5,-10 L 14,16 Z" fill="#000a12" opacity="0.9" />
|
||||
<circle cx="-2" cy="2" r="6" fill="#ffffff" />
|
||||
|
||||
<!-- Logo Text -->
|
||||
<text x="0" y="75" font-size="32" font-weight="900" fill="#ffffff" letter-spacing="2">LITECHARMS</text>
|
||||
<text x="0" y="102" font-size="12" font-weight="700" fill="#00bcac" letter-spacing="3">IT SERVICES & PRIVATE CLOUD</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- AMBIENT BADGE -->
|
||||
<g transform="translate(540, 290)">
|
||||
<rect x="-120" y="0" width="240" height="34" rx="17" fill="#001826" stroke="#00bcac" stroke-width="1.2" opacity="0.9" />
|
||||
<circle cx="-95" cy="17" r="4" fill="#00bcac" />
|
||||
<text x="-80" y="21" font-size="11" font-weight="800" fill="#00bcac" letter-spacing="1.5">SOUTH AFRICAN COMPLIANT</text>
|
||||
</g>
|
||||
|
||||
<!-- MAIN HERO STATEMENT -->
|
||||
<g transform="translate(100, 420)">
|
||||
<text x="0" y="0" font-size="16" font-weight="800" fill="#00bcac" letter-spacing="4" font-family="'JetBrains Mono', monospace">TRANSPARENT SYSTEM DEVELOPMENT</text>
|
||||
<text x="0" y="70" font-size="64" font-weight="800" fill="#ffffff" letter-spacing="-1.5">Custom Code</text>
|
||||
<text x="0" y="145" font-size="64" font-weight="800" fill="#5eb3de" letter-spacing="-1.5">& Cloud Hosting</text>
|
||||
<text x="0" y="220" font-size="64" font-weight="800" fill="#ffffff" letter-spacing="-1.5">Engineered To Last.</text>
|
||||
<text x="0" y="275" font-size="18" font-weight="400" fill="#94a3b8" leading-normal>
|
||||
Interactive cost mapping aligned with POPIA data laws,
|
||||
</text>
|
||||
<text x="0" y="305" font-size="18" font-weight="400" fill="#94a3b8">
|
||||
SIT/UAT sign-offs, and professional scope-creep defense.
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- CORE THREE OFFERINGS LIST -->
|
||||
<g transform="translate(100, 800)" stroke-width="1">
|
||||
<!-- Item 1 -->
|
||||
<g transform="translate(0, 0)">
|
||||
<rect width="880" height="110" rx="18" fill="url(#cardGrad)" stroke="#00bcac" stroke-opacity="0.15" />
|
||||
<circle cx="50" cy="55" r="24" fill="#002135" />
|
||||
<!-- Document check icon -->
|
||||
<path d="M 44,52 L 48,56 L 56,48" stroke="#00bcac" stroke-width="3" fill="none" />
|
||||
<text x="100" y="48" font-size="20" font-weight="800" fill="#ffffff">STARTER APPS & WEB LAYOUTS</text>
|
||||
<text x="100" y="74" font-size="14" font-weight="500" fill="#94a3b8">Estimated from R29,999 • 30% Upfront Cost • Perfect for Launching</text>
|
||||
</g>
|
||||
|
||||
<!-- Item 2 (Active/Glow) -->
|
||||
<g transform="translate(0, 140)">
|
||||
<rect width="880" height="120" rx="20" fill="url(#activeCardGrad)" stroke="url(#brandGrad)" stroke-width="2" filter="url(#cardShadow)" />
|
||||
<!-- Star Icon -->
|
||||
<circle cx="50" cy="60" r="26" fill="#001826" />
|
||||
<path d="M 50,45 L 53,52 L 60,53 L 55,58 L 56,65 L 50,61 L 44,65 L 45,58 L 40,53 L 47,52 Z" fill="#00bcac" />
|
||||
<text x="100" y="52" font-size="22" font-weight="800" fill="#ffffff">STANDARD ENTERPRISE ENGINES</text>
|
||||
<text x="100" y="80" font-size="14" font-weight="600" fill="#00bcac">Most Popular: From R59,999 • 40% Initiation Cost • Full IAM & gRPC</text>
|
||||
<!-- Small Pop Badge -->
|
||||
<rect x="740" y="45" width="100" height="24" rx="12" fill="url(#brandGrad)" />
|
||||
<text x="790" y="61" font-size="10" font-weight="800" fill="#000a12" text-anchor="middle">BEST VALUE</text>
|
||||
</g>
|
||||
|
||||
<!-- Item 3 -->
|
||||
<g transform="translate(0, 290)">
|
||||
<rect width="880" height="110" rx="18" fill="url(#cardGrad)" stroke="#00bcac" stroke-opacity="0.15" />
|
||||
<circle cx="50" cy="55" r="24" fill="#002135" />
|
||||
<path d="M 40,63 L 45,45 L 50,55 L 55,45 L 60,63 Z" fill="#3d98c6" opacity="0.8" />
|
||||
<text x="100" y="48" font-size="20" font-weight="800" fill="#ffffff">PRIVATE CLOUD CONTEXTS</text>
|
||||
<text x="100" y="74" font-size="14" font-weight="500" fill="#94a3b8">Estimated from R119,999 • 50% Initiation Cost • Dedicated Tunnels</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- METRIC STATS ROW -->
|
||||
<g transform="translate(100, 1260)">
|
||||
<!-- Stat 1 -->
|
||||
<g transform="translate(0, 0)">
|
||||
<text x="0" y="40" font-size="44" font-weight="900" fill="#00bcac">POPIA</text>
|
||||
<text x="0" y="72" font-size="14" font-weight="700" fill="#64748b" letter-spacing="1">Strict Security</text>
|
||||
</g>
|
||||
<!-- Stat 2 -->
|
||||
<g transform="translate(300, 0)">
|
||||
<text x="0" y="40" font-size="44" font-weight="900" fill="#ffffff">SIT/UAT</text>
|
||||
<text x="0" y="72" font-size="14" font-weight="700" fill="#64748b" letter-spacing="1">Verified Approval</text>
|
||||
</g>
|
||||
<!-- Stat 3 -->
|
||||
<g transform="translate(600, 0)">
|
||||
<text x="0" y="40" font-size="44" font-weight="900" fill="#5eb3de">R0</text>
|
||||
<text x="0" y="72" font-size="14" font-weight="700" fill="#64748b" letter-spacing="1">Scope Creep Risk</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- REGISTRATION NOTICE & COMPLIANCE WARNING -->
|
||||
<g transform="translate(100, 1400)">
|
||||
<rect width="880" height="95" rx="14" fill="#1c1200" stroke="#f59e0b" stroke-width="1" stroke-opacity="0.2" />
|
||||
<!-- Notice Icon -->
|
||||
<path d="M 30,32 L 30,48 M 30,58 L 30,62" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
|
||||
<path d="M 30,18 L 14,70 L 46,70 Z" stroke="#f59e0b" stroke-width="2.5" fill="none" />
|
||||
<text x="64" y="38" font-size="12" font-weight="800" fill="#f59e0b" letter-spacing="1">SOUTH AFRICAN COMMERCIAL MANDATE</text>
|
||||
<text x="64" y="58" font-size="11" font-weight="500" fill="#d97706">Initiation costs are dedicated resource allocation fees (not refundable deposits). SIT & UAT testing sign-off</text>
|
||||
<text x="64" y="76" font-size="11" font-weight="500" fill="#d97706">is required prior to deployment. Out-of-scope work requires separate mutual pricing agreement.</text>
|
||||
</g>
|
||||
|
||||
<!-- BOTTOM CALL-TO-ACTION AND CHEVRONS -->
|
||||
<g transform="translate(100, 1560)">
|
||||
<!-- Swipe Button -->
|
||||
<rect x="0" y="0" width="880" height="110" rx="24" fill="url(#brandGrad)" filter="url(#cardShadow)" />
|
||||
<text x="440" y="66" font-size="28" font-weight="900" fill="#000a12" text-anchor="middle" letter-spacing="1.5">OPEN INTERACTIVE ESTIMATOR</text>
|
||||
|
||||
<!-- Pulse indicators -->
|
||||
<g transform="translate(440, 170)" opacity="0.8">
|
||||
<path d="M -30,-20 L 0,0 L 30,-20" stroke="#00bcac" stroke-width="4" stroke-linecap="round" fill="none" />
|
||||
<path d="M -30,-45 L 0,-25 L 30,-45" stroke="#3d98c6" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.5" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- FOOTER SOCIAL / CONTACT -->
|
||||
<g transform="translate(540, 1840)" text-anchor="middle" font-size="13" font-weight="600" fill="#475569">
|
||||
<text x="0" y="0">Website: <tspan fill="#ffffff">www.litecharms.co.za</tspan> • Support: <tspan fill="#ffffff">contact@litecharms.co.za</tspan></text>
|
||||
<text x="0" y="24" font-size="11" fill="#64748b">LiteCharms (PTY) Ltd • Midrand • Reg. 2020/269438/07 • Governed by South African Law</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
Reference in New Issue
Block a user