It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate.

Source: https://maseraticlubuae.com

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.    <title>Landing Page</title>
  7.    <script src="https://cdn.tailwindcss.com"></script>
  8.    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  9.    <style>
  10.        html {
  11.            scroll-behavior: smooth;
  12.        }
  13.        /* Custom styles for sections to account for fixed navbar */
  14.        section {
  15.            padding-top: 80px;
  16.            padding-bottom: 80px;
  17.        }
  18.    </style>
  19. </head>
  20. <body class="font-sans antialiased bg-gray-50 text-gray-800">
  21.  
  22.    <nav class="fixed top-0 left-0 w-full bg-white shadow-md z-50 py-4">
  23.        <div class="container mx-auto px-4 flex justify-between items-center">
  24.            <a href="#" class="text-2xl font-bold text-blue-600">Logo Anda</a>
  25.            <div class="hidden md:flex space-x-6">
  26.                <a href="#hero" class="text-gray-600 hover:text-blue-600">Beranda</a>
  27.                <a href="#about" class="text-gray-600 hover:text-blue-600">Tentang Kami</a>
  28.                <a href="#clients" class="text-gray-600 hover:text-blue-600">Klien</a>
  29.                <a href="#services" class="text-gray-600 hover:text-blue-600">Layanan</a>
  30.                <a href="#testimonials" class="text-gray-600 hover:text-blue-600">Testimoni</a>
  31.                <a href="#articles" class="text-gray-600 hover:text-blue-600">Artikel</a>
  32.                <a href="#contact" class="text-gray-600 hover:text-blue-600">Kontak</a>
  33.            </div>
  34.            <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
  35.                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  36.                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
  37.                </svg>
  38.            </button>
  39.        </div>
  40.        <div id="mobile-menu" class="hidden md:hidden bg-white px-4 pt-2 pb-4 space-y-1">
  41.            <a href="#hero" class="block text-gray-600 hover:text-blue-600 py-2">Beranda</a>
  42.            <a href="#about" class="block text-gray-600 hover:text-blue-600 py-2">Tentang Kami</a>
  43.            <a href="#clients" class="block text-gray-600 hover:text-blue-600 py-2">Klien</a>
  44.            <a href="#services" class="block text-gray-600 hover:text-blue-600 py-2">Layanan</a>
  45.            <a href="#testimonials" class="block text-gray-600 hover:text-blue-600 py-2">Testimoni</a>
  46.            <a href="#articles" class="block text-gray-600 hover:text-blue-600 py-2">Artikel</a>
  47.            <a href="#contact" class="block text-gray-600 hover:text-blue-600 py-2">Kontak</a>
  48.        </div>
  49.    </nav>
  50.  
  51.    <section id="hero" class="relative bg-gradient-to-r from-blue-500 to-indigo-600 text-white flex items-center justify-center h-screen">
  52.        <div class="text-center px-4">
  53.            <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-4">Selamat Datang di Website Kami</h1>
  54.            <p class="text-lg md:text-xl mb-8">Solusi terbaik untuk kebutuhan bisnis Anda.</p>
  55.            <a href="#contact" class="bg-white text-blue-600 px-8 py-3 rounded-full text-lg font-semibold hover:bg-gray-100 transition duration-300">Hubungi Kami</a>
  56.        </div>
  57.    </section>
  58.  
  59.    <section id="about" class="bg-white py-20">
  60.        <div class="container mx-auto px-4 text-center">
  61.            <h2 class="text-4xl font-bold text-gray-800 mb-6">Tentang Kami</h2>
  62.            <p class="text-lg text-gray-600 max-w-3xl mx-auto">Kami adalah tim profesional yang berdedikasi untuk menyediakan layanan berkualitas tinggi. Dengan pengalaman bertahun-tahun, kami siap membantu Anda mencapai tujuan Anda.</p>
  63.            <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
  64.                <div class="p-6 bg-gray-100 rounded-lg shadow-md">
  65.                    <h3 class="text-xl font-semibold mb-3">Misi Kami</h3>
  66.                    <p class="text-gray-700">Memberikan solusi inovatif yang melampaui harapan klien kami.</p>
  67.                </div>
  68.                <div class="p-6 bg-gray-100 rounded-lg shadow-md">
  69.                    <h3 class="text-xl font-semibold mb-3">Visi Kami</h3>
  70.                    <p class="text-gray-700">Menjadi pemimpin industri yang diakui secara global.</p>
  71.                </div>
  72.                <div class="p-6 bg-gray-100 rounded-lg shadow-md">
  73.                    <h3 class="text-xl font-semibold mb-3">Nilai Kami</h3>
  74.                    <p class="text-gray-700">Integritas, inovasi, dan kepuasan pelanggan.</p>
  75.                </div>
  76.            </div>
  77.        </div>
  78.    </section>
  79.  
  80.    <section id="clients" class="bg-gray-100 py-20">
  81.        <div class="container mx-auto px-4 text-center">
  82.            <h2 class="text-4xl font-bold text-gray-800 mb-6">Klien Kami</h2>
  83.            <p class="text-lg text-gray-600 mb-12">Kami bangga telah bekerja sama dengan berbagai perusahaan terkemuka.</p>
  84.            <div id="clients-container" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center justify-center">
  85.                </div>
  86.        </div>
  87.    </section>
  88.  
  89.    <section id="services" class="bg-white py-20">
  90.        <div class="container mx-auto px-4 text-center">
  91.            <h2 class="text-4xl font-bold text-gray-800 mb-6">Layanan Kami</h2>
  92.            <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Kami menawarkan berbagai layanan yang dirancang untuk membantu bisnis Anda berkembang.</p>
  93.            <div id="services-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  94.                </div>
  95.        </div>
  96.    </section>
  97.  
  98.    <section id="testimonials" class="bg-gray-50 py-20">
  99.        <div class="container mx-auto px-4 text-center">
  100.            <h2 class="text-4xl font-bold text-gray-800 mb-6">Apa Kata Klien Kami</h2>
  101.            <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Dengarkan langsung dari mereka yang telah merasakan manfaat layanan kami.</p>
  102.            <div id="testimonials-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  103.                </div>
  104.        </div>
  105.    </section>
  106.  
  107.    <section id="content-section" class="bg-white py-20">
  108.        <div class="container mx-auto px-4 text-center">
  109.            <h2 class="text-4xl font-bold text-gray-800 mb-6">Wawasan & Informasi Terbaru</h2>
  110.            <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Temukan artikel dan studi kasus menarik dari industri kami.</p>
  111.            <div id="content-items-container" class="grid grid-cols-1 md:grid-cols-2 gap-8">
  112.                </div>
  113.        </div>
  114.    </section>
  115.  
  116.    <section id="articles" class="bg-gray-100 py-20">
  117.        <div class="container mx-auto px-4 text-center">
  118.            <h2 class="text-4xl font-bold text-gray-800 mb-6">Artikel Terbaru Kami</h2>
  119.            <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Ikuti perkembangan terbaru dan dapatkan wawasan dari blog kami.</p>
  120.            <div id="articles-container" class="grid grid-cols-1 md:grid-cols-3 gap-8">
  121.                </div>
  122.        </div>
  123.    </section>
  124.  
  125.    <section id="contact" class="bg-white py-20">
  126.        <div class="container mx-auto px-4 text-center">
  127.            <h2 class="text-4xl font-bold text-gray-800 mb-6">Hubungi Kami</h2>
  128.            <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-12">Ada pertanyaan? Jangan ragu untuk menghubungi kami melalui formulir di bawah ini.</p>
  129.            <div class="max-w-xl mx-auto bg-gray-100 p-8 rounded-lg shadow-md">
  130.                <form>
  131.                    <div class="mb-4 text-left">
  132.                        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Nama Lengkap</label>
  133.                        <input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Nama Anda">
  134.                    </div>
  135.                    <div class="mb-4 text-left">
  136.                        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
  137.                        <input type="email" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="email@example.com">
  138.                    </div>
  139.                    <div class="mb-6 text-left">
  140.                        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">Pesan</label>
  141.                        <textarea id="message" name="message" rows="5" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Pesan Anda"></textarea>
  142.                    </div>
  143.                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transition duration-300">Kirim Pesan</button>
  144.                </form>
  145.            </div>
  146.        </div>
  147.    </section>
  148.  
  149.    <footer class="bg-gray-800 text-white py-12">
  150.        <div class="container mx-auto px-4 text-center">
  151.            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
  152.                <div>
  153.                    <h3 class="text-xl font-semibold mb-4">Tentang Kami</h3>
  154.                    <p class="text-gray-400">Kami adalah perusahaan yang berdedikasi untuk memberikan solusi digital terbaik.</p>
  155.                </div>
  156.                <div>
  157.                    <h3 class="text-xl font-semibold mb-4">Tautan Cepat</h3>
  158.                    <ul class="space-y-2">
  159.                        <li><a href="#about" class="text-gray-400 hover:text-white">Tentang Kami</a></li>
  160.                        <li><a href="#services" class="text-gray-400 hover:text-white">Layanan</a></li>
  161.                        <li><a href="#articles" class="text-gray-400 hover:text-white">Blog</a></li>
  162.                        <li><a href="#contact" class="text-gray-400 hover:text-white">Kontak</a></li>
  163.                    </ul>
  164.                </div>
  165.                <div>
  166.                    <h3 class="text-xl font-semibold mb-4">Ikuti Kami</h3>
  167.                    <div class="flex justify-center space-x-4">
  168.                        <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-facebook-f"></i></a>
  169.                        <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-twitter"></i></a>
  170.                        <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-instagram"></i></a>
  171.                        <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-linkedin-in"></i></a>
  172.                    </div>
  173.                </div>
  174.            </div>
  175.            <div class="border-t border-gray-700 pt-8">
  176.                <p class="text-gray-400 text-sm">&copy; 2025 Nama Perusahaan Anda. Hak Cipta Dilindungi.</p>
  177.            </div>
  178.        </div>
  179.    </footer>
  180.  
  181.    <a href="https://wa.me/6281234567890" target="_blank" class="fixed bottom-8 right-8 bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition duration-300 z-50">
  182.        <i class="fab fa-whatsapp text-3xl"></i>
  183.    </a>
  184.  
  185.    <script>
  186.        // Smooth scrolling for navigation links
  187.        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  188.            anchor.addEventListener('click', function (e) {
  189.                e.preventDefault();
  190.  
  191.                document.querySelector(this.getAttribute('href')).scrollIntoView({
  192.                    behavior: 'smooth'
  193.                });
  194.  
  195.                // Close mobile menu if open
  196.                const mobileMenu = document.getElementById('mobile-menu');
  197.                if (mobileMenu.classList.contains('block')) {
  198.                    mobileMenu.classList.add('hidden');
  199.                    mobileMenu.classList.remove('block');
  200.                }
  201.            });
  202.        });
  203.  
  204.        // Mobile menu toggle
  205.        const mobileMenuButton = document.getElementById('mobile-menu-button');
  206.        const mobileMenu = document.getElementById('mobile-menu');
  207.  
  208.        mobileMenuButton.addEventListener('click', () => {
  209.            mobileMenu.classList.toggle('hidden');
  210.            mobileMenu.classList.toggle('block');
  211.        });
  212.  
  213.        // --- JavaScript Looping for Sections ---
  214.  
  215.        // 1. Client Section (12 items)
  216.        const clientsContainer = document.getElementById('clients-container');
  217.        const numClients = 12; // Number of client logos
  218.        for (let i = 1; i <= numClients; i++) {
  219.            const clientLogoHtml = `
  220.                <img src="https://via.placeholder.com/150x50/cccccc/ffffff?text=Client+${i}" alt="Client ${i} Logo" class="mx-auto filter grayscale hover:grayscale-0 transition duration-300">
  221.            `;
  222.            clientsContainer.insertAdjacentHTML('beforeend', clientLogoHtml);
  223.        }
  224.  
  225.        // 2. Services Section (6 items)
  226.        const servicesContainer = document.getElementById('services-container');
  227.        const servicesData = [
  228.            { icon: 'fas fa-code', title: 'Pengembangan Web', description: 'Membangun website modern dan responsif sesuai kebutuhan Anda.' },
  229.            { icon: 'fas fa-mobile-alt', title: 'Pengembangan Aplikasi Mobile', description: 'Membuat aplikasi mobile inovatif untuk iOS dan Android.' },
  230.            { icon: 'fas fa-chart-line', title: 'Digital Marketing', description: 'Meningkatkan visibilitas online dan menjangkau audiens target Anda.' },
  231.            { icon: 'fas fa-pencil-ruler', title: 'Desain Grafis', description: 'Menciptakan desain visual yang menarik dan profesional.' },
  232.            { icon: 'fas fa-cloud', title: 'Konsultasi Cloud', description: 'Memberikan saran ahli untuk migrasi dan optimasi cloud.' },
  233.            { icon: 'fas fa-headset', title: 'Dukungan Teknis', description: 'Bantuan teknis yang responsif untuk memastikan kelancaran operasi Anda.' },
  234.        ];
  235.        servicesData.forEach(service => {
  236.            const serviceCardHtml = `
  237.                <div class="p-6 bg-gray-100 rounded-lg shadow-md flex flex-col items-center">
  238.                    <i class="${service.icon} text-blue-600 text-5xl mb-4"></i>
  239.                    <h3 class="text-xl font-semibold mb-3">${service.title}</h3>
  240.                    <p class="text-gray-700 text-center">${service.description}</p>
  241.                </div>
  242.            `;
  243.            servicesContainer.insertAdjacentHTML('beforeend', serviceCardHtml);
  244.        });
  245.  
  246.        // 3. Testimonial Section (6 items)
  247.        const testimonialsContainer = document.getElementById('testimonials-container');
  248.        const testimonialsData = [
  249.            { quote: "Layanan yang luar biasa! Tim ini sangat profesional dan responsif. Kami sangat puas dengan hasilnya.", name: "John Doe", position: "CEO, Perusahaan A", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=JD" },
  250.            { quote: "Mereka memahami kebutuhan kami dengan baik dan memberikan solusi yang tepat waktu. Sangat direkomendasikan!", name: "Jane Smith", position: "Manajer, Perusahaan B", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=JS" },
  251.            { quote: "Desain website yang mereka buat sangat modern dan fungsional. Tim yang sangat berbakat!", name: "Peter Jones", position: "Pendiri, Startup C", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=PJ" },
  252.            { quote: "Kerja sama yang sangat produktif. Hasilnya melebihi ekspektasi kami.", name: "Alice Brown", position: "Direktur, Organisasi D", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=AB" },
  253.            { quote: "Dukungan pelanggan yang cepat dan solusi yang inovatif. Kami akan terus bekerja sama dengan mereka.", name: "Bob White", position: "CTO, Perusahaan E", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=BW" },
  254.            { quote: "Sangat mudah untuk berkomunikasi dan proyek diselesaikan tepat waktu. Pengalaman yang menyenangkan!", name: "Carol Green", position: "Manajer Proyek, Perusahaan F", avatar: "https://via.placeholder.com/50/cccccc/ffffff?text=CG" },
  255.        ];
  256.        testimonialsData.forEach(testimonial => {
  257.            const testimonialCardHtml = `
  258.                <div class="bg-white p-6 rounded-lg shadow-md">
  259.                    <p class="text-gray-700 italic mb-4">"${testimonial.quote}"</p>
  260.                    <div class="flex items-center justify-center">
  261.                        <img src="${testimonial.avatar}" alt="Avatar ${testimonial.name}" class="w-12 h-12 rounded-full mr-4">
  262.                        <div>
  263.                            <p class="font-semibold text-gray-800">${testimonial.name}</p>
  264.                            <p class="text-sm text-gray-600">${testimonial.position}</p>
  265.                        </div>
  266.                    </div>
  267.                </div>
  268.            `;
  269.            testimonialsContainer.insertAdjacentHTML('beforeend', testimonialCardHtml);
  270.        });
  271.  
  272.        // 4. Content Section (4 items)
  273.        const contentItemsContainer = document.getElementById('content-items-container');
  274.        const contentData = [
  275.            { title: 'Masa Depan Teknologi AI', description: 'Pelajari bagaimana kecerdasan buatan akan membentuk lanskap teknologi di tahun-tahun mendatang.', link: '#' },
  276.            { title: 'Strategi Pemasaran Digital Efektif', description: 'Panduan komprehensif untuk meningkatkan kehadiran online bisnis Anda.', link: '#' },
  277.            { title: 'Keamanan Siber di Era Digital', description: 'Pentingnya menjaga data Anda dari ancaman siber yang terus berkembang.', link: '#' },
  278.            { title: 'Pengembangan Aplikasi No-Code/Low-Code', description: 'Memahami bagaimana platform ini merevolusi pembuatan aplikasi.', link: '#' },
  279.        ];
  280.        contentData.forEach(item => {
  281.            const contentCardHtml = `
  282.                <div class="bg-gray-100 p-6 rounded-lg shadow-md text-left">
  283.                    <h3 class="text-2xl font-semibold mb-3">${item.title}</h3>
  284.                    <p class="text-gray-700 mb-4">${item.description}</p>
  285.                    <a href="${item.link}" class="text-blue-600 hover:underline font-semibold">Baca Lebih Lanjut &rarr;</a>
  286.                </div>
  287.            `;
  288.            contentItemsContainer.insertAdjacentHTML('beforeend', contentCardHtml);
  289.        });
  290.  
  291.        // 5. Articles Section (3 items)
  292.        const articlesContainer = document.getElementById('articles-container');
  293.        const articlesData = [
  294.            { image: 'https://via.placeholder.com/400x250/cccccc/ffffff?text=Artikel+1', title: '10 Tips untuk Produktivitas Tinggi', description: 'Jelajahi strategi dan alat untuk meningkatkan efisiensi kerja Anda sehari-hari.', link: '#' },
  295.            { image: 'https://via.placeholder.com/400x250/cccccc/ffffff?text=Artikel+2', title: 'Panduan Lengkap SEO 2025', description: 'Pelajari teknik SEO terbaru untuk meningkatkan peringkat website Anda di mesin pencari.', link: '#' },
  296.            { image: 'https://via.placeholder.com/400x250/cccccc/ffffff?text=Artikel+3', title: 'Desain UX/UI Terbaik Tahun Ini', description: 'Tren desain pengalaman pengguna dan antarmuka pengguna yang harus Anda ketahui.', link: '#' },
  297.        ];
  298.        articlesData.forEach(article => {
  299.            const articleCardHtml = `
  300.                <div class="bg-white rounded-lg shadow-md overflow-hidden">
  301.                    <img src="${article.image}" alt="${article.title} Image" class="w-full h-48 object-cover">
  302.                    <div class="p-6 text-left">
  303.                        <h3 class="text-xl font-semibold text-gray-800 mb-2">${article.title}</h3>
  304.                        <p class="text-gray-600 text-sm mb-4">${article.description}</p>
  305.                        <a href="${article.link}" class="text-blue-600 hover:underline font-semibold">Baca Artikel &rarr;</a>
  306.                    </div>
  307.                </div>
  308.            `;
  309.            articlesContainer.insertAdjacentHTML('beforeend', articleCardHtml);
  310.        });
  311.  
  312.    </script>
  313. <script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"8ccba8cfd6f24626886a2b81ed2b53b9","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
  314. </body>
  315. </html>
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda