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

509

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.7k
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

2 months ago

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

Author:
ishimwe shadad

2 months ago

149
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

1 month ago

436
Heade With Hero Section

Author:
Abdul Baset Bappy

1 month ago

326
NFT Header with Hero

Author:
Abdul Baset Bappy

1 month ago

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

1 month ago

230
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

1 year ago

11.1k
Hero with button

Author:
Laurits

2 years ago

10.6k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.2k
tradition music
by salvator

Author:
Baraka Salvator

2 months ago

431
Portfolio Hero Section 4

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

8 months ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components