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

1.1k

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

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

11 months ago

1.4k
hero template
hero section

Author:
Raul antonio de la cruz hernandez

1 month ago

100
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

1 year ago

1.4k
Hero section with bold heading

Author:
Abigail

3 years ago

11.5k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

11 months ago

1.3k
Breadcrumb

Author:
Ron Hicks

3 years ago

10.6k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

8 months ago

1.2k
flower
by salvator

Author:
Baraka Salvator

8 months ago

1.1k
Hero

Author:
ariaw

3 months ago

613
Hero component

Author:
Freja Jensen

3 years ago

13.1k
modern portifolio
by salvator

Author:
Baraka Salvator

8 months ago

786
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

Author:
zobaidul kaziex

1 year ago

5.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components