GMgub08.github.io/index.html at main · GMPasaylo/GMgub08.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yano A.I. Technologies Inc - AI School</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom gradient for hero section */
        .hero-gradient {
            background: linear-gradient(135deg, #3B82F6 0%, #A78BFA 100%);
        }
        /* Smooth scroll behavior */
        html {
            scroll-behavior: smooth;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans leading-normal tracking-normal">

    <!-- Navbar -->
    <nav class="bg-white shadow-lg fixed w-full z-20 top-0">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#home" class="text-2xl font-bold text-blue-600">Yano A.I. Technologies Inc</a>
            <div class="hidden md:flex space-x-8">
                <a href="#home" class="text-gray-700 hover:text-blue-600 transition">Home</a>
                <a href="#about" class="text-gray-700 hover:text-blue-600 transition">About</a>
                <a href="#courses" class="text-gray-700 hover:text-blue-600 transition">Courses</a>
                <a href="#events" class="text-gray-700 hover:text-blue-600 transition">Events</a>
                <a href="#blog" class="text-gray-700 hover:text-blue-600 transition">Blog</a>
            </div>
            <button id="menu-toggle" class="md:hidden text-gray-700 focus:outline-none">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>
        <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
            <a href="#home" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Home</a>
            <a href="#about" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">About</a>
            <a href="#courses" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Courses</a>
            <a href="#events" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Events</a>
            <a href="#blog" class="block px-4 py-2 text-gray-700 hover:bg-blue-50">Blog</a>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero-gradient text-white pt-24 pb-16">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-6 animate-fade-in">Unlock the Future with Yano A.I.</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Join our innovative AI school to master cutting-edge technologies and shape the future of intelligence.</p>
            <a href="#courses" class="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold text-lg hover:bg-gray-100 transition">Discover Our Courses</a>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center text-gray-800 mb-8">About Us</h2>
            <div class="flex flex-col md:flex-row items-center gap-8">
                <div class="md:w-1/2">
                    <p class="text-lg text-gray-600 mb-4">Yano A.I. Technologies Inc is a premier institution dedicated to advancing AI education. Our mission is to empower individuals with the knowledge and skills to thrive in the rapidly evolving field of artificial intelligence.</p>
                    <p class="text-lg text-gray-600">With a team of industry experts and a hands-on curriculum, we provide an immersive learning experience that blends theory with real-world applications.</p>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-blue-100 p-6 rounded-lg shadow-md">
                        <h3 class="text-2xl font-semibold text-blue-600 mb-4">Our Vision</h3>
                        <p class="text-gray-600">To create a global community of AI innovators who drive progress and solve complex challenges through technology.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Courses Section -->
    <section id="courses" class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center text-gray-800 mb-8">Courses Offered</h2>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
                    <h3 class="text-xl font-bold text-blue-600 mb-2">Introduction to AI</h3>
                    <p class="text-gray-600 mb-4">Learn the basics of artificial intelligence, including key concepts and applications.</p>
                    <a href="#" class="text-blue-600 hover:underline">Enroll Now</a>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
                    <h3 class="text-xl font-bold text-blue-600 mb-2">Machine Learning Mastery</h3>
                    <p class="text-gray-600 mb-4">Dive deep into machine learning algorithms, from regression to neural networks.</p>
                    <a href="#" class="text-blue-600 hover:underline">Enroll Now</a>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
                    <h3 class="text-xl font-bold text-blue-600 mb-2">Deep Learning Advanced</h3>
                    <p class="text-gray-600 mb-4">Explore advanced deep learning techniques for computer vision and NLP.</p>
                    <a href="#" class="text-blue-600 hover:underline">Enroll Now</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Events Section -->
    <section id="events" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center text-gray-800 mb-8">Upcoming Events</h2>
            <div class="space-y-6">
                <div class="bg-gray-50 p-6 rounded-lg shadow-md flex flex-col md:flex-row gap-4">
                    <div class="md:w-1/3">
                        <p class="text-blue-600 font-semibold">Dec 10, 2025</p>
                        <h3 class="text-xl font-bold text-gray-800">AI Innovation Summit</h3>
                    </div>
                    <div class="md:w-2/3">
                        <p class="text-gray-600">Join industry leaders to discuss the latest trends in AI and network with professionals.</p>
                        <a href="#" class="text-blue-600 hover:underline mt-2 inline-block">Register Now</a>
                    </div>
                </div>
                <div class="bg-gray-50 p-6 rounded-lg shadow-md flex flex-col md:flex-row gap-4">
                    <div class="md:w-1/3">
                        <p class="text-blue-600 font-semibold">Jan 15, 2026</p>
                        <h3 class="text-xl font-bold text-gray-800">Machine Learning Workshop</h3>
                    </div>
                    <div class="md:w-2/3">
                        <p class="text-gray-600">Hands-on workshop to build your first machine learning model from scratch.</p>
                        <a href="#" class="text-blue-600 hover:underline mt-2 inline-block">Register Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section id="blog" class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center text-gray-800 mb-8">Our Blog</h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-xl font-bold text-blue-600 mb-2">The Future of AI in 2026</h3>
                    <p class="text-gray-600 mb-4">Explore emerging trends and predictions for AI advancements in the coming year.</p>
                    <a href="#" class="text-blue-600 hover:underline">Read More</a>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <h3 class="text-xl font-bold text-blue-600 mb-2">Getting Started with Neural Networks</h3>
                    <p class="text-gray-600 mb-4">A beginner’s guide to understanding and building neural networks.</p>
                    <a href="#" class="text-blue-600 hover:underline">Read More</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-blue-600 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <p class="mb-4">&copy; 2025 Yano A.I. Technologies Inc. All rights reserved.</p>
            <div class="flex justify-center space-x-4">
                <a href="#" class="hover:text-blue-200">Privacy Policy</a>
                <a href="#" class="hover:text-blue-200">Terms of Service</a>
                <a href="#" class="hover:text-blue-200">Contact Us</a>
            </div>
        </div>
    </footer>

    <!-- JavaScript for Mobile Menu Toggle -->
    <script>
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');

        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
                mobileMenu.classList.add('hidden'); // Close mobile menu on click
            });
        });
    </script>
</body>
</html>