Initial commit: UK Data Services website

assets/css/main.css

@@ -0,0 +1,948 @@
+/* CSS Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Roboto Slab', 'Lato', sans-serif;
+    line-height: 1.6;
+    color: #444444;
+    background-color: #ffffff;
+}
+
+/* Utility Classes */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.btn {
+    display: inline-block;
+    padding: 14px 28px;
+    border: none;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 16px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary {
+    background: #179e83;
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    background: #11725e;
+    box-shadow: 0 4px 16px rgba(23, 158, 131, 0.3);
+}
+
+.btn-secondary {
+    background: white;
+    color: #144784;
+    border: 2px solid #144784;
+}
+
+.btn-secondary:hover {
+    background: #144784;
+    color: white;
+    transform: translateY(-2px);
+}
+
+.btn-full {
+    width: 100%;
+}
+
+.highlight {
+    background: linear-gradient(135deg, #179e83, #1bbc9b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.section-header h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: #1a1a1a;
+}
+
+.section-header p {
+    font-size: 1.2rem;
+    color: #666;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+/* Navigation */
+.navbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+
+.navbar.scrolled {
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+}
+
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 70px;
+}
+
+.nav-logo img {
+    height: 40px;
+    width: auto;
+}
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+}
+
+.nav-link {
+    text-decoration: none;
+    color: #1a1a1a;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+    color: #144784;
+}
+
+.nav-link.cta-button {
+    background: #179e83;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.nav-link.cta-button:hover {
+    transform: translateY(-2px);
+    background: #11725e;
+    box-shadow: 0 4px 16px rgba(23, 158, 131, 0.3);
+}
+
+.nav-toggle {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+}
+
+.bar {
+    width: 25px;
+    height: 3px;
+    background: #1a1a1a;
+    margin: 3px 0;
+    transition: 0.3s;
+}
+
+/* Hero Section */
+.hero {
+    padding: 120px 0 80px;
+    background: linear-gradient(135deg, #252d3b 0%, #144784 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    color: white;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 50%;
+    height: 100%;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><circle cx="300" cy="200" r="150" fill="%23179e83" opacity="0.1"/><circle cx="350" cy="150" r="100" fill="%23ffffff" opacity="0.05"/><rect x="250" y="180" width="120" height="80" rx="10" fill="%23ffffff" opacity="0.1"/></svg>') no-repeat center;
+    background-size: contain;
+    animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+}
+
+.hero-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+}
+
+.hero-content {
+    animation: fadeInUp 1s ease;
+}
+
+.hero-title {
+    font-size: 3.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-bottom: 24px;
+    color: #ffffff;
+}
+
+.hero-subtitle {
+    font-size: 1.3rem;
+    color: #ffffff;
+    margin-bottom: 40px;
+    line-height: 1.6;
+    opacity: 0.9;
+}
+
+.hero-buttons {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 60px;
+}
+
+.hero-stats {
+    display: flex;
+    gap: 40px;
+}
+
+.stat {
+    text-align: center;
+}
+
+.stat-number {
+    display: block;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #179e83;
+}
+
+.stat-label {
+    display: block;
+    font-size: 0.9rem;
+    color: #ffffff;
+    font-weight: 500;
+    opacity: 0.8;
+}
+
+.hero-image {
+    animation: fadeInRight 1s ease;
+    position: relative;
+    z-index: 2;
+}
+
+.hero-graphic {
+    width: 100%;
+    height: auto;
+    max-width: 500px;
+    animation: float 6s ease-in-out infinite;
+}
+
+.hero-graphic svg {
+    width: 100%;
+    height: auto;
+    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
+}
+
+/* Hero Graphic Animations */
+.hero-graphic .bg-circle-1 {
+    animation: rotate 20s linear infinite;
+    transform-origin: center;
+}
+
+.hero-graphic .bg-circle-2 {
+    animation: rotate 15s linear infinite reverse;
+    transform-origin: center;
+}
+
+.hero-graphic .browser-main {
+    animation: pulse 4s ease-in-out infinite;
+}
+
+.hero-graphic .database {
+    animation: pulse 6s ease-in-out infinite;
+}
+
+.hero-graphic .dashboard {
+    animation: pulse 5s ease-in-out infinite;
+}
+
+.hero-graphic .chart-bar-1 {
+    animation: grow-bar 3s ease-in-out infinite;
+}
+
+.hero-graphic .chart-bar-2 {
+    animation: grow-bar 3s ease-in-out infinite 0.5s;
+}
+
+.hero-graphic .chart-bar-3 {
+    animation: grow-bar 3s ease-in-out infinite 1s;
+}
+
+.hero-graphic .chart-bar-4 {
+    animation: grow-bar 3s ease-in-out infinite 1.5s;
+}
+
+.hero-graphic .chart-bar-5 {
+    animation: grow-bar 3s ease-in-out infinite 2s;
+}
+
+.hero-graphic .extraction-path {
+    stroke-dasharray: 200;
+    stroke-dashoffset: 200;
+    animation: draw-line 4s ease-in-out infinite;
+}
+
+@keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes grow-bar {
+    0%, 100% { transform: scaleY(1); }
+    50% { transform: scaleY(1.3); }
+}
+
+@keyframes draw-line {
+    0% { stroke-dashoffset: 200; }
+    50% { stroke-dashoffset: 0; }
+    100% { stroke-dashoffset: -200; }
+}
+
+@keyframes data-pulse {
+    0%, 100% { opacity: 0.7; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.1); }
+}
+
+.hero-img {
+    width: 100%;
+    height: auto;
+    max-width: 500px;
+}
+
+/* Services Section */
+.services {
+    padding: 100px 0;
+    background: white;
+}
+
+.services-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 30px;
+}
+
+.service-card {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    border: 1px solid #f0f0f0;
+}
+
+.service-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.service-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 24px;
+}
+
+.service-icon img {
+    width: 100%;
+    height: 100%;
+}
+
+.service-card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: #1a1a1a;
+}
+
+.service-card p {
+    color: #666;
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+.service-card ul {
+    list-style: none;
+}
+
+.service-card li {
+    padding: 8px 0;
+    color: #555;
+    position: relative;
+    padding-left: 20px;
+}
+
+.service-card li:before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: #179e83;
+    font-weight: bold;
+}
+
+/* Process Section */
+.process {
+    padding: 100px 0;
+    background: #f8f9fa;
+}
+
+.process-steps {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.step {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 50px;
+    animation: fadeInUp 0.6s ease;
+}
+
+.step:last-child {
+    margin-bottom: 0;
+}
+
+.step-number {
+    background: #179e83;
+    color: white;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.2rem;
+    margin-right: 30px;
+    flex-shrink: 0;
+}
+
+.step-content h3 {
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: #1a1a1a;
+}
+
+.step-content p {
+    color: #666;
+    line-height: 1.6;
+}
+
+/* Why Us Section */
+.why-us {
+    padding: 100px 0;
+    background: white;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 40px;
+}
+
+.feature {
+    text-align: center;
+    padding: 30px;
+    animation: fadeInUp 0.6s ease;
+}
+
+.feature-icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 24px;
+}
+
+.feature-icon img {
+    width: 100%;
+    height: 100%;
+}
+
+.feature h3 {
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: #1a1a1a;
+}
+
+.feature p {
+    color: #666;
+    line-height: 1.6;
+}
+
+/* Contact Section */
+.contact {
+    padding: 100px 0;
+    background: #f8f9fa;
+}
+
+.contact-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: start;
+}
+
+.contact-info h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #1a1a1a;
+}
+
+.contact-info p {
+    font-size: 1.2rem;
+    color: #666;
+    margin-bottom: 40px;
+    line-height: 1.6;
+}
+
+.contact-details {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.contact-item img {
+    width: 40px;
+    height: 40px;
+}
+
+.contact-item strong {
+    display: block;
+    font-weight: 600;
+    color: #1a1a1a;
+    margin-bottom: 4px;
+}
+
+.contact-item p {
+    margin: 0;
+    color: #666;
+}
+
+.contact-item a {
+    color: #179e83;
+    text-decoration: none;
+}
+
+.contact-item a:hover {
+    text-decoration: underline;
+}
+
+/* Form Styles */
+.contact-form {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.form-group {
+    margin-bottom: 24px;
+}
+
+.form-group label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: #1a1a1a;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 14px 16px;
+    border: 2px solid #e1e5e9;
+    border-radius: 8px;
+    font-size: 16px;
+    transition: border-color 0.3s ease;
+    background: white;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #179e83;
+    box-shadow: 0 0 0 3px rgba(23, 158, 131, 0.1);
+}
+
+.form-group textarea {
+    resize: vertical;
+    min-height: 120px;
+}
+
+/* Footer */
+.footer {
+    background: #151f25;
+    color: white;
+    padding: 60px 0 30px;
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: 40px;
+    margin-bottom: 40px;
+}
+
+.footer-section h3 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: white;
+}
+
+.footer-section ul {
+    list-style: none;
+}
+
+.footer-section li {
+    margin-bottom: 12px;
+}
+
+.footer-section a {
+    color: #ccc;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+    color: #179e83;
+}
+
+.footer-logo img {
+    height: 40px;
+    margin-bottom: 20px;
+}
+
+.footer-section p {
+    color: #ccc;
+    line-height: 1.6;
+}
+
+.footer-bottom {
+    border-top: 1px solid #333;
+    padding-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.social-links {
+    display: flex;
+    gap: 20px;
+}
+
+.social-links a {
+    display: block;
+    width: 40px;
+    height: 40px;
+}
+
+.social-links img {
+    width: 100%;
+    height: 100%;
+    filter: invert(1);
+    transition: filter 0.3s ease;
+}
+
+.social-links a:hover img {
+    filter: invert(0.7) sepia(1) saturate(2) hue-rotate(240deg);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+@keyframes slideInFromBottom {
+    from {
+        opacity: 0;
+        transform: translateY(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Animation Classes */
+.animate-on-scroll {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.8s ease-out;
+}
+
+.animate-on-scroll.animated {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.service-card {
+    animation: slideInFromBottom 0.6s ease-out forwards;
+    animation-delay: var(--animation-delay, 0s);
+}
+
+.feature {
+    animation: fadeInUp 0.6s ease-out forwards;
+    animation-delay: var(--animation-delay, 0s);
+}
+
+.step {
+    animation: fadeInLeft 0.6s ease-out forwards;
+    animation-delay: var(--animation-delay, 0s);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .nav-menu {
+        position: fixed;
+        left: -100%;
+        top: 70px;
+        flex-direction: column;
+        background-color: white;
+        width: 100%;
+        text-align: center;
+        transition: 0.3s;
+        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+        padding: 40px 0;
+        gap: 20px;
+    }
+
+    .nav-menu.active {
+        left: 0;
+    }
+
+    .nav-toggle {
+        display: flex;
+    }
+
+    .nav-toggle.active .bar:nth-child(2) {
+        opacity: 0;
+    }
+
+    .nav-toggle.active .bar:nth-child(1) {
+        transform: translateY(8px) rotate(45deg);
+    }
+
+    .nav-toggle.active .bar:nth-child(3) {
+        transform: translateY(-8px) rotate(-45deg);
+    }
+
+    .hero-container {
+        grid-template-columns: 1fr;
+        gap: 40px;
+        text-align: center;
+    }
+
+    .hero-title {
+        font-size: 2.5rem;
+    }
+
+    .hero-buttons {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .hero-stats {
+        justify-content: center;
+        gap: 30px;
+    }
+
+    .section-header h2 {
+        font-size: 2rem;
+    }
+
+    .services-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .contact-content {
+        grid-template-columns: 1fr;
+        gap: 40px;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+        gap: 30px;
+        text-align: center;
+    }
+
+    .footer-bottom {
+        flex-direction: column;
+        gap: 20px;
+        text-align: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 0 15px;
+    }
+
+    .hero {
+        padding: 100px 0 60px;
+    }
+
+    .hero-title {
+        font-size: 2rem;
+    }
+
+    .hero-subtitle {
+        font-size: 1.1rem;
+    }
+
+    .btn {
+        padding: 12px 24px;
+        font-size: 14px;
+    }
+
+    .service-card,
+    .contact-form {
+        padding: 30px 20px;
+    }
+
+    .step {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .step-number {
+        margin: 0 0 20px 0;
+    }
+}
+
+/* Performance Optimizations */
+img {
+    max-width: 100%;
+    height: auto;
+    loading: lazy;
+}
+
+/* Accessibility */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Focus styles for accessibility */
+button:focus,
+input:focus,
+select:focus,
+textarea:focus,
+a:focus {
+    outline: 2px solid #179e83;
+    outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .btn-primary {
+        background: #000;
+        border: 2px solid #000;
+    }
+    
+    .highlight {
+        background: #000;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}

assets/images/dashboard-ecommerce.svg

@@ -0,0 +1,98 @@
+<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="dashGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="chartGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:0.8" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.8" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Dashboard Background -->
+  <rect width="800" height="500" fill="#f8f9fa" rx="12"/>
+  
+  <!-- Header -->
+  <rect x="0" y="0" width="800" height="60" fill="url(#dashGrad1)" rx="12"/>
+  <text x="30" y="35" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600" fill="white">E-commerce Competitor Price Intelligence Dashboard</text>
+  <text x="700" y="35" font-family="Arial" font-size="12" fill="white" opacity="0.8">Live Data</text>
+  
+  <!-- KPI Cards -->
+  <rect x="30" y="90" width="180" height="100" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="50" y="115" font-family="Arial" font-size="12" fill="#666">Total Products Monitored</text>
+  <text x="50" y="140" font-family="Arial" font-size="32" font-weight="700" fill="url(#dashGrad1)">10,247</text>
+  <text x="50" y="165" font-family="Arial" font-size="10" fill="#28a745">↑ 5.2% vs last week</text>
+  
+  <rect x="230" y="90" width="180" height="100" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="250" y="115" font-family="Arial" font-size="12" fill="#666">Price Changes Today</text>
+  <text x="250" y="140" font-family="Arial" font-size="32" font-weight="700" fill="url(#dashGrad1)">1,234</text>
+  <text x="250" y="165" font-family="Arial" font-size="10" fill="#e74c3c">↑ 12.8% vs yesterday</text>
+  
+  <rect x="430" y="90" width="180" height="100" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="450" y="115" font-family="Arial" font-size="12" fill="#666">Avg Price Difference</text>
+  <text x="450" y="140" font-family="Arial" font-size="32" font-weight="700" fill="url(#dashGrad1)">-£2.34</text>
+  <text x="450" y="165" font-family="Arial" font-size="10" fill="#28a745">Competitive advantage</text>
+  
+  <rect x="630" y="90" width="140" height="100" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="650" y="115" font-family="Arial" font-size="12" fill="#666">Market Position</text>
+  <text x="650" y="140" font-family="Arial" font-size="32" font-weight="700" fill="url(#dashGrad1)">#3</text>
+  <text x="650" y="165" font-family="Arial" font-size="10" fill="#ffc107">of 15 competitors</text>
+  
+  <!-- Price Trend Chart -->
+  <rect x="30" y="220" width="370" height="250" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="50" y="245" font-family="Arial" font-size="14" font-weight="600" fill="#333">Price Trends - Last 30 Days</text>
+  
+  <!-- Chart Lines -->
+  <polyline points="60,420 100,400 140,390 180,385 220,380 260,375 300,370 340,365 380,360" 
+            stroke="#667eea" stroke-width="3" fill="none"/>
+  <polyline points="60,430 100,425 140,420 180,415 220,410 260,405 300,400 340,395 380,390" 
+            stroke="#e74c3c" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
+  <polyline points="60,440 100,438 140,435 180,430 220,425 260,420 300,415 340,410 380,405" 
+            stroke="#28a745" stroke-width="2" fill="none" stroke-dasharray="3,3"/>
+  
+  <!-- Legend -->
+  <rect x="60" y="260" width="10" height="3" fill="#667eea"/>
+  <text x="75" y="268" font-family="Arial" font-size="10" fill="#666">Your Prices</text>
+  <rect x="140" y="260" width="10" height="3" fill="#e74c3c"/>
+  <text x="155" y="268" font-family="Arial" font-size="10" fill="#666">Competitor A</text>
+  <rect x="220" y="260" width="10" height="3" fill="#28a745"/>
+  <text x="235" y="268" font-family="Arial" font-size="10" fill="#666">Market Average</text>
+  
+  <!-- Top Competitors Table -->
+  <rect x="420" y="220" width="350" height="250" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="440" y="245" font-family="Arial" font-size="14" font-weight="600" fill="#333">Top Competitors by Volume</text>
+  
+  <!-- Table Headers -->
+  <text x="440" y="270" font-family="Arial" font-size="11" font-weight="600" fill="#666">Competitor</text>
+  <text x="580" y="270" font-family="Arial" font-size="11" font-weight="600" fill="#666">Avg Price</text>
+  <text x="680" y="270" font-family="Arial" font-size="11" font-weight="600" fill="#666">Change</text>
+  
+  <!-- Table Rows -->
+  <text x="440" y="295" font-family="Arial" font-size="11" fill="#333">Amazon UK</text>
+  <text x="580" y="295" font-family="Arial" font-size="11" fill="#333">£24.99</text>
+  <text x="680" y="295" font-family="Arial" font-size="11" fill="#e74c3c">+2.1%</text>
+  
+  <text x="440" y="320" font-family="Arial" font-size="11" fill="#333">John Lewis</text>
+  <text x="580" y="320" font-family="Arial" font-size="11" fill="#333">£27.50</text>
+  <text x="680" y="320" font-family="Arial" font-size="11" fill="#28a745">-1.5%</text>
+  
+  <text x="440" y="345" font-family="Arial" font-size="11" fill="#333">Next</text>
+  <text x="580" y="345" font-family="Arial" font-size="11" fill="#333">£23.99</text>
+  <text x="680" y="345" font-family="Arial" font-size="11" fill="#ffc107">0.0%</text>
+  
+  <text x="440" y="370" font-family="Arial" font-size="11" fill="#333">ASOS</text>
+  <text x="580" y="370" font-family="Arial" font-size="11" fill="#333">£22.75</text>
+  <text x="680" y="370" font-family="Arial" font-size="11" fill="#e74c3c">+5.2%</text>
+  
+  <text x="440" y="395" font-family="Arial" font-size="11" fill="#333">Zara</text>
+  <text x="580" y="395" font-family="Arial" font-size="11" fill="#333">£29.99</text>
+  <text x="680" y="395" font-family="Arial" font-size="11" fill="#28a745">-3.1%</text>
+  
+  <!-- Status Indicators -->
+  <circle cx="760" cy="30" r="5" fill="#28a745"/>
+  <text x="680" y="35" font-family="Arial" font-size="10" fill="white" opacity="0.8">Data Fresh</text>
+  
+  <!-- Timestamp -->
+  <text x="30" y="490" font-family="Arial" font-size="10" fill="#999">Last updated: Today 14:23 GMT | Data sources: 15 competitors | Update frequency: Real-time</text>
+</svg>

assets/images/dashboard-financial.svg

@@ -0,0 +1,132 @@
+<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="finGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Dashboard Background -->
+  <rect width="800" height="500" fill="#f8f9fa" rx="12"/>
+  
+  <!-- Header -->
+  <rect x="0" y="0" width="800" height="60" fill="url(#finGrad)" rx="12"/>
+  <text x="30" y="35" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600" fill="white">Financial Market Intelligence Dashboard</text>
+  <text x="650" y="35" font-family="Arial" font-size="12" fill="white" opacity="0.8">Real-time Analytics</text>
+  
+  <!-- Market Sentiment -->
+  <rect x="30" y="90" width="200" height="120" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="50" y="115" font-family="Arial" font-size="14" font-weight="600" fill="#333">Market Sentiment</text>
+  
+  <!-- Sentiment gauge -->
+  <circle cx="130" cy="160" r="35" fill="none" stroke="#e1e5e9" stroke-width="8"/>
+  <circle cx="130" cy="160" r="35" fill="none" stroke="#28a745" stroke-width="8" 
+          stroke-dasharray="110 220" stroke-dashoffset="55" transform="rotate(-90 130 160)"/>
+  <text x="130" y="167" font-family="Arial" font-size="16" font-weight="700" fill="#28a745" text-anchor="middle">72%</text>
+  <text x="130" y="185" font-family="Arial" font-size="10" fill="#666" text-anchor="middle">Bullish</text>
+  
+  <!-- News Analytics -->
+  <rect x="250" y="90" width="260" height="120" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="270" y="115" font-family="Arial" font-size="14" font-weight="600" fill="#333">News Analytics - Last 24h</text>
+  
+  <!-- News bars -->
+  <rect x="280" y="130" width="60" height="30" fill="#28a745" rx="2"/>
+  <text x="310" y="150" font-family="Arial" font-size="10" fill="white" text-anchor="middle">142</text>
+  <text x="310" y="175" font-family="Arial" font-size="9" fill="#666" text-anchor="middle">Positive</text>
+  
+  <rect x="350" y="135" width="60" height="25" fill="#ffc107" rx="2"/>
+  <text x="380" y="152" font-family="Arial" font-size="10" fill="white" text-anchor="middle">89</text>
+  <text x="380" y="175" font-family="Arial" font-size="9" fill="#666" text-anchor="middle">Neutral</text>
+  
+  <rect x="420" y="145" width="60" height="15" fill="#e74c3c" rx="2"/>
+  <text x="450" y="156" font-family="Arial" font-size="10" fill="white" text-anchor="middle">34</text>
+  <text x="450" y="175" font-family="Arial" font-size="9" fill="#666" text-anchor="middle">Negative</text>
+  
+  <!-- Social Media Trends -->
+  <rect x="530" y="90" width="240" height="120" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="550" y="115" font-family="Arial" font-size="14" font-weight="600" fill="#333">Social Media Trends</text>
+  
+  <text x="550" y="140" font-family="Arial" font-size="11" fill="#333">#1 Trending: $NVDA</text>
+  <text x="700" y="140" font-family="Arial" font-size="10" fill="#28a745">+15.2K mentions</text>
+  
+  <text x="550" y="160" font-family="Arial" font-size="11" fill="#333">#2 Trending: $TSLA</text>
+  <text x="700" y="160" font-family="Arial" font-size="10" fill="#e74c3c">-8.7K mentions</text>
+  
+  <text x="550" y="180" font-family="Arial" font-size="11" fill="#333">#3 Trending: $AAPL</text>
+  <text x="700" y="180" font-family="Arial" font-size="10" fill="#28a745">+12.1K mentions</text>
+  
+  <!-- Price Movement Predictions -->
+  <rect x="30" y="230" width="370" height="240" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="50" y="255" font-family="Arial" font-size="14" font-weight="600" fill="#333">Price Movement Predictions</text>
+  
+  <!-- Stock prediction chart -->
+  <text x="50" y="280" font-family="Arial" font-size="12" font-weight="600" fill="#667eea">FTSE 100 - Next 5 Days</text>
+  
+  <!-- Chart area -->
+  <line x1="60" y1="430" x2="380" y2="430" stroke="#e1e5e9" stroke-width="1"/>
+  <line x1="60" y1="300" x2="60" y2="430" stroke="#e1e5e9" stroke-width="1"/>
+  
+  <!-- Prediction line -->
+  <polyline points="60,420 120,410 180,405 240,400 300,395 360,390" 
+            stroke="#667eea" stroke-width="3" fill="none"/>
+  
+  <!-- Confidence band -->
+  <polyline points="60,425 120,415 180,410 240,408 300,405 360,400" 
+            stroke="#667eea" stroke-width="1" fill="none" opacity="0.5" stroke-dasharray="2,2"/>
+  <polyline points="60,415 120,405 180,400 240,392 300,385 360,380" 
+            stroke="#667eea" stroke-width="1" fill="none" opacity="0.5" stroke-dasharray="2,2"/>
+  
+  <!-- Axis labels -->
+  <text x="40" y="425" font-family="Arial" font-size="8" fill="#666">7800</text>
+  <text x="40" y="395" font-family="Arial" font-size="8" fill="#666">7900</text>
+  <text x="40" y="365" font-family="Arial" font-size="8" fill="#666">8000</text>
+  
+  <text x="60" y="445" font-family="Arial" font-size="8" fill="#666">Mon</text>
+  <text x="180" y="445" font-family="Arial" font-size="8" fill="#666">Wed</text>
+  <text x="300" y="445" font-family="Arial" font-size="8" fill="#666">Fri</text>
+  
+  <!-- Model accuracy -->
+  <text x="50" y="385" font-family="Arial" font-size="10" fill="#28a745">Accuracy: 84.7% | Confidence: High</text>
+  
+  <!-- Alternative Data Sources -->
+  <rect x="420" y="230" width="350" height="240" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
+  <text x="440" y="255" font-family="Arial" font-size="14" font-weight="600" fill="#333">Alternative Data Sources</text>
+  
+  <!-- Data source status -->
+  <text x="440" y="280" font-family="Arial" font-size="12" font-weight="600" fill="#333">Real-time Feeds</text>
+  
+  <circle cx="450" cy="300" r="3" fill="#28a745"/>
+  <text x="460" y="305" font-family="Arial" font-size="11" fill="#333">Reuters News API</text>
+  <text x="680" y="305" font-family="Arial" font-size="10" fill="#28a745">Active</text>
+  
+  <circle cx="450" cy="320" r="3" fill="#28a745"/>
+  <text x="460" y="325" font-family="Arial" font-size="11" fill="#333">Twitter Financial</text>
+  <text x="680" y="325" font-family="Arial" font-size="10" fill="#28a745">Active</text>
+  
+  <circle cx="450" cy="340" r="3" fill="#28a745"/>
+  <text x="460" y="345" font-family="Arial" font-size="11" fill="#333">Reddit WSB</text>
+  <text x="680" y="345" font-family="Arial" font-size="10" fill="#28a745">Active</text>
+  
+  <circle cx="450" cy="360" r="3" fill="#ffc107"/>
+  <text x="460" y="365" font-family="Arial" font-size="11" fill="#333">Google Trends</text>
+  <text x="680" y="365" font-family="Arial" font-size="10" fill="#ffc107">Delayed</text>
+  
+  <circle cx="450" cy="380" r="3" fill="#28a745"/>
+  <text x="460" y="385" font-family="Arial" font-size="11" fill="#333">Economic Calendar</text>
+  <text x="680" y="385" font-family="Arial" font-size="10" fill="#28a745">Active</text>
+  
+  <!-- Performance metrics -->
+  <text x="440" y="415" font-family="Arial" font-size="12" font-weight="600" fill="#333">Today's Performance</text>
+  
+  <text x="440" y="435" font-family="Arial" font-size="10" fill="#666">Data Points Processed:</text>
+  <text x="680" y="435" font-family="Arial" font-size="10" font-weight="600" fill="#667eea">1.2M</text>
+  
+  <text x="440" y="450" font-family="Arial" font-size="10" fill="#666">Signals Generated:</text>
+  <text x="680" y="450" font-family="Arial" font-size="10" font-weight="600" fill="#28a745">47</text>
+  
+  <!-- Status indicator -->
+  <circle cx="760" cy="30" r="5" fill="#28a745"/>
+  
+  <!-- Timestamp -->
+  <text x="30" y="490" font-family="Arial" font-size="10" fill="#999">Last updated: Today 15:42 GMT | Data latency: &lt;2ms | Model accuracy: 84.7% | Sources: 12 active</text>
+</svg>

assets/images/dashboard-property.svg

@@ -0,0 +1,112 @@
+<svg width="800" height="500" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="headerGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="cardGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#f8f9ff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" />
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000000" flood-opacity="0.1"/>
+    </filter>
+  </defs>
+  
+  <!-- Main Background -->
+  <rect width="800" height="500" fill="#f5f7fa" rx="12"/>
+  
+  <!-- Header Bar -->
+  <rect x="0" y="0" width="800" height="60" fill="url(#headerGrad)" rx="12"/>
+  <rect x="0" y="48" width="800" height="12" fill="url(#headerGrad)"/>
+  
+  <!-- Header Content -->
+  <text x="24" y="32" font-family="Inter, -apple-system, sans-serif" font-size="20" font-weight="700" fill="white">Property Investment Dashboard</text>
+  <text x="24" y="48" font-family="Inter, -apple-system, sans-serif" font-size="12" font-weight="400" fill="rgba(255,255,255,0.8)">Real-time market intelligence & investment opportunities</text>
+  
+  <!-- Status Indicator -->
+  <circle cx="720" cy="25" r="6" fill="#00ff88"/>
+  <text x="735" y="30" font-family="Inter, -apple-system, sans-serif" font-size="12" font-weight="600" fill="white">LIVE</text>
+  
+  <!-- Refresh Icon -->
+  <circle cx="760" cy="25" r="12" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
+  <path d="M 755 20 A 5 5 0 1 1 765 20 M 765 18 L 767 20 L 765 22" stroke="white" stroke-width="1.5" fill="none"/>
+  
+  <!-- Market Overview Section -->
+  <rect x="20" y="80" width="360" height="180" fill="white" stroke="#e2e8f0" stroke-width="1" rx="8" filter="url(#shadow)"/>
+  <rect x="20" y="80" width="360" height="40" fill="url(#cardGrad)" rx="8"/>
+  <rect x="20" y="112" width="360" height="8" fill="url(#cardGrad)"/>
+  
+  <text x="32" y="100" font-family="Inter, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#1e293b">London Investment Hotspots</text>
+  <text x="32" y="115" font-family="Inter, -apple-system, sans-serif" font-size="11" fill="#64748b">Price growth & opportunity analysis</text>
+  
+  <!-- Map Area -->
+  <rect x="32" y="130" width="200" height="120" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" rx="4"/>
+  
+  <!-- Simplified London Map -->
+  <path d="M 80 160 Q 100 150 120 155 Q 140 160 160 155 Q 180 150 200 160 Q 210 180 200 200 Q 180 210 160 205 Q 140 200 120 205 Q 100 210 80 200 Q 70 180 80 160 Z" 
+        fill="#ddd6fe" stroke="#8b5cf6" stroke-width="1"/>
+  
+  <!-- Location Markers -->
+  <circle cx="120" cy="175" r="8" fill="#ef4444"/>
+  <text x="116" y="180" font-family="Inter, -apple-system, sans-serif" font-size="10" font-weight="700" fill="white">1</text>
+  
+  <circle cx="160" cy="185" r="6" fill="#f59e0b"/>
+  <text x="157" y="189" font-family="Inter, -apple-system, sans-serif" font-size="9" font-weight="700" fill="white">2</text>
+  
+  <circle cx="140" cy="200" r="5" fill="#10b981"/>
+  <text x="138" y="204" font-family="Inter, -apple-system, sans-serif" font-size="8" font-weight="700" fill="white">3</text>
+  
+  <!-- Legend -->
+  <rect x="250" y="140" width="120" height="90" fill="#fafbfc" stroke="#e2e8f0" stroke-width="1" rx="4"/>
+  <text x="260" y="155" font-family="Inter, -apple-system, sans-serif" font-size="12" font-weight="600" fill="#334155">Growth Zones</text>
+  
+  <circle cx="265" cy="170" r="4" fill="#ef4444"/>
+  <text x="275" y="174" font-family="Inter, -apple-system, sans-serif" font-size="10" fill="#475569">High (>15%)</text>
+  
+  <circle cx="265" cy="185" r="4" fill="#f59e0b"/>
+  <text x="275" y="189" font-family="Inter, -apple-system, sans-serif" font-size="10" fill="#475569">Medium (8-15%)</text>
+  
+  <circle cx="265" cy="200" r="4" fill="#10b981"/>
+  <text x="275" y="204" font-family="Inter, -apple-system, sans-serif" font-size="10" fill="#475569">Emerging (<8%)</text>
+  
+  <text x="260" y="220" font-family="Inter, -apple-system, sans-serif" font-size="9" font-weight="500" fill="#10b981">📈 156 opportunities</text>
+  
+  <!-- Top Opportunities Section -->
+  <rect x="400" y="80" width="380" height="180" fill="white" stroke="#e2e8f0" stroke-width="1" rx="8" filter="url(#shadow)"/>
+  <rect x="400" y="80" width="380" height="40" fill="url(#cardGrad)" rx="8"/>
+  <rect x="400" y="112" width="380" height="8" fill="url(#cardGrad)"/>
+  
+  <text x="412" y="100" font-family="Inter, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#1e293b">Investment Opportunities</text>
+  <text x="412" y="115" font-family="Inter, -apple-system, sans-serif" font-size="11" fill="#64748b">AI-ranked by potential ROI</text>
+  
+  <!-- Property Cards -->
+  <rect x="412" y="130" width="175" height="55" fill="#fefefe" stroke="#667eea" stroke-width="1" rx="6"/>
+  <rect x="412" y="130" width="175" height="20" fill="url(#headerGrad)" rx="6"/>
+  <rect x="412" y="144" width="175" height="6" fill="url(#headerGrad)"/>
+  
+  <text x="420" y="143" font-family="Inter, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white">3 Bed House • SE1 4AA</text>
+  <text x="420" y="165" font-family="Inter, -apple-system, sans-serif" font-size="13" font-weight="700" fill="#1e293b">£485,000</text>
+  <text x="420" y="178" font-family="Inter, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#059669">ROI: 12.3% • Score: 9.2/10</text>
+  
+  <rect x="595" y="130" width="175" height="55" fill="#fefefe" stroke="#667eea" stroke-width="1" rx="6"/>
+  <rect x="595" y="130" width="175" height="20" fill="url(#headerGrad)" rx="6"/>
+  <rect x="595" y="144" width="175" height="6" fill="url(#headerGrad)"/>
+  
+  <text x="603" y="143" font-family="Inter, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white">2 Bed Flat • E14 9SN</text>
+  <text x="603" y="165" font-family="Inter, -apple-system, sans-serif" font-size="13" font-weight="700" fill="#1e293b">£325,000</text>
+  <text x="603" y="178" font-family="Inter, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#059669">ROI: 11.8% • Score: 8.9/10</text>
+  
+  <rect x="412" y="195" width="175" height="55" fill="#fefefe" stroke="#667eea" stroke-width="1" rx="6"/>
+  <rect x="412" y="195" width="175" height="20" fill="url(#headerGrad)" rx="6"/>
+  <rect x="412" y="209" width="175" height="6" fill="url(#headerGrad)"/>
+  
+  <text x="420" y="208" font-family="Inter, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white">1 Bed Flat • SW3 6LB</text>
+  <text x="420" y="230" font-family="Inter, -apple-system, sans-serif" font-size="13" font-weight="700" fill="#1e293b">£625,000</text>
+  <text x="420" y="243" font-family="Inter, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#059669">ROI: 9.2% • Score: 8.1/10</text>
+  
+  <rect x="595" y="195" width="175" height="55" fill="#fefefe" stroke="#667eea" stroke-width="1" rx="6"/>
+  <rect x="595" y="195" width="175" height="20" fill="url(#headerGrad)" rx="6"/>
+  <rect x="595" y="209" width="175" height="6" fill="url(#headerGrad)"/>
+  
+  <text x="603" y="208" font-family="Inter, -apple-

assets/images/favicon.svg

@@ -0,0 +1,15 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="faviconGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Favicon background -->
+  <rect width="32" height="32" fill="url(#faviconGrad)" rx="6"/>
+  <!-- UK initials -->
+  <text x="16" y="22" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">UK</text>
+  <!-- Data symbol -->
+  <rect x="6" y="6" width="20" height="2" fill="white" opacity="0.8" rx="1"/>
+  <rect x="8" y="9" width="16" height="1" fill="white" opacity="0.6" rx="0.5"/>
+</svg>

assets/images/hero-data-analytics.svg

@@ -0,0 +1,27 @@
+<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:0.8" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.8" />
+    </linearGradient>
+  </defs>
+  <!-- Dashboard background -->
+  <rect x="50" y="50" width="400" height="300" fill="white" stroke="#e1e5e9" stroke-width="2" rx="16"/>
+  
+  <!-- Charts and graphs -->
+  <rect x="80" y="80" width="150" height="100" fill="url(#heroGrad)" rx="8" opacity="0.3"/>
+  <rect x="250" y="80" width="150" height="60" fill="url(#heroGrad)" rx="8" opacity="0.5"/>
+  <rect x="250" y="160" width="150" height="60" fill="url(#heroGrad)" rx="8" opacity="0.4"/>
+  
+  <!-- Data points -->
+  <circle cx="120" cy="130" r="4" fill="#667eea"/>
+  <circle cx="160" cy="110" r="4" fill="#764ba2"/>
+  <circle cx="200" cy="140" r="4" fill="#667eea"/>
+  
+  <!-- Lines connecting data points -->
+  <line x1="120" y1="130" x2="160" y2="110" stroke="#667eea" stroke-width="2"/>
+  <line x1="160" y1="110" x2="200" y2="140" stroke="#667eea" stroke-width="2"/>
+  
+  <!-- Title -->
+  <text x="250" y="30" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="600" fill="#1a1a1a" text-anchor="middle">Data Analytics</text>
+</svg>

assets/images/icon-accuracy.svg

@@ -0,0 +1,21 @@
+<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="accuracyGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Target circles -->
+  <circle cx="40" cy="40" r="25" fill="none" stroke="url(#accuracyGrad)" stroke-width="2" opacity="0.3"/>
+  <circle cx="40" cy="40" r="18" fill="none" stroke="url(#accuracyGrad)" stroke-width="2" opacity="0.5"/>
+  <circle cx="40" cy="40" r="11" fill="none" stroke="url(#accuracyGrad)" stroke-width="2" opacity="0.7"/>
+  <!-- Bullseye center -->
+  <circle cx="40" cy="40" r="4" fill="url(#accuracyGrad)"/>
+  <!-- Arrow hitting center -->
+  <path d="M 20 20 L 36 36" stroke="url(#accuracyGrad)" stroke-width="3" marker-end="url(#accuracyArrow)"/>
+  <defs>
+    <marker id="accuracyArrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#667eea"/>
+    </marker>
+  </defs>
+</svg>

assets/images/icon-automation.svg

@@ -0,0 +1,26 @@
+<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Workflow boxes -->
+  <rect x="8" y="20" width="12" height="8" fill="url(#grad4)" rx="2"/>
+  <rect x="24" y="15" width="12" height="8" fill="url(#grad4)" rx="2"/>
+  <rect x="40" y="20" width="12" height="8" fill="url(#grad4)" rx="2"/>
+  <!-- Connecting arrows -->
+  <path d="M 20 24 L 24 19" stroke="url(#grad4)" stroke-width="2" marker-end="url(#arrowhead2)"/>
+  <path d="M 36 19 L 40 24" stroke="url(#grad4)" stroke-width="2" marker-end="url(#arrowhead2)"/>
+  <defs>
+    <marker id="arrowhead2" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
+      <polygon points="0 0, 8 3, 0 6" fill="#667eea"/>
+    </marker>
+  </defs>
+  <!-- API/automation symbols -->
+  <circle cx="14" cy="40" r="3" fill="url(#grad4)"/>
+  <circle cx="30" cy="40" r="3" fill="url(#grad4)"/>
+  <circle cx="46" cy="40" r="3" fill="url(#grad4)"/>
+  <line x1="17" y1="40" x2="27" y2="40" stroke="url(#grad4)" stroke-width="2"/>
+  <line x1="33" y1="40" x2="43" y2="40" stroke="url(#grad4)" stroke-width="2"/>
+</svg>

assets/images/icon-business-intelligence.svg

@@ -0,0 +1,18 @@
+<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Chart bars -->
+  <rect x="15" y="35" width="8" height="15" fill="url(#grad2)" rx="2"/>
+  <rect x="25" y="25" width="8" height="25" fill="url(#grad2)" rx="2"/>
+  <rect x="35" y="20" width="8" height="30" fill="url(#grad2)" rx="2"/>
+  <!-- Trend line -->
+  <polyline points="19,42 29,32 39,27" stroke="#667eea" stroke-width="2" fill="none"/>
+  <!-- Data points -->
+  <circle cx="19" cy="42" r="2" fill="#764ba2"/>
+  <circle cx="29" cy="32" r="2" fill="#764ba2"/>
+  <circle cx="39" cy="27" r="2" fill="#764ba2"/>
+</svg>

assets/images/icon-compliance-check.svg

@@ -0,0 +1,25 @@
+<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="complianceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Document/certificate -->
+  <rect x="20" y="15" width="40" height="50" fill="white" stroke="url(#complianceGrad)" stroke-width="2" rx="4"/>
+  
+  <!-- GDPR badge -->
+  <circle cx="40" cy="30" r="8" fill="url(#complianceGrad)"/>
+  <text x="40" y="27" font-family="Arial" font-size="6" fill="white" text-anchor="middle" font-weight="bold">GDPR</text>
+  <text x="40" y="34" font-family="Arial" font-size="4" fill="white" text-anchor="middle">COMPLIANT</text>
+  
+  <!-- Checkmarks -->
+  <polyline points="25,45 28,48 35,41" stroke="url(#complianceGrad)" stroke-width="2" fill="none"/>
+  <polyline points="25,55 28,58 35,51" stroke="url(#complianceGrad)" stroke-width="2" fill="none"/>
+  
+  <!-- Legal scales -->
+  <line x1="45" y1="45" x2="55" y2="45" stroke="url(#complianceGrad)" stroke-width="2"/>
+  <line x1="50" y1="40" x2="50" y2="45" stroke="url(#complianceGrad)" stroke-width="2"/>
+  <circle cx="47" cy="47" r="2" fill="none" stroke="url(#complianceGrad)" stroke-width="1.5"/>
+  <circle cx="53" cy="47" r="2" fill="none" stroke="url(#complianceGrad)" stroke-width="1.5"/>
+</svg>

assets/images/icon-compliance.svg

@@ -0,0 +1,15 @@
+<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad5" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Shield shape -->
+  <path d="M 30 10 L 20 15 L 20 35 Q 20 45 30 50 Q 40 45 40 35 L 40 15 Z" fill="url(#grad5)"/>
+  <!-- Lock icon inside -->
+  <rect x="26" y="28" width="8" height="6" fill="white" rx="1"/>
+  <path d="M 28 28 L 28 25 Q 28 23 30 23 Q 32 23 32 25 L 32 28" fill="none" stroke="white" stroke-width="1.5"/>
+  <!-- Checkmark -->
+  <polyline points="25,20 28,23 35,16" stroke="white" stroke-width="2" fill="none"/>
+</svg>

assets/images/icon-consulting.svg

@@ -0,0 +1,18 @@
+<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad6" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Person icon -->
+  <circle cx="25" cy="18" r="4" fill="url(#grad6)"/>
+  <path d="M 17 35 Q 17 28 25 28 Q 33 28 33 35 L 33 40 L 17 40 Z" fill="url(#grad6)"/>
+  <!-- Speech bubble/consulting -->
+  <ellipse cx="40" cy="25" rx="8" ry="6" fill="none" stroke="url(#grad6)" stroke-width="2"/>
+  <path d="M 35 28 L 32 32 L 35 30 Z" fill="url(#grad6)"/>
+  <!-- Chart/strategy lines inside bubble -->
+  <line x1="37" y1="23" x2="43" y2="23" stroke="url(#grad6)" stroke-width="1"/>
+  <line x1="37" y1="25" x2="41" y2="25" stroke="url(#grad6)" stroke-width="1"/>
+  <line x1="37" y1="27" x2="43" y2="27" stroke="url(#grad6)" stroke-width="1"/>
+</svg>

assets/images/icon-data-processing.svg

@@ -0,0 +1,28 @@
+<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Database/file icons -->
+  <rect x="12" y="15" width="16" height="20" fill="none" stroke="url(#grad3)" stroke-width="2" rx="2"/>
+  <rect x="32" y="15" width="16" height="20" fill="none" stroke="url(#grad3)" stroke-width="2" rx="2"/>
+  <!-- Data lines inside -->
+  <line x1="15" y1="20" x2="25" y2="20" stroke="url(#grad3)" stroke-width="1"/>
+  <line x1="15" y1="25" x2="25" y2="25" stroke="url(#grad3)" stroke-width="1"/>
+  <line x1="15" y1="30" x2="25" y2="30" stroke="url(#grad3)" stroke-width="1"/>
+  <line x1="35" y1="20" x2="45" y2="20" stroke="url(#grad3)" stroke-width="1"/>
+  <line x1="35" y1="25" x2="45" y2="25" stroke="url(#grad3)" stroke-width="1"/>
+  <line x1="35" y1="30" x2="45" y2="30" stroke="url(#grad3)" stroke-width="1"/>
+  <!-- Processing arrow -->
+  <path d="M 28 25 L 32 25" stroke="url(#grad3)" stroke-width="2" marker-end="url(#arrowhead)"/>
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#667eea"/>
+    </marker>
+  </defs>
+  <!-- Gear/processing icon -->
+  <circle cx="30" cy="40" r="6" fill="none" stroke="url(#grad3)" stroke-width="2"/>
+  <circle cx="30" cy="40" r="2" fill="url(#grad3)"/>
+</svg>

assets/images/icon-email.svg

@@ -0,0 +1,15 @@
+<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="emailGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Envelope -->
+  <rect x="6" y="12" width="28" height="18" fill="url(#emailGrad)" rx="2"/>
+  <!-- Envelope flap -->
+  <path d="M 6 12 L 20 22 L 34 12" stroke="white" stroke-width="2" fill="none"/>
+  <!-- @ symbol inside -->
+  <circle cx="20" cy="21" r="3" fill="none" stroke="white" stroke-width="1"/>
+  <circle cx="22" cy="21" r="1" fill="white"/>
+</svg>

assets/images/icon-linkedin.svg

@@ -0,0 +1,16 @@
+<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="linkedinGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- LinkedIn background -->
+  <rect x="4" y="4" width="32" height="32" fill="url(#linkedinGrad)" rx="6"/>
+  <!-- LinkedIn "in" -->
+  <rect x="9" y="16" width="3" height="12" fill="white"/>
+  <circle cx="10.5" cy="12" r="1.5" fill="white"/>
+  <rect x="15" y="16" width="3" height="12" fill="white"/>
+  <rect x="19" y="20" width="3" height="8" fill="white"/>
+  <path d="M 19 20 Q 19 18 21 18 Q 23 18 23 20 L 23 28 L 26 28 L 26 19 Q 26 16 23 16 Q 20 16 19 18" fill="white"/>
+</svg>

assets/images/icon-location.svg

@@ -0,0 +1,15 @@
+<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="locationGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Location pin -->
+  <path d="M 20 8 Q 14 8 14 14 Q 14 20 20 28 Q 26 20 26 14 Q 26 8 20 8 Z" fill="url(#locationGrad)"/>
+  <!-- Center dot -->
+  <circle cx="20" cy="14" r="3" fill="white"/>
+  <!-- UK flag pattern -->
+  <line x1="19" y1="13" x2="21" y2="15" stroke="#e74c3c" stroke-width="0.5"/>
+  <line x1="21" y1="13" x2="19" y2="15" stroke="#e74c3c" stroke-width="0.5"/>
+</svg>

assets/images/icon-phone.svg

@@ -0,0 +1,16 @@
+<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="phoneGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Phone body -->
+  <rect x="12" y="8" width="16" height="24" fill="url(#phoneGrad)" rx="3"/>
+  <!-- Screen -->
+  <rect x="14" y="12" width="12" height="16" fill="white" rx="1"/>
+  <!-- Speaker -->
+  <rect x="16" y="10" width="8" height="1" fill="white" rx="0.5"/>
+  <!-- Home button -->
+  <circle cx="20" cy="30" r="1" fill="white"/>
+</svg>

assets/images/icon-scalability.svg

@@ -0,0 +1,26 @@
+<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="scaleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Expanding boxes representing scalability -->
+  <rect x="30" y="50" width="20" height="15" fill="url(#scaleGrad)" rx="2" opacity="0.8"/>
+  <rect x="20" y="35" width="40" height="20" fill="none" stroke="url(#scaleGrad)" stroke-width="2" rx="2" opacity="0.6"/>
+  <rect x="10" y="20" width="60" height="25" fill="none" stroke="url(#scaleGrad)" stroke-width="2" rx="2" opacity="0.4"/>
+  
+  <!-- Upward arrows -->
+  <path d="M 25 30 L 30 25 L 35 30" stroke="url(#scaleGrad)" stroke-width="2" fill="none" marker-end="url(#scaleArrow)"/>
+  <path d="M 45 30 L 50 25 L 55 30" stroke="url(#scaleGrad)" stroke-width="2" fill="none" marker-end="url(#scaleArrow)"/>
+  
+  <!-- Infinity symbol -->
+  <path d="M 25 60 Q 30 55 35 60 Q 40 65 45 60 Q 50 55 55 60 Q 50 65 45 60 Q 40 55 35 60 Q 30 65 25 60" 
+        fill="none" stroke="url(#scaleGrad)" stroke-width="2"/>
+  
+  <defs>
+    <marker id="scaleArrow" markerWidth="8" markerHeight="8" refX="7" refY="2" orient="auto">
+      <polygon points="0 0, 8 2, 0 4" fill="#667eea"/>
+    </marker>
+  </defs>
+</svg>

assets/images/icon-security.svg

@@ -0,0 +1,17 @@
+<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="securityGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Shield -->
+  <path d="M 40 10 L 25 18 L 25 45 Q 25 60 40 65 Q 55 60 55 45 L 55 18 Z" fill="url(#securityGrad)"/>
+  <!-- Lock inside shield -->
+  <rect x="35" y="40" width="10" height="8" fill="white" rx="1"/>
+  <path d="M 37 40 L 37 35 Q 37 32 40 32 Q 43 32 43 35 L 43 40" fill="none" stroke="white" stroke-width="2"/>
+  <!-- Security patterns -->
+  <circle cx="40" cy="25" r="2" fill="white" opacity="0.8"/>
+  <circle cx="35" cy="30" r="1.5" fill="white" opacity="0.6"/>
+  <circle cx="45" cy="30" r="1.5" fill="white" opacity="0.6"/>
+</svg>

assets/images/icon-speed.svg

@@ -0,0 +1,17 @@
+<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="speedGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Lightning bolt -->
+  <path d="M 35 15 L 25 35 L 35 35 L 30 55 L 50 30 L 40 30 L 45 15 Z" fill="url(#speedGrad)"/>
+  <!-- Speed lines -->
+  <line x1="15" y1="25" x2="25" y2="25" stroke="url(#speedGrad)" stroke-width="2" opacity="0.6"/>
+  <line x1="15" y1="35" x2="23" y2="35" stroke="url(#speedGrad)" stroke-width="2" opacity="0.6"/>
+  <line x1="15" y1="45" x2="25" y2="45" stroke="url(#speedGrad)" stroke-width="2" opacity="0.6"/>
+  <line x1="50" y1="20" x2="60" y2="20" stroke="url(#speedGrad)" stroke-width="2" opacity="0.6"/>
+  <line x1="52" y1="30" x2="65" y2="30" stroke="url(#speedGrad)" stroke-width="2" opacity="0.6"/>
+  <line x1="50" y1="40" x2="60" y2="40" stroke="url(#speedGrad)" stroke-width="2" opacity="0.6"/>
+</svg>

assets/images/icon-support.svg

@@ -0,0 +1,26 @@
+<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="supportGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Headset -->
+  <path d="M 25 35 Q 25 25 40 25 Q 55 25 55 35 L 55 45 Q 55 50 50 50 L 47 50 L 47 40 L 53 40 L 53 35 Q 53 30 40 30 Q 27 30 27 35 L 27 40 L 33 40 L 33 50 L 30 50 Q 25 50 25 45 Z" 
+        fill="url(#supportGrad)"/>
+  
+  <!-- Microphone -->
+  <rect x="38" y="45" width="4" height="8" fill="url(#supportGrad)" rx="2"/>
+  <line x1="40" y1="53" x2="40" y2="58" stroke="url(#supportGrad)" stroke-width="2"/>
+  <line x1="36" y1="58" x2="44" y2="58" stroke="url(#supportGrad)" stroke-width="2"/>
+  
+  <!-- 24/7 indicators -->
+  <circle cx="15" cy="15" r="3" fill="url(#supportGrad)"/>
+  <circle cx="65" cy="15" r="3" fill="url(#supportGrad)"/>
+  <text x="15" y="18" font-family="Arial" font-size="8" fill="white" text-anchor="middle">24</text>
+  <text x="65" y="18" font-family="Arial" font-size="8" fill="white" text-anchor="middle">7</text>
+  
+  <!-- Support waves -->
+  <path d="M 15 45 Q 25 40 35 45" stroke="url(#supportGrad)" stroke-width="1.5" fill="none" opacity="0.6"/>
+  <path d="M 45 45 Q 55 40 65 45" stroke="url(#supportGrad)" stroke-width="1.5" fill="none" opacity="0.6"/>
+</svg>

assets/images/icon-twitter.svg

@@ -0,0 +1,12 @@
+<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="twitterGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Twitter/X background -->
+  <rect x="4" y="4" width="32" height="32" fill="url(#twitterGrad)" rx="6"/>
+  <!-- X symbol -->
+  <path d="M 14 14 L 26 26 M 26 14 L 14 26" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>

assets/images/icon-web-scraping.svg

@@ -0,0 +1,12 @@
+<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect x="10" y="15" width="40" height="30" fill="none" stroke="url(#grad1)" stroke-width="3" rx="4"/>
+  <line x1="15" y1="25" x2="35" y2="25" stroke="url(#grad1)" stroke-width="2"/>
+  <line x1="15" y1="30" x2="45" y2="30" stroke="url(#grad1)" stroke-width="2"/>
+  <line x1="15" y1="35" x2="40" y2="35" stroke="url(#grad1)" stroke-width="2"/>
+</svg>

assets/images/logo-business.svg

@@ -0,0 +1,24 @@
+<svg width="250" height="70" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="businessGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1e3a8a;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#3b82f6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#60a5fa;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Shield/badge background -->
+  <path d="M 20 10 L 60 10 Q 70 10 70 20 L 70 40 Q 70 60 50 60 L 30 60 Q 10 60 10 40 L 10 20 Q 10 10 20 10 Z" 
+        fill="url(#businessGrad)" stroke="white" stroke-width="2"/>
+  
+  <!-- UK initials in shield -->
+  <text x="40" y="35" font-family="Arial, sans-serif" font-size="20" font-weight="700" fill="white" text-anchor="middle">UK</text>
+  <text x="40" y="50" font-family="Arial, sans-serif" font-size="8" fill="white" text-anchor="middle" opacity="0.9">DATA</text>
+  
+  <!-- Company name -->
+  <text x="85" y="25" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600" fill="#1e3a8a">UK Data Services</text>
+  <text x="85" y="42" font-family="Inter, Arial, sans-serif" font-size="11" font-weight="400" fill="#64748b">Professional Web Scraping & Analytics</text>
+  
+  <!-- Established year -->
+  <text x="85" y="55" font-family="Inter, Arial, sans-serif" font-size="9" font-weight="500" fill="#94a3b8">Est. 2018</text>
+</svg>

assets/images/logo-corporate.svg

@@ -0,0 +1,27 @@
+<svg width="280" height="60" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="corpGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#334155;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#475569;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Clean rectangular background -->
+  <rect x="0" y="0" width="280" height="60" fill="url(#corpGrad)" rx="8"/>
+  
+  <!-- Data icon -->
+  <g transform="translate(15, 15)">
+    <!-- Database symbol -->
+    <ellipse cx="15" cy="8" rx="12" ry="4" fill="white" opacity="0.9"/>
+    <rect x="3" y="8" width="24" height="12" fill="white" opacity="0.9"/>
+    <ellipse cx="15" cy="20" rx="12" ry="4" fill="white" opacity="0.9"/>
+    
+    <!-- Data flow lines -->
+    <line x1="30" y1="14" x2="45" y2="14" stroke="white" stroke-width="2" opacity="0.8"/>
+    <line x1="30" y1="18" x2="40" y2="18" stroke="white" stroke-width="2" opacity="0.6"/>
+  </g>
+  
+  <!-- Company text -->
+  <text x="70" y="25" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="600" fill="white">UK Data Services</text>
+  <text x="70" y="42" font-family="Inter, Arial, sans-serif" font-size="10" font-weight="400" fill="white" opacity="0.8">Web Scraping | Business Intelligence | Data Analytics</text>
+</svg>

assets/images/logo-enhanced-white.svg

@@ -0,0 +1,24 @@
+<svg width="300" height="80" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="300" height="80" fill="white" rx="12"/>
+  
+  <!-- Main company name -->
+  <text x="40" y="35" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="700" fill="#1a1a1a">UK DATA</text>
+  <text x="40" y="60" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="700" fill="#1a1a1a">SERVICES</text>
+  
+  <!-- Professional tagline -->
+  <text x="185" y="35" font-family="Inter, Arial, sans-serif" font-size="11" font-weight="500" fill="#666">Professional Data Solutions</text>
+  <text x="185" y="50" font-family="Inter, Arial, sans-serif" font-size="11" font-weight="500" fill="#666">Web Scraping • Analytics • Intelligence</text>
+  
+  <!-- Data visualization element -->
+  <g transform="translate(200, 20)">
+    <!-- Chart bars -->
+    <rect x="0" y="25" width="4" height="15" fill="#667eea" rx="2"/>
+    <rect x="8" y="20" width="4" height="20" fill="#667eea" rx="2"/>
+    <rect x="16" y="15" width="4" height="25" fill="#667eea" rx="2"/>
+    <rect x="24" y="10" width="4" height="30" fill="#667eea" rx="2"/>
+    
+    <!-- Connecting line -->
+    <polyline points="2,32 10,27 18,22 26,17" stroke="#667eea" stroke-width="1.5" fill="none"/>
+  </g>
+</svg>

assets/images/logo-enhanced.svg

@@ -0,0 +1,31 @@
+<svg width="300" height="80" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="enhancedLogoGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background with subtle pattern -->
+  <rect width="300" height="80" fill="url(#enhancedLogoGrad)" rx="12"/>
+  
+  <!-- Main company name -->
+  <text x="40" y="35" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="700" fill="white">UK DATA</text>
+  <text x="40" y="60" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="700" fill="white">SERVICES</text>
+  
+  <!-- Professional tagline -->
+  <text x="185" y="35" font-family="Inter, Arial, sans-serif" font-size="11" font-weight="500" fill="white" opacity="0.9">Professional Data Solutions</text>
+  <text x="185" y="50" font-family="Inter, Arial, sans-serif" font-size="11" font-weight="500" fill="white" opacity="0.9">Web Scraping • Analytics • Intelligence</text>
+  
+  <!-- Data visualization element -->
+  <g transform="translate(200, 20)">
+    <!-- Chart bars -->
+    <rect x="0" y="25" width="4" height="15" fill="white" opacity="0.8" rx="2"/>
+    <rect x="8" y="20" width="4" height="20" fill="white" opacity="0.9" rx="2"/>
+    <rect x="16" y="15" width="4" height="25" fill="white" opacity="1" rx="2"/>
+    <rect x="24" y="10" width="4" height="30" fill="white" opacity="0.8" rx="2"/>
+    
+    <!-- Connecting line -->
+    <polyline points="2,32 10,27 18,22 26,17" stroke="white" stroke-width="1.5" fill="none" opacity="0.7"/>
+  </g>
+</svg>

assets/images/logo-white.svg

@@ -0,0 +1,4 @@
+<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
+  <rect width="200" height="50" fill="white" rx="8"/>
+  <text x="100" y="32" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600" fill="#1a1a1a" text-anchor="middle">UK Data Services</text>
+</svg>

assets/images/logo.svg

@@ -0,0 +1,10 @@
+<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="200" height="50" fill="url(#logoGrad)" rx="8"/>
+  <text x="100" y="32" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600" fill="white" text-anchor="middle">UK Data Services</text>
+</svg>

assets/js/main.js

@@ -0,0 +1,549 @@
+// Enhanced JavaScript for UK Data Services Website
+document.addEventListener('DOMContentLoaded', function() {
+    
+    // Rotating Hero Text Effect (like original UK Data Services site)
+    const rotatingText = document.getElementById('rotating-text');
+    const heroSubtitle = document.getElementById('hero-subtitle');
+    
+    if (rotatingText && heroSubtitle) {
+        const slides = [
+            {
+                title: "Voted UK's No.1 Web Scraping Service",
+                subtitle: "We are experts in web scraping, data analysis and competitor price monitoring."
+            },
+            {
+                title: "UK-based Team",
+                subtitle: "Our team is based in the UK for a clearer, faster response."
+            },
+            {
+                title: "Professional Price Monitoring",
+                subtitle: "Let us monitor your competitor's pricing and product ranges."
+            },
+            {
+                title: "Bespoke Software Solutions",
+                subtitle: "Let our experts build your ideal scraping solution."
+            }
+        ];
+        
+        let currentSlide = 0;
+        
+        function rotateSlide() {
+            // Fade out
+            rotatingText.style.opacity = '0';
+            heroSubtitle.style.opacity = '0';
+            
+            setTimeout(() => {
+                // Change text
+                rotatingText.textContent = slides[currentSlide].title;
+                heroSubtitle.textContent = slides[currentSlide].subtitle;
+                
+                // Fade in
+                rotatingText.style.opacity = '1';
+                heroSubtitle.style.opacity = '1';
+                
+                currentSlide = (currentSlide + 1) % slides.length;
+            }, 500);
+        }
+        
+        // Add transition styles immediately
+        rotatingText.style.transition = 'opacity 0.5s ease-in-out';
+        heroSubtitle.style.transition = 'opacity 0.5s ease-in-out';
+        
+        // Start rotation after a short delay
+        setTimeout(() => {
+            rotateSlide();
+            setInterval(rotateSlide, 4000); // Change every 4 seconds
+        }, 2000); // Start after 2 seconds
+        
+        console.log('Hero text rotation initialized');
+    } else {
+        console.log('Rotating text elements not found');
+    }
+    
+    // Mobile Navigation Toggle
+    const navToggle = document.getElementById('nav-toggle');
+    const navMenu = document.getElementById('nav-menu');
+    
+    if (navToggle && navMenu) {
+        navToggle.addEventListener('click', function() {
+            navMenu.classList.toggle('active');
+            navToggle.classList.toggle('active');
+        });
+        
+        // Close mobile menu when clicking on a link
+        const navLinks = document.querySelectorAll('.nav-link');
+        navLinks.forEach(link => {
+            link.addEventListener('click', () => {
+                navMenu.classList.remove('active');
+                navToggle.classList.remove('active');
+            });
+        });
+    }
+    
+    // Navbar Scroll Effect
+    const navbar = document.getElementById('navbar');
+    
+    function handleNavbarScroll() {
+        if (window.scrollY > 50) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    }
+    
+    window.addEventListener('scroll', handleNavbarScroll);
+    
+    // Smooth Scrolling for Navigation Links
+    const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
+    
+    smoothScrollLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            const targetId = this.getAttribute('href');
+            const targetSection = document.querySelector(targetId);
+            
+            if (targetSection) {
+                const headerOffset = 80;
+                const elementPosition = targetSection.getBoundingClientRect().top;
+                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+                
+                window.scrollTo({
+                    top: offsetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+    
+    // Enhanced Scroll Animations
+    const animatedElements = document.querySelectorAll('.animate-on-scroll, .service-card, .feature, .step');
+    
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animated');
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    
+    animatedElements.forEach((element, index) => {
+        // Set initial state
+        element.style.opacity = '0';
+        element.style.transform = 'translateY(30px)';
+        element.style.transition = `opacity 0.8s ease-out ${index * 0.1}s, transform 0.8s ease-out ${index * 0.1}s`;
+        observer.observe(element);
+    });
+    
+    // Add hover animations to service cards
+    const serviceCards = document.querySelectorAll('.service-card');
+    serviceCards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-10px) scale(1.02)';
+            this.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.15)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0) scale(1)';
+            this.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.08)';
+        });
+    });
+    
+    // Add pulse animation to CTA buttons
+    const ctaButtons = document.querySelectorAll('.btn-primary');
+    ctaButtons.forEach(btn => {
+        btn.addEventListener('mouseenter', function() {
+            this.style.animation = 'pulse 0.5s ease-in-out';
+        });
+        
+        btn.addEventListener('mouseleave', function() {
+            this.style.animation = 'none';
+        });
+    });
+    
+    console.log('Enhanced animations initialized');
+    
+    // Form Validation and Enhancement
+    const contactForm = document.querySelector('.contact-form form');
+    
+    if (contactForm) {
+        contactForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            // Basic form validation
+            const formData = new FormData(this);
+            const name = formData.get('name');
+            const email = formData.get('email');
+            const message = formData.get('message');
+            
+            // Validation
+            let isValid = true;
+            const errors = [];
+            
+            if (!name || name.trim().length < 2) {
+                errors.push('Please enter a valid name');
+                isValid = false;
+            }
+            
+            if (!email || !isValidEmail(email)) {
+                errors.push('Please enter a valid email address');
+                isValid = false;
+            }
+            
+            if (!message || message.trim().length < 10) {
+                errors.push('Please provide more details about your project (minimum 10 characters)');
+                isValid = false;
+            }
+            
+            if (isValid) {
+                // Show loading state
+                const submitButton = this.querySelector('button[type="submit"]');
+                const originalText = submitButton.textContent;
+                submitButton.textContent = 'Sending...';
+                submitButton.disabled = true;
+                
+                // Submit form (you'll need to implement the backend handler)
+                fetch('contact-handler.php', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        showNotification('Message sent successfully! We\'ll get back to you soon.', 'success');
+                        this.reset();
+                    } else {
+                        showNotification('There was an error sending your message. Please try again.', 'error');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    showNotification('There was an error sending your message. Please try again.', 'error');
+                })
+                .finally(() => {
+                    submitButton.textContent = originalText;
+                    submitButton.disabled = false;
+                });
+            } else {
+                showNotification(errors.join('<br>'), 'error');
+            }
+        });
+    }
+    
+    // Email validation function
+    function isValidEmail(email) {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    }
+    
+    // Notification system
+    function showNotification(message, type = 'info') {
+        // Remove existing notifications
+        const existingNotification = document.querySelector('.notification');
+        if (existingNotification) {
+            existingNotification.remove();
+        }
+        
+        // Create notification element
+        const notification = document.createElement('div');
+        notification.className = `notification notification-${type}`;
+        notification.innerHTML = `
+            <div class="notification-content">
+                <span class="notification-message">${message}</span>
+                <button class="notification-close">&times;</button>
+            </div>
+        `;
+        
+        // Add styles
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 10000;
+            background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'};
+            color: white;
+            padding: 16px 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            max-width: 400px;
+            font-family: 'Inter', sans-serif;
+            font-size: 14px;
+            opacity: 0;
+            transform: translateX(100%);
+            transition: all 0.3s ease;
+        `;
+        
+        notification.querySelector('.notification-content').style.cssText = `
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 12px;
+        `;
+        
+        notification.querySelector('.notification-close').style.cssText = `
+            background: none;
+            border: none;
+            color: white;
+            font-size: 18px;
+            cursor: pointer;
+            padding: 0;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `;
+        
+        // Add to page
+        document.body.appendChild(notification);
+        
+        // Animate in
+        setTimeout(() => {
+            notification.style.opacity = '1';
+            notification.style.transform = 'translateX(0)';
+        }, 100);
+        
+        // Handle close button
+        notification.querySelector('.notification-close').addEventListener('click', () => {
+            hideNotification(notification);
+        });
+        
+        // Auto hide after 5 seconds
+        setTimeout(() => {
+            if (document.body.contains(notification)) {
+                hideNotification(notification);
+            }
+        }, 5000);
+    }
+    
+    function hideNotification(notification) {
+        notification.style.opacity = '0';
+        notification.style.transform = 'translateX(100%)';
+        setTimeout(() => {
+            if (document.body.contains(notification)) {
+                notification.remove();
+            }
+        }, 300);
+    }
+    
+    // Stats Counter Animation
+    const stats = document.querySelectorAll('.stat-number');
+    
+    function animateStats() {
+        stats.forEach(stat => {
+            const originalText = stat.textContent.trim();
+            console.log('Animating stat:', originalText);
+            
+            // Handle different stat types
+            if (originalText.includes('£2.5M+')) {
+                return; // Keep as is, don't animate currency
+            } else if (originalText.includes('99.8%')) {
+                animateNumber(stat, 0, 99.8, '%');
+            } else if (originalText.includes('ISO 27001')) {
+                return; // Keep as is, don't animate certification
+            }
+        });
+    }
+    
+    function animateNumber(element, start, end, suffix = '') {
+        let current = start;
+        const increment = (end - start) / 60; // 60 steps for smoother animation
+        
+        const timer = setInterval(() => {
+            current += increment;
+            if (current >= end) {
+                current = end;
+                clearInterval(timer);
+            }
+            
+            element.textContent = current.toFixed(1) + suffix;
+        }, 50); // Every 50ms
+    }
+    
+    // Trigger stats animation when section is visible
+    const statsSection = document.querySelector('.hero-stats');
+    if (statsSection) {
+        const statsObserver = new IntersectionObserver(function(entries) {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    console.log('Stats section is visible, starting animation');
+                    setTimeout(() => {
+                        animateStats();
+                    }, 500); // Small delay
+                    statsObserver.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.3 });
+        
+        statsObserver.observe(statsSection);
+    } else {
+        console.log('Stats section not found');
+    }
+    
+    // Lazy Loading for Images
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    
+    if ('IntersectionObserver' in window) {
+        const imageObserver = new IntersectionObserver(function(entries) {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.src = img.dataset.src || img.src;
+                    img.classList.add('loaded');
+                    imageObserver.unobserve(img);
+                }
+            });
+        });
+        
+        images.forEach(img => imageObserver.observe(img));
+    }
+    
+    // Scroll to Top Button
+    const scrollTopBtn = document.createElement('button');
+    scrollTopBtn.innerHTML = '↑';
+    scrollTopBtn.className = 'scroll-top-btn';
+    scrollTopBtn.style.cssText = `
+        position: fixed;
+        bottom: 30px;
+        right: 30px;
+        width: 50px;
+        height: 50px;
+        border: none;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        font-size: 20px;
+        cursor: pointer;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+        z-index: 1000;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    `;
+    
+    document.body.appendChild(scrollTopBtn);
+    
+    scrollTopBtn.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+    
+    // Show/hide scroll to top button
+    function handleScrollTopButton() {
+        if (window.scrollY > 500) {
+            scrollTopBtn.style.opacity = '1';
+            scrollTopBtn.style.visibility = 'visible';
+        } else {
+            scrollTopBtn.style.opacity = '0';
+            scrollTopBtn.style.visibility = 'hidden';
+        }
+    }
+    
+    window.addEventListener('scroll', handleScrollTopButton);
+    
+    // Performance: Throttle scroll events
+    let scrollTimeout;
+    const originalHandlers = [handleNavbarScroll, handleScrollTopButton];
+    
+    function throttledScrollHandler() {
+        if (!scrollTimeout) {
+            scrollTimeout = setTimeout(() => {
+                originalHandlers.forEach(handler => handler());
+                scrollTimeout = null;
+            }, 16); // ~60fps
+        }
+    }
+    
+    window.removeEventListener('scroll', handleNavbarScroll);
+    window.removeEventListener('scroll', handleScrollTopButton);
+    window.addEventListener('scroll', throttledScrollHandler);
+    
+    // Preload critical resources
+    function preloadResource(href, as = 'image') {
+        const link = document.createElement('link');
+        link.rel = 'preload';
+        link.href = href;
+        link.as = as;
+        document.head.appendChild(link);
+    }
+    
+    // Preload hero image and other critical assets
+    // preloadResource('assets/images/hero-data-analytics.svg');
+    // preloadResource('assets/images/logo.svg');
+    
+    // Initialize tooltips (if needed)
+    const tooltipElements = document.querySelectorAll('[data-tooltip]');
+    
+    tooltipElements.forEach(element => {
+        element.addEventListener('mouseenter', function() {
+            const tooltipText = this.getAttribute('data-tooltip');
+            const tooltip = document.createElement('div');
+            tooltip.className = 'tooltip';
+            tooltip.textContent = tooltipText;
+            tooltip.style.cssText = `
+                position: absolute;
+                background: #1a1a1a;
+                color: white;
+                padding: 8px 12px;
+                border-radius: 6px;
+                font-size: 14px;
+                white-space: nowrap;
+                z-index: 10000;
+                opacity: 0;
+                transition: opacity 0.3s ease;
+                pointer-events: none;
+            `;
+            
+            document.body.appendChild(tooltip);
+            
+            const rect = this.getBoundingClientRect();
+            tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
+            tooltip.style.top = rect.top - tooltip.offsetHeight - 10 + 'px';
+            
+            setTimeout(() => {
+                tooltip.style.opacity = '1';
+            }, 100);
+            
+            this.addEventListener('mouseleave', function() {
+                tooltip.style.opacity = '0';
+                setTimeout(() => {
+                    if (document.body.contains(tooltip)) {
+                        tooltip.remove();
+                    }
+                }, 300);
+            }, { once: true });
+        });
+    });
+    
+    // Security: Prevent XSS in dynamic content
+    function sanitizeHTML(str) {
+        const temp = document.createElement('div');
+        temp.textContent = str;
+        return temp.innerHTML;
+    }
+    
+    // Service Worker Registration (for PWA capabilities)
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+            navigator.serviceWorker.register('/sw.js')
+                .then(registration => {
+                    console.log('SW registered: ', registration);
+                })
+                .catch(registrationError => {
+                    console.log('SW registration failed: ', registrationError);
+                });
+        });
+    }
+    
+    console.log('UK Data Services website initialized successfully');
+});