VAZAI HUB: VAZAI HUB-WORLD AIO ☆ NHIỀU MÀN HÌNH ☆ AI Gemini

2025-06-09

VAZAI HUB-WORLD AIO ☆ NHIỀU MÀN HÌNH ☆ AI Gemini

VAZAI HUB-WORLD AIO ☆ NHIỀU MÀN HÌNH ☆ AI Gemini

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 Gemini

import React, { useState, useEffect } from 'react';

import { ChevronDown, Menu, X, ArrowRight, Zap, BarChart3, Cog, Plug, Star, Users, Clock, Shield, Calendar, GitFork, BookOpen, Lightbulb, CloudRain } from 'lucide-react';

export default function VazaiHubWorld() {

const [isMenuOpen, setIsMenuOpen] = useState(false);

const [scrollY, setScrollY] = useState(0);

const [companyName, setCompanyName] = useState('');

const [contactEmail, setContactEmail] = useState('');

const [message, setMessage] = useState(''); // State for custom messages

const [messageType, setMessageType] = useState(''); // 'success' or 'error'

useEffect(() => {

// Scroll event listener for header styling

const handleScroll = () => setScrollY(window.scrollY);

window.addEventListener('scroll', handleScroll);

return () => window.removeEventListener('scroll', handleScroll);

}, []);

// Function to display custom messages (replaces alert())

const showMessage = (text, type = 'success') => {

setMessage(text);

setMessageType(type);

setTimeout(() => {

setMessage('');

setMessageType('');

}, 3000); // Message disappears after 3 seconds

};

// Handles the form submission for the CTA section

const handleSubscribe = () => {

if (!companyName.trim()) {

showMessage('Vui lòng nhập tên công ty của bạn.', 'error');

return;

}

if (!contactEmail.trim()) {

showMessage('Vui lòng nhập email liên hệ của bạn.', 'error');

return;

}

// Basic email validation regex

if (!/\S+@\S+\.\S+/.test(contactEmail)) {

showMessage('Email không hợp lệ. Vui lòng kiểm tra lại.', 'error');

return;

}

// Simulate successful submission

showMessage('Đăng ký thành công! Chúng tôi sẽ liên hệ với bạn sớm.', 'success');

setCompanyName(''); // Clear company name input

setContactEmail(''); // Clear email input

};

// Data for the main HUB sections (linking to child portals)

const hubSections = [

{

id: "lich-suc-khoe",

icon: <Calendar className="w-10 h-10" />,

title: "LỊCH SỨC KHỎE AZ AI",

description: "Quản lý lịch trình và thông tin sức khỏe cá nhân/gia đình.",

link: "#" // Placeholder link for now

{

id: "pha-he-dong-ho",

icon: <GitFork className="w-10 h-10" />,

title: "PHẢ HỆ DÒNG HỌ AZ AI",

description: "Lưu trữ phả hệ, lịch giỗ, và các lễ nghi truyền thống.",

link: "#"

{

id: "mo-hinh-az-ai",

icon: <BookOpen className="w-10 h-10" />,

title: "MÔ HÌNH AZ AI",

description: "Kiến thức tổng hợp cho học tập, công việc, và cuộc sống.",

link: "#"

{

id: "khcn-dmst-cds-ai",

icon: <Lightbulb className="w-10 h-10" />,

title: "KHCN-ĐMST-CĐS-AI",

description: "Cập nhật tin tức về khoa học, sáng tạo, chuyển đổi số, và AI.",

link: "#"

{

id: "thoi-su-ung-dung-ai",

icon: <CloudRain className="w-10 h-10" />,

title: "THỜI SỰ - THỜI TIẾT - TRA CỨU - ỨNG DỤNG AI",

description: "Hỗ trợ công dân số với thông tin hằng ngày và ứng dụng AI.",

link: "#"

}

];

// Data for the stats section

const stats = [

{ icon: <Users className="w-6 h-6" />, number: "1000+", label: "Doanh nghiệp tin tưởng" },

{ icon: <Clock className="w-6 h-6" />, number: "99.9%", label: "Uptime guarantee" },

{ icon: <Shield className="w-6 h-6" />, number: "24/7", label: "Hỗ trợ không ngừng" },

{ icon: <Star className="w-6 h-6" />, number: "4.9/5", label: "Đánh giá khách hàng" }

];

return (

{/* Custom Message/Notification */}

{message && (

<div className={`fixed top-4 left-1/2 -translate-x-1/2 z-50 px-6 py-3 rounded-lg shadow-lg text-white ${

messageType === 'success' ? 'bg-green-500' : 'bg-red-500'

} transition-all duration-300 transform scale-100 opacity-100`}>

{message}

</div>

)}

{/* Header */}

<header className={`fixed top-0 w-full z-50 transition-all duration-300 ${

scrollY > 50 ? 'bg-white/95 backdrop-blur-md shadow-lg' : 'bg-transparent'

}`}>

{/* VAZAI Logo/Brand Name */}

VAZAI HUB-WORLD AIO

</div>

{/* Desktop Navigation */}

<a href="#home" className="text-gray-700 hover:text-blue-600 transition-colors">Trang chủ</a>

<a href="#hub-sections" className="text-gray-700 hover:text-blue-600 transition-colors">Các Portal</a>

<a href="#about" className="text-gray-700 hover:text-blue-600 transition-colors">Về chúng tôi</a>

</nav>

{/* Desktop CTA Button */}

Bắt đầu ngay

</button>

</div>

{/* Mobile Menu Toggle Button */}

<button

className="md:hidden"

onClick={() => setIsMenuOpen(!isMenuOpen)}

{isMenuOpen ? <X className="w-6 h-6 text-gray-700" /> : <Menu className="w-6 h-6 text-gray-700" />}

</button>

</div>

{/* Mobile Menu Overlay */}

{isMenuOpen && (

<a href="#home" className="block py-2 text-gray-700 hover:text-blue-600" onClick={() => setIsMenuOpen(false)}>Trang chủ</a>

<a href="#hub-sections" className="block py-2 text-gray-700 hover:text-blue-600" onClick={() => setIsMenuOpen(false)}>Các Portal</a>

<a href="#about" className="block py-2 text-gray-700 hover:text-blue-600" onClick={() => setIsMenuOpen(false)}>Về chúng tôi</a>

<a href="#contact" className="block py-2 text-gray-700 hover:text-blue-600" onClick={() => setIsMenuOpen(false)}>Liên hệ</a>

<button className="w-full mt-2 bg-gradient-to-r from-blue-600 to-cyan-400 text-white px-6 py-2 rounded-full" onClick={() => setIsMenuOpen(false)}>

Bắt đầu ngay

</button>

</div>

)}

</header>

{/* Hero Section */}

VAZAI:

</span>

<br />

Innovate, Create, Celebrate

</h1>

Pioneering technology and creative solutions for a brighter future.

<br/>

<span className="font-semibold text-blue-700">Đúng Nhất – Nhanh Nhất – Dễ Nhất – Đẹp Nhất – Đủ Nhất</span>

</p>

</div>

Khám phá các Portal

</a>

Xem giới thiệu

</button>

</div>

{/* Abstract background shapes */}

{/* Mock AI Dashboard Card */}

</div>

<div>

<h3 className="font-semibold text-gray-900">AI Dashboard</h3>

<p className="text-gray-500 text-sm">Real-time analytics</p>

</div>

{/* Progress bars to simulate data */}

</div>

</div>

</div>

</section>

{/* Main HUB Sections */}

Cổng Liên Kết

</span> Tri Thức Số Toàn Diện

</h2>

VAZAI HUB-WORLD AIO là điểm đến trung tâm cho mọi nhu cầu về công nghệ, tri thức và cuộc sống.

</p>

</div>

{hubSections.map((section, index) => (

{section.icon}

</div>

<h3 className="text-xl font-semibold text-gray-900 mb-3">{section.title}</h3>

<p className="text-gray-600">{section.description}</p>

</a>

))}

{/* Adding an extra card to fill space and for future expansion */}

</div>

<h3 className="text-xl font-semibold text-gray-500 mb-3">Và nhiều hơn nữa...</h3>

<p className="text-gray-400">Các portal mới sẽ được bổ sung liên tục.</p>

</div>

</section>

{/* About Section */}

Về <span className="bg-gradient-to-r from-blue-600 to-cyan-400 bg-clip-text text-transparent">VAZAI</span>

</h2>

Chúng tôi là đội ngũ tiên phong, kết hợp công nghệ và sự sáng tạo để mang đến những giải pháp đột phá.

VAZAI cam kết biến đổi tương lai doanh nghiệp Việt Nam.

</p>

<p className="text-gray-700">Tối ưu hóa quy trình làm việc và thúc đẩy sự đổi mới thông qua trí tuệ nhân tạo và dịch vụ sáng tạo.</p>

</div>

<p className="text-gray-700">Trở thành đối tác AI hàng đầu, dẫn dắt các doanh nghiệp Việt Nam vươn tầm quốc tế.</p>

</div>

<p className="text-gray-700">Đội ngũ chuyên gia trẻ, năng động và giàu kinh nghiệm trong lĩnh vực AI, công nghệ và thiết kế.</p>

</div>

</section>

{/* Stats Section */}

{stats.map((stat, index) => (

{stat.icon}

</div>

<div className="text-3xl font-bold mb-2">{stat.number}</div>

<div className="text-blue-100">{stat.label}</div>

</div>

))}

</div>

</section>

{/* CTA Section */}

Sẵn sàng bắt đầu hành trình cùng <span className="bg-gradient-to-r from-blue-600 to-cyan-400 bg-clip-text text-transparent">VAZAI</span>?

</h2>

Gia nhập hàng nghìn doanh nghiệp đã tin tưởng VAZAI để tối ưu hóa quy trình làm việc.

</p>

<input

type="text"

placeholder="Tên công ty"

value={companyName}

onChange={(e) => setCompanyName(e.target.value)}

className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"

<input

type="email"

placeholder="Email liên hệ"

value={contactEmail}

onChange={(e) => setContactEmail(e.target.value)}

className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"

<button

onClick={handleSubscribe}

className="w-full bg-gradient-to-r from-blue-600 to-cyan-400 text-white py-3 rounded-lg hover:shadow-lg transform hover:scale-105 transition-all duration-200"

Đăng ký dùng thử miễn phí

</button>

</div>

</section>

{/* Footer */}

<div>

VAZAI HUB-WORLD AIO

</div>

Giải pháp AI hàng đầu cho doanh nghiệp và cộng đồng Việt Nam

</p>

</div>

<div>

<h4 className="font-semibold mb-4">Các Portal</h4>

</ul>

</div>

<div>

<li><a href="#about" className="hover:text-white transition-colors">Về chúng tôi</a></li>

<li><a href="#" className="hover:text-white transition-colors">Tuyển dụng</a></li>

</ul>

</div>

<div>

<li><a href="#" className="hover:text-white transition-colors">Trung tâm trợ giúp</a></li>

</ul>

</div>

<a href="#" className="text-gray-400 hover:text-white transition-colors">Privacy Policy</a>

<a href="#" className="text-gray-400 hover:text-white transition-colors">Terms of Service</a>

</div>

</footer>

</div>

);

}

VAZAI HUB

VAZAI HUB-WORLD AIO - Flag Counter

2025-06-09

VAZAI HUB-WORLD AIO ☆ NHIỀU MÀN HÌNH ☆ AI Gemini

Không có nhận xét nào:

Đăng nhận xét

🌐 Màn Hình Giao Tiếp TƯƠNG TÁC – VAZAI HUB & WORLD

VAZAI HUB – KẾT NỐI TRI THỨC AZ

Lưu trữ Blog

Nhãn