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

245

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

11 months ago

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

Author:
ishimwe shadad

4 weeks ago

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

Author:
ishimwe shadad

3 weeks ago

56
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 week ago

102
Heade With Hero Section

Author:
Abdul Baset Bappy

1 day ago

34
NFT Header with Hero

Author:
Abdul Baset Bappy

1 day ago

30
New Collection
A "New Collection" in fashion refers to a series of new garments and accessories designed and released by a designer or brand for a specific season (e.g., Spring/Summer, Fall/Winter). It's a carefully curated selection of items that typically share a common theme, style, or inspiration, reflecting the brand's identity and target audienc

Author:
nii fanny

3 weeks ago

75
Banner - Hero - Splash Section

Author:
ABDO-SY

3 months ago

661
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

4 weeks ago

211
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

1 year ago

18k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

7.4k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

1 year ago

9.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components