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

814

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

5 months ago

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

Author:
ishimwe shadad

5 months ago

774
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

5 months ago

874
Heade With Hero Section

Author:
Abdul Baset Bappy

5 months ago

932
NFT Header with Hero

Author:
Abdul Baset Bappy

5 months ago

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

4 months ago

783
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

1 week ago

63
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

746
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4k
login form
this login form it will be used for sign in to every website

Author:
nii fanny

5 months ago

438
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

5 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components