File Manager

Editing:0e82be9e9e46e814fd73948a927b894c.php

<?php $__env->startSection('title', 'WebSparkIT | Best Web Design Company Sri Lanka'); ?>
<?php $__env->startSection('meta_description', 'Looking for the best web design company in Sri Lanka? We provide top-tier web design and web development Sri Lanka to grow your business.'); ?>
<?php $__env->startSection('meta_keywords', 'web design sri lanka, web development sri lanka, best web design company sri lanka, website design sri lanka'); ?>

<?php $__env->startPush('styles'); ?>
<style>
    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(2deg); }
    }
    @keyframes float-delayed {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-15px) rotate(-2deg); }
    }
    @keyframes twinkle {
        0%, 100% { opacity: 0.2; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.2); }
    }
    @keyframes slide-up {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slide-left {
        from { opacity: 0; transform: translateX(40px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slide-right {
        from { opacity: 0; transform: translateX(-40px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 20px rgba(255, 109, 40, 0.3); }
        50% { box-shadow: 0 0 40px rgba(255, 109, 40, 0.6); }
    }
    @keyframes orbit {
        from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
        to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
    }
    @keyframes orbit-reverse {
        from { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
        to { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    }
    @keyframes gradient-shift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    @keyframes shimmer {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }

.animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-delayed { animation: float-delayed 7s ease-in-out infinite; }
    .animate-twinkle { animation: twinkle 3s ease-in-out infinite; }
    .animate-twinkle-delayed { animation: twinkle 4s ease-in-out 1.5s infinite; }
    .animate-twinkle-slow { animation: twinkle 5s ease-in-out 3s infinite; }
    .animate-slide-up { animation: slide-up 0.8s ease-out forwards; }
    .animate-slide-left { animation: slide-left 0.8s ease-out forwards; }
    .animate-slide-right { animation: slide-right 0.8s ease-out forwards; }
    .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
    .animate-orbit { animation: orbit 12s linear infinite; }
    .animate-orbit-reverse { animation: orbit-reverse 8s linear infinite; }
    .animate-shimmer { background-size: 200% auto; animation: shimmer 3s linear infinite; }

.animate-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.7s ease-out;
    }
    .animate-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }

.glass-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.4s ease;
    }
    .glass-card:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 109, 40, 0.3);
        transform: translateY(-5px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

.gradient-text {
        background: linear-gradient(135deg, #FF6D28, #FF8A50, #FF6D28);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shimmer 3s linear infinite;
    }

.hero-gradient {
        background: radial-gradient(ellipse at 30% 50%, rgba(255, 109, 40, 0.08) 0%, transparent 60%),
                    radial-gradient(ellipse at 70% 50%, rgba(11, 36, 71, 0.5) 0%, transparent 60%);
    }

.star {
        position: absolute;
        border-radius: 50%;
        background: white;
    }

.service-icon {
        background: linear-gradient(135deg, rgba(255, 109, 40, 0.15), rgba(255, 109, 40, 0.05));
        transition: all 0.3s ease;
    }
    .glass-card:hover .service-icon {
        background: linear-gradient(135deg, #FF6D28, #e5530b);
        transform: scale(1.1);
    }
    .glass-card:hover .service-icon svg {
        color: white !important;
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>

<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            
            <div class="space-y-8">
                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-orange/30 bg-orange/5 text-orange text-sm font-medium animate-slide-up">
                    <span class="w-2 h-2 rounded-full bg-orange animate-pulse-glow"></span>
                    #1 Web Design Company in Sri Lanka
                </div>

<h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-tight text-white animate-slide-up" style="animation-delay: 0.1s;">
                    Launch Your
                    <br>
                    <span class="gradient-text">Digital Presence</span>
                    <br>
                    To New Heights
                </h1>

<p class="text-lg sm:text-xl text-gray-400 max-w-xl leading-relaxed animate-slide-up" style="animation-delay: 0.2s;">
                    We craft stunning websites, powerful e-commerce solutions, and data-driven SEO strategies that propel your business forward in the digital universe.
                </p>

<div class="flex flex-wrap gap-4 animate-slide-up" style="animation-delay: 0.3s;">
                    <a href="/contact" class="group relative inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-orange to-orange-dark text-white rounded-xl font-bold text-lg transition-all duration-300 hover:shadow-2xl hover:shadow-orange/30 hover:scale-105">
                        Launch Your Project
                        <svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                        </svg>
                    </a>
                    <a href="/services" class="inline-flex items-center gap-2 px-8 py-4 border border-white/20 text-white rounded-xl font-bold text-lg transition-all duration-300 hover:bg-white/5 hover:border-white/40 glass-card">
                        Explore Services
                    </a>
                </div>

<div class="grid grid-cols-3 gap-8 pt-8 border-t border-white/10 animate-slide-up" style="animation-delay: 0.4s;">
                    <div>
                        <p class="text-3xl font-bold text-white">50+</p>
                        <p class="text-sm text-gray-500">Projects Delivered</p>
                    </div>
                    <div>
                        <p class="text-3xl font-bold text-white">30+</p>
                        <p class="text-sm text-gray-500">Happy Clients</p>
                    </div>
                    <div>
                        <p class="text-3xl font-bold text-orange">5+</p>
                        <p class="text-sm text-gray-500">Years Experience</p>
                    </div>
                </div>
            </div>

<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-float">
        <div class="flex flex-col items-center gap-2 text-white/30">
            <span class="text-xs uppercase tracking-widest">Scroll</span>
            <svg class="w-4 h-4 animate-float" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </div>
    </div>
</section>

<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16 animate-on-scroll">
            <span class="text-orange font-semibold text-sm uppercase tracking-widest">What We Do</span>
            <h2 class="text-4xl sm:text-5xl font-bold text-white mt-4">
                Everything You Need to <span class="gradient-text">Succeed Online</span>
            </h2>
            <p class="text-gray-400 text-lg mt-4 max-w-2xl mx-auto">
                From stunning designs to powerful development, we provide end-to-end digital solutions.
            </p>
        </div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <?php
                $services = [
                    ['icon' => 'M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z', 'title' => 'Custom Website Design', 'desc' => 'Tailor-made websites crafted to your brand identity, delivering stunning user experiences that captivate your audience.'],
                    ['icon' => 'M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125', 'title' => 'Web Development', 'desc' => 'Robust backend systems and seamless frontends built by expert developers using the latest technologies.'],
                    ['icon' => 'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605', 'title' => 'E-Commerce Solutions', 'desc' => 'Powerful online stores with seamless checkout, inventory management, and mobile-optimized shopping experiences.'],
                    ['icon' => 'M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802', 'title' => 'SEO & Digital Marketing', 'desc' => 'Data-driven strategies to boost your visibility, drive traffic, and convert visitors into loyal customers.'],
                    ['icon' => 'M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418', 'title' => 'Domain & Hosting', 'desc' => 'Reliable domain registration, hosting solutions, and SSL certificates to keep your site secure and fast.'],
                    ['icon' => 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z', 'title' => 'Maintenance & Support', 'desc' => 'Ongoing support, updates, and maintenance to keep your website running smoothly and securely.']
                ];
            ?>

<?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="glass-card rounded-2xl p-8 animate-on-scroll" style="transition-delay: <?php echo e($i * 0.1); ?>s">
                    <div class="service-icon w-14 h-14 rounded-xl flex items-center justify-center mb-6">
                        <svg class="w-7 h-7 text-orange transition-colors" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="<?php echo e($service['icon']); ?>"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3"><?php echo e($service['title']); ?></h3>
                    <p class="text-gray-400 leading-relaxed"><?php echo e($service['desc']); ?></p>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>

<section class="relative py-32 overflow-hidden bg-navy-dark">
    <div class="absolute inset-0 hero-gradient"></div>
    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="animate-on-scroll">
            <h2 class="text-4xl sm:text-5xl font-bold text-white mb-6">
                Ready to <span class="gradient-text">Launch</span> Your Project?
            </h2>
            <p class="text-lg text-gray-400 mb-10 max-w-2xl mx-auto">
                Let's discuss your vision and create something extraordinary together. Your digital transformation starts here.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="/contact" class="group inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-orange to-orange-dark text-white rounded-xl font-bold text-lg transition-all duration-300 hover:shadow-2xl hover:shadow-orange/30 hover:scale-105">
                    Start Your Journey
                    <svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                    </svg>
                </a>
                <a href="/pricing" class="inline-flex items-center gap-2 px-8 py-4 border border-white/20 text-white rounded-xl font-bold text-lg transition-all duration-300 hover:bg-white/5 hover:border-white/40 glass-card">
                    View Pricing
                </a>
            </div>
        </div>
    </div>
</section>

document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
})();
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.public', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/websparkit/public_html/clint.websparkit.com/laravel/resources/views/pages/home.blade.php ENDPATH**/ ?>

Cancel

🤩 File Manager - Mr.X

Editing:0e82be9e9e46e814fd73948a927b894c.php