litecharms/litecharms-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added advertisement files

Browse Source
This commit is contained in:
hermes
2026-07-17 11:35:02 +02:00
parent 788649e962
commit b8fd30d1f6
6 changed files with 1254 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/ads/landscape_ad.svg
+183
View File
@@ -0,0 +1,183 @@
<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 &amp; 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 &amp; 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 &amp; 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 &rarr;</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 &amp; 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>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

public/ads/square_ad.svg
+261
View File
@@ -0,0 +1,261 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080" 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="100%">
<stop offset="0%" stop-color="#000e18" />
<stop offset="50%" stop-color="#001826" />
<stop offset="100%" stop-color="#002434" />
</linearGradient>
<!-- Aurora Glows -->
<radialGradient id="tealGlow" cx="15%" cy="15%" r="60%">
<stop offset="0%" stop-color="#00bcac" stop-opacity="0.15" />
<stop offset="100%" stop-color="#00bcac" stop-opacity="0" />
</radialGradient>
<radialGradient id="blueGlow" cx="85%" cy="85%" r="60%">
<stop offset="0%" stop-color="#3d98c6" stop-opacity="0.15" />
<stop offset="100%" stop-color="#3d98c6" stop-opacity="0" />
</radialGradient>
<!-- Card Gradients -->
<linearGradient id="cardGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#001321" stop-opacity="0.8" />
<stop offset="100%" stop-color="#001b2c" stop-opacity="0.95" />
</linearGradient>
<linearGradient id="activeCardGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#001f35" />
<stop offset="100%" stop-color="#002d4a" />
</linearGradient>
<!-- Brand Color Gradient -->
<linearGradient id="brandGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00bcac" />
<stop offset="100%" stop-color="#3d98c6" />
</linearGradient>
<!-- Card Shadows -->
<filter id="cardShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#000000" flood-opacity="0.5" />
</filter>
<filter id="glowEffect" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background Base -->
<rect width="1080" height="1080" fill="url(#bgGrad)" />
<!-- Ambient Lights -->
<rect width="1080" height="1080" fill="url(#tealGlow)" />
<rect width="1080" height="1080" fill="url(#blueGlow)" />
<!-- Background Tech Grid Overlay -->
<g opacity="0.04">
<path d="M 0,90 L 1080,90 M 0,180 L 1080,180 M 0,270 L 1080,270 M 0,360 L 1080,360 M 0,450 L 1080,450 M 0,540 L 1080,540 M 0,630 L 1080,630 M 0,720 L 1080,720 M 0,810 L 1080,810 M 0,900 L 1080,900 M 0,990 L 1080,990" stroke="#00bcac" stroke-width="1.5" />
<path d="M 90,0 L 90,1080 M 180,0 L 180,1080 M 270,0 L 270,1080 M 360,0 L 360,1080 M 450,0 L 450,1080 M 540,0 L 540,1080 M 630,0 L 630,1080 M 720,0 L 720,1080 M 810,0 L 810,1080 M 900,0 L 900,1080 M 990,0 L 990,1080" stroke="#00bcac" stroke-width="1.5" />
</g>
<!-- Decorative Accent Vectors -->
<path d="M 1080,0 L 900,0 L 1080,180 Z" fill="url(#brandGrad)" opacity="0.1" />
<circle cx="1000" cy="80" r="150" stroke="#00bcac" stroke-width="1" fill="none" opacity="0.15" />
<circle cx="1000" cy="80" r="220" stroke="#3d98c6" stroke-dasharray="8 8" stroke-width="1" fill="none" opacity="0.1" />
<!-- HEADER SECTION -->
<g transform="translate(80, 80)">
<!-- Brand Icon -->
<rect x="0" y="0" width="52" height="52" rx="14" fill="url(#brandGrad)" />
<path d="M 16,36 L 24,18 L 36,36 Z" fill="#000a12" opacity="0.9" />
<circle cx="26" cy="27" r="4" fill="#ffffff" />
<!-- Brand Name -->
<text x="68" y="26" font-size="24" font-weight="800" fill="#ffffff" letter-spacing="1">LITECHARMS</text>
<text x="68" y="44" font-size="11" font-weight="600" fill="#00bcac" letter-spacing="2">IT SERVICES &amp; PRIVATE CLOUD</text>
<!-- Top Badge -->
<rect x="760" y="8" width="160" height="28" rx="14" fill="#002f43" stroke="#00bcac" stroke-width="1" opacity="0.8" />
<circle cx="776" cy="22" r="4" fill="#00bcac" />
<text x="788" y="26" font-size="10" font-weight="700" fill="#00bcac" letter-spacing="1">POPIA COMPLIANT</text>
</g>
<!-- HERO SECTION -->
<g transform="translate(80, 180)">
<text x="0" y="40" font-size="16" font-weight="700" fill="#00bcac" letter-spacing="3" font-family="'JetBrains Mono', monospace">ENTERPRISE SOFTWARE SOLUTIONS</text>
<text x="0" y="105" font-size="52" font-weight="800" fill="#ffffff" letter-spacing="-1">Build Your Next System</text>
<text x="0" y="165" font-size="52" font-weight="800" fill="#5eb3de" letter-spacing="-1">With South African Experts.</text>
<text x="0" y="205" font-size="16" font-weight="400" fill="#94a3b8">Robust web architecture, custom APIs, local active servers &amp; secure cloud staging.</text>
</g>
<!-- SERVICE CAPABILITY PILLS -->
<g transform="translate(80, 420)">
<!-- Pill 1 -->
<rect x="0" y="0" width="280" height="42" rx="10" fill="#001826" stroke="#00bcac" stroke-width="1" stroke-opacity="0.3" />
<path d="M 16,21 L 22,27 L 32,15" stroke="#00bcac" stroke-width="2" fill="none" />
<text x="42" y="25" font-size="12" font-weight="700" fill="#ffffff">Web &amp; Mobile Layouts</text>
<!-- Pill 2 -->
<rect x="310" y="0" width="280" height="42" rx="10" fill="#001826" stroke="#00bcac" stroke-width="1" stroke-opacity="0.3" />
<path d="M 326,21 L 332,27 L 342,15" stroke="#00bcac" stroke-width="2" fill="none" />
<text x="352" y="25" font-size="12" font-weight="700" fill="#ffffff">API &amp; gRPC Engineering</text>
<!-- Pill 3 -->
<rect x="620" y="0" width="300" height="42" rx="10" fill="#001826" stroke="#3d98c6" stroke-width="1" stroke-opacity="0.3" />
<path d="M 636,21 L 642,27 L 652,15" stroke="#3d98c6" stroke-width="2" fill="none" />
<text x="662" y="25" font-size="12" font-weight="700" fill="#ffffff">Khongisa Secure Cloud Tunnels</text>
</g>
<!-- THREE COST PRICING CARDS -->
<g transform="translate(80, 500)">
<!-- CARD 1: BASIC WEB/APP -->
<g transform="translate(0, 0)" filter="url(#cardShadow)">
<!-- Border outline -->
<rect x="0" y="0" width="285" height="400" rx="20" fill="url(#cardGrad)" stroke="#00bcac" stroke-opacity="0.2" stroke-width="1.5" />
<!-- Card header -->
<rect x="20" y="20" width="40" height="40" rx="10" fill="#001d2a" stroke="#00bcac" stroke-opacity="0.4" />
<path d="M 32,45 L 36,49 L 46,39" stroke="#00bcac" stroke-width="2" fill="none" />
<text x="75" y="38" font-size="14" font-weight="800" fill="#ffffff">BASIC APPS</text>
<text x="75" y="52" font-size="10" font-weight="600" fill="#00bcac" letter-spacing="1">Startups &amp; Small Biz</text>
<!-- Pricing -->
<text x="24" y="110" font-size="12" font-weight="600" fill="#94a3b8" font-family="'JetBrains Mono', monospace">EST. FROM</text>
<text x="24" y="150" font-size="34" font-weight="800" fill="#ffffff">R 29,999</text>
<line x1="24" y1="170" x2="260" y2="170" stroke="#001e30" stroke-width="2" />
<!-- Features list -->
<g transform="translate(24, 195)">
<circle cx="6" cy="6" r="4" fill="#00bcac" />
<text x="18" y="10" font-size="11" font-weight="500" fill="#cbd5e1">5 Standard Web Pages</text>
<circle cx="6" cy="32" r="4" fill="#00bcac" />
<text x="18" y="36" font-size="11" font-weight="500" fill="#cbd5e1">Responsive UI Layout</text>
<circle cx="6" cy="58" r="4" fill="#00bcac" />
<text x="18" y="62" font-size="11" font-weight="500" fill="#cbd5e1">Standard local security</text>
<circle cx="6" cy="84" r="4" fill="#00bcac" />
<text x="18" y="88" font-size="11" font-weight="500" fill="#cbd5e1">30% Upfront Cost Plan</text>
<circle cx="6" cy="110" r="4" fill="#00bcac" />
<text x="18" y="114" font-size="11" font-weight="500" fill="#cbd5e1">30 Days Launch Support</text>
</g>
<!-- Terms Badge -->
<rect x="20" y="350" width="245" height="30" rx="8" fill="#001826" />
<text x="32" y="368" font-size="10" font-weight="600" fill="#94a3b8">Subject to SIT &amp; UAT approval</text>
</g>
<!-- CARD 2: STANDARD / INTERMEDIATE (MOST POPULAR HIGHLIGHTED) -->
<g transform="translate(315, -15)" filter="url(#cardShadow)">
<!-- Background and Active Border Glow -->
<rect x="0" y="0" width="290" height="425" rx="22" fill="url(#activeCardGrad)" stroke="url(#brandGrad)" stroke-width="2" />
<!-- Most popular badge -->
<rect x="80" y="-12" width="130" height="24" rx="12" fill="url(#brandGrad)" />
<text x="145" y="4" font-size="9" font-weight="800" fill="#000a12" text-anchor="middle" letter-spacing="1">MOST POPULAR</text>
<!-- Card header -->
<rect x="24" y="35" width="40" height="40" rx="10" fill="#001321" stroke="#00bcac" stroke-width="1" />
<!-- Star Icon -->
<path d="M 44,43 L 47,49 L 54,50 L 49,55 L 50,61 L 44,58 L 38,61 L 39,55 L 34,50 L 41,49 Z" fill="#00bcac" />
<text x="78" y="52" font-size="15" font-weight="800" fill="#ffffff">STANDARD SYSTEM</text>
<text x="78" y="66" font-size="10" font-weight="600" fill="#00bcac" letter-spacing="1">Mid-Sized / Growing Biz</text>
<!-- Pricing -->
<text x="24" y="130" font-size="12" font-weight="600" fill="#94a3b8" font-family="'JetBrains Mono', monospace">EST. FROM</text>
<text x="24" y="170" font-size="38" font-weight="800" fill="#00bcac">R 59,999</text>
<line x1="24" y1="190" x2="266" y2="190" stroke="#001826" stroke-width="2" />
<!-- Features list -->
<g transform="translate(24, 215)">
<path d="M 0,6 L 4,10 L 10,2" stroke="#00bcac" stroke-width="2" fill="none" />
<text x="18" y="10" font-size="11" font-weight="700" fill="#ffffff">Up to 12 Core Screens</text>
<path d="M 0,32 L 4,36 L 10,28" stroke="#00bcac" stroke-width="2" fill="none" />
<text x="18" y="36" font-size="11" font-weight="700" fill="#ffffff">Robust API &amp; gRPC Engine</text>
<path d="M 0,58 L 4,62 L 10,54" stroke="#00bcac" stroke-width="2" fill="none" />
<text x="18" y="62" font-size="11" font-weight="700" fill="#ffffff">Identity Server (SSO / IAM)</text>
<path d="M 0,84 L 4,88 L 10,80" stroke="#00bcac" stroke-width="2" fill="none" />
<text x="18" y="88" font-size="11" font-weight="700" fill="#ffffff">40% Upfront Cost Plan</text>
<path d="M 0,110 L 4,114 L 10,106" stroke="#00bcac" stroke-width="2" fill="none" />
<text x="18" y="114" font-size="11" font-weight="700" fill="#ffffff">Full SIT &amp; UAT Integration</text>
<path d="M 0,136 L 4,140 L 10,132" stroke="#00bcac" stroke-width="2" fill="none" />
<text x="18" y="140" font-size="11" font-weight="700" fill="#ffffff">60 Days Post-Launch SLA</text>
</g>
<!-- Terms Badge -->
<rect x="24" y="375" width="242" height="30" rx="8" fill="url(#brandGrad)" opacity="0.15" />
<rect x="24" y="375" width="242" height="30" rx="8" fill="none" stroke="url(#brandGrad)" stroke-width="1" />
<text x="145" y="394" font-size="10" font-weight="800" fill="#00bcac" text-anchor="middle">STRICT PROTECTION AGAINST SCOPE CREEP</text>
</g>
<!-- CARD 3: ENTERPRISE / PRIVATE CLOUD -->
<g transform="translate(635, 0)" filter="url(#cardShadow)">
<!-- Border outline -->
<rect x="0" y="0" width="285" height="400" rx="20" fill="url(#cardGrad)" stroke="#3d98c6" stroke-opacity="0.2" stroke-width="1.5" />
<!-- Card header -->
<rect x="20" y="20" width="40" height="40" rx="10" fill="#001d2a" stroke="#3d98c6" stroke-opacity="0.4" />
<path d="M 30,45 L 35,33 L 40,45" stroke="#3d98c6" stroke-width="2" fill="none" />
<rect x="33" y="45" width="4" height="2" fill="#3d98c6" />
<text x="75" y="38" font-size="14" font-weight="800" fill="#ffffff">PRIVATE CLOUD</text>
<text x="75" y="52" font-size="10" font-weight="600" fill="#3d98c6" letter-spacing="1">Enterprise Core Systems</text>
<!-- Pricing -->
<text x="24" y="110" font-size="12" font-weight="600" fill="#94a3b8" font-family="'JetBrains Mono', monospace">EST. FROM</text>
<text x="24" y="150" font-size="34" font-weight="800" fill="#ffffff">R 119,999</text>
<line x1="24" y1="170" x2="260" y2="170" stroke="#001e30" stroke-width="2" />
<!-- Features list -->
<g transform="translate(24, 195)">
<circle cx="6" cy="6" r="4" fill="#3d98c6" />
<text x="18" y="10" font-size="11" font-weight="500" fill="#cbd5e1">Unlimited Software Scaling</text>
<circle cx="6" cy="32" r="4" fill="#3d98c6" />
<text x="18" y="36" font-size="11" font-weight="500" fill="#cbd5e1">Kubernetes / Docker Rollout</text>
<circle cx="6" cy="58" r="4" fill="#3d98c6" />
<text x="18" y="62" font-size="11" font-weight="500" fill="#cbd5e1">Private Cloud Tunnels</text>
<circle cx="6" cy="84" r="4" fill="#3d98c6" />
<text x="18" y="88" font-size="11" font-weight="500" fill="#cbd5e1">50% Upfront Cost Plan</text>
<circle cx="6" cy="110" r="4" fill="#3d98c6" />
<text x="18" y="114" font-size="11" font-weight="500" fill="#cbd5e1">12-Month Support SLA</text>
</g>
<!-- Terms Badge -->
<rect x="20" y="350" width="245" height="30" rx="8" fill="#001826" />
<text x="32" y="368" font-size="10" font-weight="600" fill="#94a3b8">Legally bound South African Contracts</text>
</g>
</g>
<!-- CTA FOOTER STRIP -->
<g transform="translate(80, 955)">
<!-- Main Strip Base -->
<rect x="0" y="0" width="920" height="65" rx="16" fill="url(#brandGrad)" />
<!-- Left message -->
<text x="24" y="38" font-size="16" font-weight="800" fill="#000a12" letter-spacing="0.5">Let&apos;s Build Your Success Story Today.</text>
<text x="450" y="38" font-size="12" font-weight="600" fill="#00212a">Calculate your real-time budget instantly using our interactive online estimator!</text>
<!-- CTA Button -->
<rect x="750" y="12" width="146" height="40" rx="10" fill="#000a12" />
<text x="823" y="36" font-size="12" font-weight="800" fill="#00bcac" text-anchor="middle">TRY ESTIMATOR</text>
</g>
<!-- LEGAL AND CONTACT BOTTOM META -->
<g transform="translate(80, 1045)" font-size="11" font-weight="500" fill="#64748b">
<text x="0" y="0">Website: <tspan fill="#ffffff">www.litecharms.co.za</tspan></text>
<text x="280" y="0">Inquiries: <tspan fill="#ffffff">contact@litecharms.co.za</tspan></text>
<text x="600" y="0">Registered: <tspan fill="#ffffff">LiteCharms (PTY) Ltd (No. 2020/269438/07)</tspan></text>
<text x="920" y="0" text-anchor="end" font-weight="600" fill="#00bcac">SOUTH AFRICAN LAW COMPLIANT</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

public/ads/story_ad.svg
+183
View File
@@ -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 &amp; 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">&amp; 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 &amp; 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 &amp; 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 &amp; 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>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB