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
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