Home
ishimwe shadad
Hero $ Navigation

Hero $ Navigation

This is a modern, AI-focused landing page for a company called NEURALCORE that offers enterprise-grade AI solutions.

This tailwind example is contributed by ishimwe shadad, on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero Navigations

Author ishimwe shadad

589

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Solutions | Next-Gen Intelligence</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body class="overflow-x-hidden bg-gray-900">
    
    <nav class="fixed w-full z-50 backdrop-blur-md bg-gray-900/80 border-b border-cyan-500/20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-blue-600 bg-clip-text text-transparent font-orbitron">NEURALCORE</span>
                    </div>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-8">
                        <a href="#" class="text-cyan-100 hover:text-cyan-400 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Platform</a>
                        <a href="#" class="text-cyan-100 hover:text-cyan-400 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Solutions</a>
                        <a href="#" class="text-cyan-100 hover:text-cyan-400 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Research</a>
                        <a href="#" class="text-cyan-100 hover:text-cyan-400 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Company</a>
                        <a href="#" class="text-cyan-100 hover:text-cyan-400 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300">Contact</a>
                    </div>
                </div>
                <div class="hidden md:block">
                    <button class="ml-4 px-6 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 text-white text-sm font-medium rounded-full hover:from-cyan-600 hover:to-blue-700 transition-all duration-300 shadow-lg hover:shadow-cyan-500/30">
                        Get Started
                    </button>
                </div>
            </div>
        </div>
    </nav>

<section class="relative h-screen w-full overflow-hidden flex items-center justify-center pt-16">
        
        <div id="neural-background" class="absolute inset-0 z-0"></div>
        
        
        <div class="absolute inset-0 bg-gradient-to-b from-gray-900/90 via-gray-900/95 to-gray-900 z-1"></div>
        
        
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="mb-8 animate-fade-in-up">
                <span class="inline-block px-3 py-1 text-xs font-semibold text-cyan-300 bg-cyan-900/30 rounded-full border border-cyan-500/30">
                    TRUSTED BY INDUSTRY LEADERS
                </span>
            </div>
            
            
            <div class="flex flex-wrap justify-center items-center gap-6 md:gap-10 mb-12 px-4 animate-fade-in-up delay-75">
                <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg" alt="Microsoft" class="h-8 opacity-80 hover:opacity-100 transition-opacity duration-300">
                <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Meta-Logo.png" alt="Meta" class="h-8 opacity-80 hover:opacity-100 transition-opacity duration-300">
                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg" alt="Amazon" class="h-8 opacity-80 hover:opacity-100 transition-opacity duration-300">
                <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Apple" class="h-8 opacity-80 hover:opacity-100 transition-opacity duration-300">
                <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" alt="IBM" class="h-8 opacity-80 hover:opacity-100 transition-opacity duration-300">
            </div>
            
            <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight animate-fade-in-up delay-150">
                <span class="inline-block bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">Enterprise-Grade</span>
                <span class="inline-block bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">AI Solutions</span>
            </h1>
            
            <p class="text-lg md:text-xl text-cyan-100 mb-10 max-w-3xl mx-auto animate-fade-in-up delay-300">
                Powering the next generation of intelligent applications with our proprietary neural architecture and deep learning frameworks.
            </p>
            
            <div class="flex flex-col sm:flex-row justify-center gap-4 animate-fade-in-up delay-450">
                <button class="px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-full font-bold text-lg hover:from-cyan-600 hover:to-blue-700 transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-cyan-500/30">
                    Request Demo
                </button>
                <button class="px-8 py-4 border-2 border-cyan-400 text-cyan-100 rounded-full font-bold text-lg hover:bg-cyan-400/10 transition-all duration-300 transform hover:-translate-y-1 shadow-lg hover:shadow-cyan-500/20">
                    Explore Technology
                </button>
            </div>
            
            <div class="mt-16 grid grid-cols-3 md:flex justify-center items-center gap-8 animate-fade-in-up delay-600">
                <div class="text-center">
                    <div class="text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">250+</div>
                    <div class="text-sm text-cyan-200">Patented Algorithms</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">99.9%</div>
                    <div class="text-sm text-cyan-200">Uptime SLA</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">40ms</div>
                    <div class="text-sm text-cyan-200">Response Time</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">∞</div>
                    <div class="text-sm text-cyan-200">Scalability</div>
                </div>
            </div>
        </div>
    </section>

<style>
        .font-orbitron {
            font-family: 'Orbitron', sans-serif;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fade-in-up {
            animation: fadeInUp 1s ease-out forwards;
            opacity: 0;
        }
        
        .delay-75 {
            animation-delay: 0.075s;
        }
        
        .delay-150 {
            animation-delay: 0.15s;
        }
        
        .delay-300 {
            animation-delay: 0.3s;
        }
        
        .delay-450 {
            animation-delay: 0.45s;
        }
        
        .delay-600 {
            animation-delay: 0.6s;
        }
    </style>

<script>
        document.addEventListener('DOMContentLoaded', () => {
            // Set up Three.js scene
            const container = document.getElementById('neural-background');
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            const renderer = new THREE.WebGLRenderer({ 
                alpha: true, 
                antialias: true 
            });
            
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            container.appendChild(renderer.domElement);
            
            // Create neural network nodes
            const nodeGeometry = new THREE.SphereGeometry(0.5, 16, 16);
            const nodeMaterial = new THREE.MeshBasicMaterial({ 
                color: 0x00ffff,
                transparent: true,
                opacity: 0.8
            });
            
            const nodes = [];
            const nodeCount = 30;
            
            // Create nodes in 3D grid
            for (let i = 0; i < nodeCount; i++) {
                const node = new THREE.Mesh(nodeGeometry, nodeMaterial.clone());
                
                // Position nodes in a 3D grid
                const gridSize = 5;
                const x = (i % gridSize) * 5 - 10;
                const y = Math.floor(i / gridSize % gridSize) * 5 - 10;
                const z = Math.floor(i / (gridSize * gridSize)) * 5 - 10;
                
                node.position.set(x, y, z);
                node.userData = {
                    originalPosition: new THREE.Vector3(x, y, z),
                    speed: Math.random() * 0.02 + 0.01
                };
                
                scene.add(node);
                nodes.push(node);
            }
            
            // Create connections between nodes
            const lines = [];
            const lineMaterial = new THREE.LineBasicMaterial({ 
                color: 0x00ffff,
                transparent: true,
                opacity: 0.3
            });
            
            // Connect each node to several others
            nodes.forEach((node, i) => {
                // Connect to 3-5 other random nodes
                const connectionCount = Math.floor(Math.random() * 3) + 3;
                for (let j = 0; j < connectionCount; j++) {
                    const targetIndex = Math.floor(Math.random() * nodes.length);
                    if (targetIndex !== i) {
                        const targetNode = nodes[targetIndex];
                        const geometry = new THREE.BufferGeometry().setFromPoints([
                            node.position,
                            targetNode.position
                        ]);
                        const line = new THREE.Line(geometry, lineMaterial);
                        scene.add(line);
                        lines.push({
                            line: line,
                            start: node,
                            end: targetNode
                        });
                    }
                }
            });
            
            // Add pulsing core in center
            const coreGeometry = new THREE.SphereGeometry(2, 32, 32);
            const coreMaterial = new THREE.MeshBasicMaterial({
                color: 0x00ffff,
                transparent: true,
                opacity: 0.3,
                wireframe: true
            });
            const core = new THREE.Mesh(coreGeometry, coreMaterial);
            scene.add(core);
            
            // Camera position
            camera.position.z = 30;
            
            // Animation loop
            function animate() {
                requestAnimationFrame(animate);
                
                // Animate nodes
                nodes.forEach(node => {
                    // Gentle floating animation
                    node.position.x = node.userData.originalPosition.x + Math.sin(Date.now() * node.userData.speed) * 2;
                    node.position.y = node.userData.originalPosition.y + Math.cos(Date.now() * node.userData.speed * 1.3) * 2;
                    node.position.z = node.userData.originalPosition.z + Math.sin(Date.now() * node.userData.speed * 0.7) * 2;
                });
                
                // Update connection lines
                lines.forEach(connection => {
                    connection.line.geometry.dispose();
                    connection.line.geometry = new THREE.BufferGeometry().setFromPoints([
                        connection.start.position,
                        connection.end.position
                    ]);
                });
                
                // Pulsing core animation
                core.scale.x = 1 + Math.sin(Date.now() * 0.001) * 0.2;
                core.scale.y = 1 + Math.sin(Date.now() * 0.001) * 0.2;
                core.scale.z = 1 + Math.sin(Date.now() * 0.001) * 0.2;
                
                // Rotate entire scene slowly
                scene.rotation.y += 0.0005;
                
                renderer.render(scene, camera);
            }
            
            animate();
            
            // Handle window resize
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        });
    </script>
</body>
</html>

Related Examples

beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

1.9k
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

3 months ago

523
Zoo management
this a navigation bar and hero section of a zoo management system

Author:
ishimwe shadad

3 months ago

188
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

2 months ago

581
Heade With Hero Section

Author:
Abdul Baset Bappy

2 months ago

496
NFT Header with Hero

Author:
Abdul Baset Bappy

2 months ago

476
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

341
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

8 months ago

932
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

6 months ago

1k
hero section

Author:
Anonymous

1 year ago

9.5k
Hero banner

Author:
Piet Vriend

2 years ago

16.2k
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero
Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

Author:
Rajesh Pandey

3 months ago

572

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components