VAZAI HUB-WORLD AIO ☆ NHIỀU MÀN HÌNH ☆ AI Grok
070625
☆ Từ thực tế là Chúng Ta đang ''loay hoay'' Thiết
Kế Website (Portal) ''VuTienDuc AZ AI VAZAI AIO''
☆ VAZAI HUB-WORLD AIO
Có nên là Website (Portal) Chung bao gồm
các Đường Link là các Website (Portal) thành phần được thiết kế theo ''Tiêu Chuẩn
5 Nhất - Đúng - Nhanh - Dễ - Đẹp - Đủ''
1. LỊCH SỨC KHỎE AZ AI
2. PHẢ HỆ DÒNG HỌ AZ AI
3. MÔ HÌNH AZ AI (AZ AI MODEL)
4. KHCN-ĐMST-CĐS-AI
5. THỜI SỰ - THỜI TIẾT - TRA CỨU - ỨNG DỤNG
AI
CG AI Grok
<!DOCTYPE html>
<html lang="vi">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<meta
name="description" content="VAZAI HUB-WORLD AIO - Cổng Liên Kết
Tri Thức Số Toàn diện">
<title>VAZAI HUB-WORLD
AIO</title>
<script
src="https://cdn.tailwindcss.com"></script>
<script
src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
<style>
@import
url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body { font-family: 'Inter',
sans-serif; }
.card-hover { transition:
transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform:
translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
</style>
</head>
<body className="bg-gray-100 min-h-screen">
<div
id="root"></div>
<script
type="text/babel">
const App = () => {
return (
<div
className="min-h-screen bg-gray-100 text-gray-800">
{/* Header */}
<header
className="bg-blue-700 text-white p-4 sticky top-0 shadow-lg">
<div
className="container mx-auto flex justify-between items-center">
<div
className="text-2xl md:text-3xl font-bold">VAZAI HUB-WORLD
AIO</div>
<nav
className="flex space-x-4 md:space-x-6">
<a
href="#home" className="hover:text-yellow-400">Trang Chủ</a>
<a
href="#portals" className="hover:text-yellow-400">Cổng</a>
<a
href="#about" className="hover:text-yellow-400">Giới Thiệu</a>
<a
href="#contact" className="hover:text-yellow-400">Liên Hệ</a>
</nav>
</div>
</header>
{/* Hero Section */}
<section
id="home" className="bg-blue-600 text-white py-20">
<div
className="container mx-auto text-center px-4">
<h1
className="text-3xl md:text-5xl font-bold mb-4">VAZAI HUB-WORLD
AIO</h1>
<p
className="text-lg md:text-xl mb-6">Cổng Liên Kết Tri Thức Số Toàn
Diện</p>
<p
className="text-base md:text-lg mb-8">Đúng Nhất - Nhanh Nhất - Dễ
Nhất - Đẹp Nhất - Đủ Nhất</p>
<a
href="#portals" className="bg-yellow-500 text-white py-2 px-6
rounded hover:bg-yellow-600">Khám Phá</a>
</div>
</section>
{/* Portals Section */}
<section
id="portals" className="py-16">
<div
className="container mx-auto px-4">
<h2
className="text-3xl md:text-4xl font-bold text-center text-blue-700
mb-12">Các Cổng Thành Phần</h2>
<div
className="grid grid-cols-1 md:grid-cols-3 gap-8">
<a
href="#lich-suc-khoe" className="bg-white p-6 rounded-lg
card-hover">
<h3
className="text-xl md:text-2xl font-semibold text-blue-600
mb-2">1. Lịch Sức Khỏe AZ AI</h3>
<p
className="text-gray-600">Quản lý lịch sức khỏe cá nhân và gia
đình một cách chính xác, nhanh chóng.</p>
</a>
<a
href="#pha-he" className="bg-white p-6 rounded-lg
card-hover">
<h3
className="text-xl md:text-2xl font-semibold text-blue-600
mb-2">2. Phả Hệ Dòng Họ AZ AI</h3>
<p
className="text-gray-600">Lưu trữ phả hệ, lịch giỗ, lễ nghi dễ
dàng và đầy đủ.</p>
</a>
<a
href="#mo-hinh" className="bg-white p-6 rounded-lg
card-hover">
<h3
className="text-xl md:text-2xl font-semibold text-blue-600
mb-2">3. Mô Hình AZ AI</h3>
<p
className="text-gray-600">Kiến thức tổng hợp cho học tập, làm việc
và cuộc sống.</p>
</a>
<a
href="#khcn" className="bg-white p-6 rounded-lg
card-hover">
<h3
className="text-xl md:text-2xl font-semibold text-blue-600
mb-2">4. KHCN - ĐMST - CĐS - AI</h3>
<p
className="text-gray-600">Tin tức khoa học, sáng tạo, chuyển đổi số
và AI.</p>
</a>
<a
href="#thoi-su" className="bg-white p-6 rounded-lg
card-hover">
<h3
className="text-xl md:text-2xl font-semibold text-blue-600
mb-2">5. Thời Sự - Thời Tiết - Tra Cứu - Ứng Dụng AI</h3>
<p
className="text-gray-600">Hỗ trợ công dân số hằng ngày, tra cứu
nhanh, tiện lợi.</p>
</a>
</div>
</div>
</section>
{/* About Section */}
<section
id="about" className="bg-gray-200 py-16">
<div
className="container mx-auto px-4 text-center">
<h2
className="text-3xl md:text-4xl font-bold text-blue-700 mb-8">Giới
Thiệu VAZAI HUB-WORLD AIO</h2>
<p
className="text-lg max-w-3xl mx-auto">Một hệ sinh thái số toàn diện,
kết nối tri thức và công nghệ, mang đến giải pháp đúng nhất, nhanh nhất, dễ nhất,
đẹp nhất và đủ nhất cho cá nhân, gia đình và cộng đồng.</p>
</div>
</section>
{/* Contact Section */}
<section
id="contact" className="py-16">
<div
className="container mx-auto px-4 text-center">
<h2
className="text-3xl md:text-4xl font-bold text-blue-700 mb-8">Liên
Hệ</h2>
<div
className="max-w-lg mx-auto">
<input
type="text" placeholder="Họ và Tên" className="w-full
p-3 mb-4 rounded border border-gray-300 focus:outline-none
focus:border-blue-600" />
<input
type="email" placeholder="Email" className="w-full p-3
mb-4 rounded border border-gray-300 focus:outline-none
focus:border-blue-600" />
<textarea
placeholder="Tin Nhắn" className="w-full p-3 mb-4 rounded border
border-gray-300 focus:outline-none focus:border-blue-600"
rows="4"></textarea>
<button
className="bg-blue-700 text-white py-2 px-6 rounded
hover:bg-blue-800">Gửi</button>
</div>
</div>
</section>
{/* Footer */}
<footer
className="bg-blue-700 text-white py-6">
<div
className="container mx-auto px-4 text-center">
<p
className="mb-2">© 2025 VAZAI HUB-WORLD AIO. All rights
reserved.</p>
<p
className="text-sm">Vietnam All-in-One Knowledge Hub – Đúng Nhất -
Nhanh Nhất - Dễ Nhất - Đẹp Nhất - Đủ Nhất</p>
<div
className="flex justify-center space-x-4 mt-4">
<a
href="#"
className="hover:text-yellow-400">Facebook</a>
<a
href="#"
className="hover:text-yellow-400">Twitter</a>
<a
href="#"
className="hover:text-yellow-400">LinkedIn</a>
</div>
</div>
</footer>
</div>
);
};
const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét