Spaces:
Running
Running
Ctrl+K
-
1.52 kB
initial commit
-
219 Bytes
"use client"; import React from "react"; function MainComponent() { const { useState, useEffect, useRef } = React; const [activeSection, setActiveSection] = useState("trang-chu"); const [isMenuOpen, setIsMenuOpen] = useState(false); const [isVisible, setIsVisible] = useState({}); const sectionRefs = { "trang-chu": useRef(null), "san-pham": useRef(null), "luu-luong": useRef(null), "nang-cao": useRef(null), "nghien-cuu": useRef(null), "blockchain": useRef(null), "dao-tao": useRef(null), }; useEffect(() => { const handleScroll = () => { const scrollPosition = window.scrollY + 100; Object.entries(sectionRefs).forEach(([section, ref]) => { if (ref.current) { const element = ref.current; const offsetTop = element.offsetTop; const height = element.offsetHeight; if ( scrollPosition >= offsetTop && scrollPosition < offsetTop + height ) { setActiveSection(section); } setIsVisible((prev) => ({ ...prev, [section]: scrollPosition >= offsetTop - window.innerHeight / 1.3, })); } }); }; window.addEventListener("scroll", handleScroll); handleScroll(); return () => window.removeEventListener("scroll", handleScroll); }, []); const scrollToSection = (section) => { sectionRefs[section].current.scrollIntoView({ behavior: "smooth" }); setActiveSection(section); setIsMenuOpen(false); }; const features = [ { icon: "fa-chart-line", title: "Phân tích nâng cao", description: "Phân tích dữ liệu thị trường theo thời gian thực với mô hình dự đoán", }, { icon: "fa-robot", title: "Tích hợp AI", description: "Thuật toán học máy để nhận diện mẫu", }, { icon: "fa-lock", title: "Giao dịch an toàn", description: "Mã hóa đầu cuối cho mọi hoạt động tài chính", }, { icon: "fa-tachometer-alt", title: "Hiệu suất cao", description: "Xử lý tốc độ cao cho các quyết định nhạy thời gian", }, ]; const workflowSteps = [ { number: "01", title: "Thu thập dữ liệu", description: "Tập hợp dữ liệu thị trường tài chính từ nhiều nguồn", }, { number: "02", title: "Xác minh Blockchain", description: "Kiểm tra tính toàn vẹn dữ liệu qua sổ cái phân tán", }, { number: "03", title: "Xử lý AI", description: "Phân tích mẫu và tạo ra các thông tin chi tiết", }, { number: "04", title: "Kết quả chiến lược", description: "Cung cấp thông tin tài chính hành động được", }, ]; const enhancements = [ { icon: "fa-mobile-alt", title: "Truy cập di động", description: "Giao dịch và phân tích mọi lúc mọi nơi với nền tảng di động đáp ứng", }, { icon: "fa-plug", title: "Tích hợp API", description: "Kết nối với các hệ thống tài chính hiện có qua API mạnh mẽ", }, { icon: "fa-bell", title: "Cảnh báo thời gian thực", description: "Nhận thông báo tức thì về biến động thị trường và cơ hội", }, { icon: "fa-users", title: "Thông tin cộng đồng", description: "Tận dụng trí tuệ tập thể từ cộng đồng người dùng", }, ]; const courses = [ { title: "Cơ bản về Blockchain", duration: "4 tuần", level: "Sơ cấp", }, { title: "Phân tích thị trường nâng cao", duration: "6 tuần", level: "Trung cấp", }, { title: "Chiến lược giao dịch AI", duration: "8 tuần", level: "Cao cấp" }, { title: "Thành thạo Tài chính phi tập trung", duration: "10 tuần", level: "Chuyên gia", }, ]; return ( <div className="min-h-screen bg-[#0a0e17] text-gray-100 font-poppins overflow-x-hidden"> {/* Thanh điều hướng */} <nav className="fixed w-full bg-[#0a0e17]/90 backdrop-blur-md z-50 border-b border-[#2a3a5a]"> <div className="container mx-auto px-4 py-4"> <div className="flex justify-between items-center"> <div className="flex items-center"> <div className="text-[#4d8bf8] text-2xl font-bold"> MarketMind<span className="text-[#64ffda]">Chain</span> </div> </div> <div className="hidden md:flex space-x-8"> {Object.keys(sectionRefs).map( (section) => section !== "trang-chu" && ( <button key={section} onClick={() => scrollToSection(section)} className={`text-sm uppercase tracking-wider hover:text-[#64ffda] transition-colors ${ activeSection === section ? "text-[#64ffda]" : "text-gray-300" }`} > {section === "san-pham" && "Sản phẩm"} {section === "luu-luong" && "Lưu lượng"} {section === "nang-cao" && "Nâng cao"} {section === "nghien-cuu" && "Nghiên cứu"} {section === "blockchain" && "Blockchain"} {section === "dao-tao" && "Đào tạo"} </button> ) )} </div> <div className="hidden md:block"> <button className="bg-gradient-to-r from-[#4d8bf8] to-[#64ffda] text-white px-6 py-2 rounded-full hover:opacity-90 transition-opacity"> Bắt đầu </button> </div> <div className="md:hidden"> <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-gray-300 hover:text-[#64ffda]" > <i className={`fas ${ isMenuOpen ? "fa-times" : "fa-bars" } text-xl`} ></i> </button> </div> </div> </div> {/* Menu di động */} <div className={`md:hidden ${ isMenuOpen ? "max-h-screen" : "max-h-0" } overflow-hidden transition-all duration-300 ease-in-out`} > <div className="container mx-auto px-4 py-2 flex flex-col space-y-4"> {Object.keys(sectionRefs).map( (section) => section !== "trang-chu" && ( <button key={section} onClick={() => scrollToSection(section)} className={`text-sm uppercase tracking-wider hover:text-[#64ffda] transition-colors py-2 ${ activeSection === section ? "text-[#64ffda]" : "text-gray-300" }`} > {section === "san-pham" && "Sản phẩm"} {section === "luu-luong" && "Lưu lượng"} {section === "nang-cao" && "Nâng cao"} {section === "nghien-cuu" && "Nghiên cứu"} {section === "blockchain" && "Blockchain"} {section === "dao-tao" && "Đào tạo"} </button> ) )} <button className="bg-gradient-to-r from-[#4d8bf8] to-[#64ffda] text-white px-6 py-2 rounded-full hover:opacity-90 transition-opacity w-full"> Bắt đầu </button> </div> </div> </nav> {/* Phần giới thiệu */} <section ref={sectionRefs["trang-chu"]} className="pt-32 pb-20 md:pt-40 md:pb-32 relative overflow-hidden" > <div className="absolute inset-0 bg-[url('/blockchain-bg.jpg')] bg-cover bg-center opacity-10"></div> <div className="absolute inset-0 bg-gradient-to-b from-[#0a0e17]/80 to-[#0a0e17]"></div> <div className="container mx-auto px-4 relative z-10"> <div className="flex flex-col md:flex-row items-center"> <div className="md:w-1/2 mb-10 md:mb-0"> <h1 className={`text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6 ${ isVisible["trang-chu"] ? "animate-fadeInUp" : "opacity-0" }`} > Cách mạng hóa{" "} <span className="text-[#4d8bf8]">Phân tích tài chính</span> với{" "} <span className="text-[#64ffda]">Blockchain</span> </h1> <p className={`text-xl text-gray-300 mb-8 ${ isVisible["trang-chu"] ? "animate-fadeInUp delay-200" : "opacity-0" }`} > Tận dụng sức mạnh của công nghệ phi tập trung để có được những hiểu biết chưa từng có về xu hướng thị trường và đưa ra quyết định dựa trên dữ liệu. </p> <div className={`flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 ${ isVisible["trang-chu"] ? "animate-fadeInUp delay-400" : "opacity-0" }`} > <button className="bg-gradient-to-r from-[#4d8bf8] to-[#64ffda] text-white px-8 py-3 rounded-full hover:opacity-90 transition-opacity font-medium"> Bắt đầu dùng thử miễn phí </button> <button className="border border-[#4d8bf8] text-[#4d8bf8] px-8 py-3 rounded-full hover:bg-[#4d8bf8]/10 transition-colors font-medium"> Xem bản demo </button> </div> </div> <div className="md:w-1/2 flex justify-center"> <div className={`relative ${ isVisible["trang-chu"] ? "animate-fadeInRight" : "opacity-0" }`} > <div className="w-[300px] h-[300px] md:w-[400px] md:h-[400px] bg-gradient-to-br from-[#4d8bf8]/20 to-[#64ffda]/20 rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-pulse"></div> <img src="/dashboard-mockup.png" alt="Bảng điều khiển MarketMind Chain hiển thị phân tích dữ liệu tài chính" className="relative z-10 w-full max-w-[500px]" /> </div> </div> </div> <div className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6"> {features.map((feature, index) => ( <div key={index} className={`bg-[#131b2e] p-6 rounded-xl border border-[#2a3a5a] hover:border-[#4d8bf8]/50 transition-all hover:transform hover:-translate-y-1 ${ isVisible["trang-chu"] ? `animate-fadeInUp delay-${(index + 1) * 200}` : "opacity-0" }`} > <div className="text-[#64ffda] text-3xl mb-4"> <i className={`fas ${feature.icon}`}></i> </div> <h3 className="text-lg font-semibold mb-2">{feature.title}</h3> <p className="text-gray-400 text-sm">{feature.description}</p> </div> ))} </div> </div> </section> {/* Mô tả sản phẩm */} <section ref={sectionRefs["san-pham"]} className="py-20 bg-[#0d121f]"> <div className="container mx-auto px-4"> <div className="text-center mb-16"> <h2 className={`text-3xl md:text-4xl font-bold mb-4 ${ isVisible["san-pham"] ? "animate-fadeInUp" : "opacity-0" }`} > Tương lai của{" "} <span className="text-[#4d8bf8]">Trí tuệ thị trường</span> </h2> <p className={`text-gray-300 max-w-2xl mx-auto ${ isVisible["san-pham"] ? "animate-fadeInUp delay-200" : "opacity-0" }`} > MarketMind Chain kết hợp công nghệ blockchain với phân tích nâng cao để cung cấp thông tin tài chính an toàn, minh bạch và có thể hành động. </p> </div> <div className="flex flex-col md:flex-row items-center"> <div className={`md:w-1/2 mb-10 md:mb-0 ${ isVisible["san-pham"] ? "animate-fadeInLeft" : "opacity-0" }`} > <img src="/product-visualization.png" alt="Hình ảnh trực quan về khả năng phân tích dữ liệu của MarketMind Chain" className="w-full max-w-[500px] mx-auto rounded-xl shadow-2xl" /> </div> <div className="md:w-1/2 md:pl-12"> <div className={`mb-8 ${ isVisible["san-pham"] ? "animate-fadeInRight delay-200" : "opacity-0" }`} > <div className="flex items-center mb-4"> <div className="w-12 h-12 bg-[#4d8bf8]/20 rounded-full flex items-center justify-center mr-4"> <i className="fas fa-shield-alt text-[#4d8bf8] text-xl"></i> </div> <h3 className="text-xl font-semibold"> Tính toàn vẹn dữ liệu bất biến </h3> </div> <p className="text-gray-300 pl-16"> Tất cả dữ liệu thị trường được xác minh và lưu trữ trên blockchain, đảm bảo tính minh bạch hoàn toàn và ngăn chặn thao túng. </p> </div> <div className={`mb-8 ${ isVisible["san-pham"] ? "animate-fadeInRight delay-400" : "opacity-0" }`} > <div className="flex items-center mb-4"> <div className="w-12 h-12 bg-[#64ffda]/20 rounded-full flex items-center justify-center mr-4"> <i className="fas fa-brain text-[#64ffda] text-xl"></i> </div> <h3 className="text-xl font-semibold"> Dự đoán dựa trên AI </h3> </div> <p className="text-gray-300 pl-16"> Mạng lưới thần kinh của chúng tôi phân tích mẫu trên các thị trường để dự đoán xu hướng với độ chính xác chưa từng có. </p> </div> <div className={`mb-8 ${ isVisible["san-pham"] ? "animate-fadeInRight delay-600" : "opacity-0" }`} > <div className="flex items-center mb-4"> <div className="w-12 h-12 bg-[#4d8bf8]/20 rounded-full flex items-center justify-center mr-4"> <i className="fas fa-project-diagram text-[#4d8bf8] text-xl"></i> </div> <h3 className="text-xl font-semibold"> Kiến trúc phi tập trung </h3> </div> <p className="text-gray-300 pl-16"> Nền tảng của chúng tôi hoạt động trên một mạng phân tán, loại bỏ điểm thất bại duy nhất và đảm bảo khả dụng 24/7. </p> </div> <div className={`${ isVisible["san-pham"] ? "animate-fadeInRight delay-800" : "opacity-0" }`} > <div className="flex items-center mb-4"> <div className="w-12 h-12 bg-[#64ffda]/20 rounded-full flex items-center justify-center mr-4"> <i className="fas fa-user-shield text-[#64ffda] text-xl"></i> </div> <h3 className="text-xl font-semibold"> Thiết kế tập trung vào quyền riêng tư </h3> </div> <p className="text-gray-300 pl-16"> Chiến lược giao dịch và phân tích của bạn vẫn riêng tư trong khi tận dụng trí tuệ thị trường tập thể. </p> </div> </div> </div> </div> </section> {/* Phần quy trình hoạt động */} <section ref={sectionRefs["luu-luong"]} className="py-20 bg-[#0a0e17]"> <div className="container mx-auto px-4"> <div className="text-center mb-16"> <h2 className={`text-3xl md:text-4xl font-bold mb-4 ${ isVisible["luu-luong"] ? "animate-fadeInUp" : "opacity-0" }`} > <span className="text-[#64ffda]">Quy trình</span> Hoạt động </h2> <p className={`text-gray-300 max-w-2xl mx-auto ${ isVisible["luu-luong"] ? "animate-fadeInUp delay-200" : "opacity-0" }`} > Quy trình tối ưu hóa của chúng tôi chuyển đổi dữ liệu thô thành thông tin hành động qua xác minh blockchain và phân tích AI. </p> </div> <div className="relative"> <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-[#4d8bf8] to-[#64ffda] hidden md:block"></div> <div className="space-y-12 md:space-y-0"> {workflowSteps.map((step, index) => ( <div key={index} className={`flex flex-col md:flex-row items-center ${ index % 2 === 1 ? "md:flex-row-reverse" : "" } ${ isVisible["luu-luong"] ? `animate-fadeIn delay-${index * 200}` : "opacity-0" }`} > <div className={`md:w-1/2 ${ index % 2 === 0 ? "md:pr-16 md:text-right" : "md:pl-16" }`} > <div className="bg-[#131b2e] p-8 rounded-xl border border-[#2a3a5a] hover:border-[#4d8bf8]/50 transition-all hover:transform hover:-translate-y-1"> <div className="text-[#64ffda] text-4xl font-bold mb-4"> {step.number} </div> <h3 className="text-xl font-semibold mb-3"> {step.title} </h3> <p className="text-gray-300">{step.description}</p> </div> </div> <div className="md:w-0 flex justify-center my-4 md:my-0 relative z-10"> <div className="w-12 h-12 bg-gradient-to-r from-[#4d8bf8] to-[#64ffda] rounded-full flex items-center justify-center"> <div className="w-8 h-8 bg-[#0a0e17] rounded-full flex items-center justify-center"> <div className="w-4 h-4 bg-[#64ffda] rounded-full"></div> </div> </div> </div> <div className="md:w-1/2"></div> </div> ))} </div> </div> </div> </section> {/* Phần nâng cao sản phẩm */} <section ref={sectionRefs["nang-cao"]} className="py-20 bg-[#0d121f]"> <div className="container mx-auto px-4"> <div className="text-center mb-16"> <h2 className={`text-3xl md:text-4xl font-bold mb-4 ${ isVisible["nang-cao"] ? "animate-fadeInUp" : "opacity-0" }`} > <span className="text-[#4d8bf8]">Nâng cao</span> Sản phẩm </h2> <p className={`text-gray-300 max-w-2xl mx-auto ${ isVisible["nang-cao"] ? "animate-fadeInUp delay-200" : "opacity-0" }`} > Sự đổi mới liên tục giữ MarketMind Chain ở đỉnh cao của công nghệ tài chính. </p> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> {enhancements.map((item, index) => ( <div key={index} className={`bg-[#131b2e] p-8 rounded-xl border border-[#2a3a5a] hover:border-[#64ffda] transition-all hover:transform hover:-translate-y-2 ${ isVisible["nang-cao"] ? `animate-fadeInUp delay-${index * 200}` : "opacity-0" }`} > <div className="text-[#64ffda] text-3xl mb-6"> <i className={`fas ${item.icon}`}></i> </div> <h3 className="text-xl font-semibold mb-3">{item.title}</h3> <p className="text-gray-300">{item.description}</p> </div> ))} </div> <div className={`mt-16 bg-gradient-to-r from-[#4d8bf8]/20 to-[#64ffda]/20 rounded-xl p-8 border border-[#2a3a5a] ${ isVisible["nang-cao"] ? "animate-fadeInUp delay-800" : "opacity-0" }`} > <div className="flex flex-col md:flex-row items-center"> <div className="md:w-2/3 mb-6 md:mb-0 md:pr-8"> <h3 className="text-2xl font-semibold mb-4"> Sẵn sàng trải nghiệm tương lai của phân tích thị trường? </h3> <p className="text-gray-300"> Tham gia cùng hàng ngàn nhà giao dịch và nhà phân tích tài chính đã thay đổi quy trình ra quyết định của họ với MarketMind Chain. </p> </div> <div className="md:w-1/3 flex justify-center md:justify-end"> <button className="bg-gradient-to-r from-[#4d8bf8] to-[#64ffda] text-white px-8 py-3 rounded-full hover:opacity-90 transition-opacity font-medium"> Yêu cầu bản demo </button> </div> </div> </div> </div> </section> {/* Phần nghiên cứu thị trường */} <section ref={sectionRefs["nghien-cuu"]} className="py-20 bg-[#0a0e17]"> <div className="container mx-auto px-4"> <div className="text-center mb-16"> <h2 className={`text-3xl md:text-4xl font-bold mb-4 ${ isVisible["nghien-cuu"] ? "animate-fadeInUp" : "opacity-0" }`} > <span className="text-[#64ffda]">Nghiên cứu</span> Thị trường </h2> <p className={`text-gray-300 max-w-2xl mx-auto ${ isVisible["nghien-cuu"] ? "animate-fadeInUp delay-200" : "opacity-0" }`} > Nền tảng của chúng tôi cung cấp phân tích thị trường toàn diện dựa trên dữ liệu được xác minh bởi blockchain. </p> </div> <div className="flex flex-col lg:flex-row items-center"> <div className={`lg:w-1/2 mb-10 lg:mb-0 ${ isVisible["nghien-cuu"] ? "animate-fadeInLeft" : "opacity-0" }`} > <div className="bg-[#131b2e] p-8 rounded-xl border border-[#2a3a5a]"> <div className="flex justify-between items-center mb-6"> <h3 className="text-xl font-semibold">Hiệu suất thị trường</h3> <div className="flex space-x-2"> <button className="w-8 h-8 bg-[#4d8bf8]/20 rounded-full flex items-center justify-center text-[#4d8bf8]"> <i className="fas fa-sync-alt"></i> </button> <button className="w-8 h-8 bg-[#64ffda]/20 rounded-full flex items-center justify-center text-[#64ffda]"> <i className="fas fa-expand-alt"></i> </button> </div> </div> <div className="h-[300px] relative"> <div className="absolute inset-0 bg-[url('/chart-visualization.png')] bg-contain bg-no-repeat bg-center"></div> <div className="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-[#131b2e] to-transparent"></div> </div> <div className="mt-6 grid grid-cols-3 gap-4"> <div className="text-center"> <div className="text-[#4d8bf8] text-xl font-bold"> +24.8% </div> <div className="text-gray-400 text-sm">Tăng trưởng</div> </div> <div className="text-center"> <div className="text-[#64ffda] text-xl font-bold"> 98.2% </div> <div className="text-gray-400 text-sm">Độ chính xác</div> </div> <div className="text-center"> <div className="text-[#4d8bf8] text-xl font-bold">3.2M</div> <div className="text-gray-400 text-sm">Điểm dữ liệu</div> </div> </div> </div> </div> <div className={`lg:w-1/2 lg:pl-12 ${ isVisible["nghien-cuu"] ? "animate-fadeInRight" : "opacity-0" }`} > <h3 className="text-2xl font-semibold mb-6"> Hiểu biết thị trường vượt trội </h3> <div className="space-y-6"> <div className="flex"> <div className="w-12 h-12 bg-[#4d8bf8]/20 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> <i className="fas fa-database text-[#4d8bf8]"></i> </div> <div> <h4 className="text-lg font-medium mb-2"> Phủ sóng dữ liệu toàn diện </h4> <p className="text-gray-300"> Truy cập dữ liệu từ hơn 100 thị trường toàn cầu, bao gồm cổ phiếu, tiền mã hóa, hàng hóa, và ngoại hối. </p> </div> </div> <div className="flex"> <div className="w-12 h-12 bg-[#64ffda]/20 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> <i className="fas fa-chart-pie text-[#64ffda]"></i> </div> <div> <h4 className="text-lg font-medium mb-2"> Công cụ trực quan hóa nâng cao </h4> <p className="text-gray-300"> Biểu đồ tương tác và bảng điều khiển giúp nhận diện ngay lập tức các mẫu dữ liệu phức tạp. </p> </div> </div> <div className="flex"> <div className="w-12 h-12 bg-[#4d8bf8]/20 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> <i className="fas fa-bolt text-[#4d8bf8]"></i> </div> <div> <h4 className="text-lg font-medium mb-2"> Phân tích thời gian thực </h4> <p className="text-gray-300"> Cập nhật trong mili giây đảm bảo bạn luôn làm việc với thông tin thị trường mới nhất. </p> </div> </div> <div className="flex"> <div className="w-12 h-12 bg-[#64ffda]/20 rounded-full flex items-center justify-center mr-4 flex-shrink-0"> <i className="fas fa-user-check text-[#64ffda]"></i> </div> <div> <h4 className="text-lg font-medium mb-2"> Thông tin cá nhân hóa </h4> <p className="text-gray-300"> Đề xuất dựa trên AI được tùy chỉnh theo chiến lược đầu tư và mức độ chấp nhận rủi ro của bạn. </p> </div> </div> </div> </div> </div> </div> </section> {/* Tích hợp Blockchain */} <section ref={sectionRefs["blockchain"]} className="py-20 bg-[#0d121f] relative overflow-hidden" > <div className="absolute inset-0 bg-[url('/blockchain-network.png')] bg-cover bg-center opacity-5"></div> <div className="container mx-auto px-4 relative z-10"> <div className="text-center mb-16"> <h2 className={`text-3xl md:text-4xl font-bold mb-4 ${ isVisible["blockchain"] ? "animate-fadeInUp" : "opacity-0" }`} > <span className="text-[#4d8bf8]">Tích hợp</span> Blockchain </h2> <p className={`text-gray-300 max-w-2xl mx-auto ${ isVisible["blockchain"] ? "animate-fadeInUp delay-200" : "opacity-0" }`} > Nền tảng của chúng tôi tận dụng công nghệ blockchain để đảm bảo tính toàn vẹn dữ liệu và hoạt động minh bạch. </p> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className={`bg-[#131b2e] p-8 rounded-xl border border-[#2a3a5a] ${ isVisible["blockchain"] ? "animate-fadeInUp delay-200" : "opacity-0" }`} > <div className="w-16 h-16 bg-gradient-to-br from-[#4d8bf8]/20 to-[#64ffda]/20 rounded-full flex items-center justify-center mb-6"> <i className="fas fa-link text-[#4d8bf8] text-2xl"></i> </div> <h3 className="text-xl font-semibold mb-4">Bản ghi bất biến</h3> <p className="text-gray-300 mb-4"> Tất cả dữ liệu thị trường và kết quả phân tích được ghi lại vĩnh viễn trên blockchain, tạo ra một dấu vết kiểm toán không thể thay đổi. </p> <div className="pt-4 border-t border-[#2a3a5a]"> <div className="flex items-center"> <div className="w-2 h-2 bg-[#64ffda] rounded-full mr-2"></div> <span className="text-sm text-gray-400"> Lưu trữ dữ liệu không thể can thiệp </span> </div> <div className="flex items-center mt-2"> <div className="w-2 h-2 bg-[#64ffda] rounded-full mr-2"></div> <span className="text-sm text-gray-400"> Lịch sử giao dịch có thể xác minh </span> </div> </div> </div> <div className={`bg-[#131b2e] p-8 rounded-xl border border-[#2a3a5a] ${ isVisible["blockchain"] ? "animate-fadeInUp delay-400" : "opacity-0" }`} > <div className="w-16 h-16 bg-gradient-to-br from-[#4d8bf8]/20 to-[#64ffda]/20 rounded-full flex items-center justify-center mb-6"> <i className="fas fa-handshake text-[#64ffda] text-2xl"></i> </div> <h3 className="text-xl font-semibold mb-4">Hợp đồng thông minh</h3> <p className="text-gray-300 mb-4"> Thực thi tự động các chiến lược giao dịch và quy trình phân tích dữ liệu thông qua hợp đồng thông minh an toàn. </p> <div className="pt-4 border-t border-[#2a3a5a]"> <div className="flex items-center"> <div className="w-2 h-2 bg-[#4d8bf8] rounded-full mr-2"></div> <span className="text-sm text-gray-400"> Thỏa thuận tự thực thi </span> </div> <div className="flex items-center mt-2"> <div className="w-2 h-2 bg-[#4d8bf8] rounded-full mr-2"></div> <span className="text-sm text-gray-400"> Giảm rủi ro bên thứ ba </span> </div> </div> </div> <div className={`bg-[#131b2e] p-8 rounded-xl border border-[#2a3a5a] ${ isVisible["blockchain"] ? "animate-fadeInUp delay-600" : "opacity-0" }`} > <div className="w-16 h-16 bg-gradient-to-br from-[#4d8bf8]/20 to-[#64ffda]/20 rounded-full flex items-center justify-center mb-6"> <i className="fas fa-coins text-[#4d8bf8] text-2xl"></i> </div> <h3 className="text-xl font-semibold mb-4">Truy cập bằng token</h3> <p className="text-gray-300 mb-4"> Nền tảng của chúng tôi sử dụng token tiện ích để cung cấp truy cập cấp độ cho các tính năng nâng cao và dữ liệu thị trường cao cấp. </p> <div className="pt-4 border-t border-[#2a3a5a]"> <div className="flex items-center"> <div className="w-2 h-2 bg-[#64ffda] rounded-full mr-2"></div> <span className="text-sm text-gray-400"> Mô hình định giá minh bạch </span> </div> <div className="flex items-center mt-2"> <div className="w-2 h-2 bg-[#64ffda] rounded-full mr-2"></div> <span className="text-sm text-gray-400"> Quản trị cộng đồng </span> </div> </div> </div> </div> <div className={`mt-16 ${ isVisible["blockchain"] ? "animate-fadeInUp delay-800" : "opacity-0" }`} > <div className="bg-gradient-to-r from-[#131b2e] to-[#1a2540] rounded-xl overflow-hidden"> <div className="flex flex-col md:flex-row"> <div className="md:w-1/2 p-8 md:p-12"> <h3 className="text-2xl font-semibold mb-4"> Kiến trúc Blockchain của chúng tôi </h3> <p className="text-gray-300 mb-6"> MarketMind Chain hoạt động trên hệ thống blockchain lai ghép kết hợp bảo mật của chuỗi công khai với hiệu suất của mạng riêng. </p> <div className="space-y-4"> <div className="flex items-center"> <div className="w-10 h-10 bg-[#4d8bf8]/20 rounded-full flex items-center justify-center mr-4"> <i className="fas fa-check text-[#4d8bf8]"></i> </div> <span>Khả năng tương thích đa chuỗi</span> </div> <div className="flex items-center"> <div className="w-10 h-10 bg-[#64ffda]/20 rounded-full flex items-center justify-center mr-4"> <i className="fas fa-check text-[#64ffda]"></i> </div> <span>Giải pháp mở rộng Layer-2</span> </div> <div className="flex items-center"> <div className="w-10 h-10 bg-[#4d8bf8]/20 rounded-full flex items-center justify-center mr-4"> <i className="fas fa-check text-[#4d8bf8]"></i> </div> <span>Chứng minh không kiến thức cho quyền riêng tư</span> </div> </div> </div> <div className="md:w-1/2 bg-[#0a0e17] p-8 md:p-12 flex items-center justify-center"> <img src="/blockchain-architecture.png" alt="Sơ đồ kiến trúc blockchain của MarketMind Chain" className="max-w-full rounded-lg shadow-lg" /> </div> </div> </div> </div> </div> </section> {/* Phần đào tạo */} <section ref={sectionRefs["dao-tao"]} className="py-20 bg-[#0a0e17]"> <div className="container mx-auto px-4"> <div className="text-center mb-16"> <h2 className={`text-3xl md:text-4xl font-bold mb-4 ${ isVisible["dao-tao"] ? "animate-fadeInUp" : "opacity-0" }`} > <span className="text-[#64ffda]">Khóa học</span> Đào tạo </h2> <p className={`text-gray-300 max-w-2xl mx-auto ${ isVisible["dao-tao"] ? "animate-fadeInUp delay-200" : "opacity-0" }`} > Nắm vững sự giao thoa giữa blockchain và phân tích tài chính với các khóa học do chuyên gia dẫn dắt. </p> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> {courses.map((course, index) => ( <div key={index} className={`bg-[#131b2e] rounded-xl overflow-hidden hover:transform hover:-translate-y-2 transition-all ${ isVisible["dao-tao"] ? `animate-fadeInUp delay-${index * 200}` : "opacity-0" }`} > <div className="h-40 bg-gradient-to-br from-[#4d8bf8]/30 to-[#64ffda]/30 relative"> <div className="absolute inset-0 flex items-center justify-center"> <i className="fas fa-graduation-cap text-white text-5xl opacity-30"></i> </div> <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-[#131b2e] to-transparent h-20"></div> <div className="absolute bottom-4 left-6"> <span className="bg-[#64ffda] text-[#0a0e17] text-xs font-bold px-3 py-1 rounded-full"> {course.level} </span> </div> </div> <div className="p-6"> <h3 className="text-xl font-semibold mb-3">{course.title}</h3> <div className="flex items-center text-gray-400 mb-4"> <i className="far fa-clock mr-2"></i> <span>{course.duration}</span> </div> <div className="flex justify-between items-center"> <div className="flex"> <div className="flex -space-x-2"> <div className="w-8 h-8 rounded-full bg-[#4d8bf8]/20 flex items-center justify-center text-[#4d8bf8] text-xs"> JD </div> <div className="w-8 h-8 rounded-full bg-[#64ffda]/20 flex items-center justify-center text-[#64ffda] text-xs"> KL </div> <div className="w-8 h-8 rounded-full bg-[#4d8bf8]/20 flex items-center justify-center text-[#4d8bf8] text-xs"> +3 </div> </div> </div> <button className="text-[#64ffda] hover:text-white transition-colors"> <i className="fas fa-arrow-right"></i> </button> </div> </div> </div> ))} </div> <div className={`mt-16 text-center ${ isVisible["dao-tao"] ? "animate-fadeInUp delay-800" : "opacity-0" }`} > <h3 className="text-2xl font-semibold mb-6"> Sẵn sàng nâng cao chuyên môn tài chính của bạn? </h3> <button className="bg-gradient-to-r from-[#4d8bf8] to-[#64ffda] text-white px-8 py-3 rounded-full hover:opacity-90 transition-opacity font-medium"> Xem tất cả khóa học </button> </div> </div> </section> {/* Chân trang */} <footer className="bg-[#0d121f] border-t border-[#2a3a5a] pt-16 pb-8"> <div className="container mx-auto px-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> <div> <div className="text-[#4d8bf8] text-2xl font-bold mb-6"> MarketMind<span className="text-[#64ffda]">Chain</span> </div> <p className="text-gray-400 mb-6"> Cách mạng hóa phân tích thị trường tài chính với công nghệ blockchain và trí tuệ nhân tạo. </p> <div className="flex space-x-4"> <a href="#" className="w-10 h-10 bg-[#131b2e] rounded-full flex items-center justify-center text-gray-400 hover:text-[#4d8bf8] transition-colors" > <i className="fab fa-twitter"></i> </a> <a href="#" className="w-10 h-10 bg-[#131b2e] rounded-full flex items-center justify-center text-gray-400 hover:text-[#4d8bf8] transition-colors" > <i className="fab fa-linkedin-in"></i> </a> <a href="#" className="w-10 h-10 bg-[#131b2e] rounded-full flex items-center justify-center text-gray-400 hover:text-[#4d8bf8] transition-colors" > <i className="fab fa-github"></i> </a> <a href="#" className="w-10 h-10 bg-[#131b2e] rounded-full flex items-center justify-center text-gray-400 hover:text-[#4d8bf8] transition-colors" > <i className="fab fa-telegram-plane"></i> </a> </div> </div> <div> <h3 className="text-lg font-semibold mb-6">Liên kết nhanh</h3> <ul className="space-y-3"> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Trang chủ </a> </li> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Về chúng tôi </a> </li> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Tính năng </a> </li> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Giá cả </a> </li> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Liên hệ </a> </li> </ul> </div> <div> <h3 className="text-lg font-semibold mb-6">Tài nguyên</h3> <ul className="space-y-3"> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Tài liệu </a> </li> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Tài liệu API </a> </li> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Blog </a> </li> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Cộng đồng </a> </li> <li> <a href="#" className="text-gray-400 hover:text-[#64ffda] transition-colors" > Hỗ trợ </a> </li> </ul> </div> <div> <h3 className="text-lg font-semibold mb-6">Đăng ký</h3> <p className="text-gray-400 mb-4"> Cập nhật các tính năng và bản phát hành mới nhất của chúng tôi. </p> <div className="flex"> <input type="email" placeholder="Email của bạn" className="bg-[#131b2e] border border-[#2a3a5a] rounded-l-lg px-4 py-2 w-full focus:outline-none focus:border-[#4d8bf8]" name="email" /> <button className="bg-[#4d8bf8] text-white px-4 rounded-r-lg hover:bg-[#4d8bf8]/90 transition-colors"> <i className="fas fa-paper-plane"></i> </button> </div> </div> </div> <div className="pt-8 border-t border-[#2a3a5a] flex flex-col md:flex-row justify-between items-center"> <div className="text-gray-400 text-sm mb-4 md:mb-0"> © 2025 MarketMind Chain. Bản quyền thuộc về chúng tôi. </div> <div className="flex space-x-6"> <a href="#" className="text-gray-400 hover:text-[#64ffda] text-sm transition-colors" > Chính sách bảo mật </a> <a href="#" className="text-gray-400 hover:text-[#64ffda] text-sm transition-colors" > Điều khoản dịch vụ </a> <a href="#" className="text-gray-400 hover:text-[#64ffda] text-sm transition-colors" > Chính sách cookie </a> </div> </div> </div> </footer> <style jsx global>{` @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 0.4; } 100% { transform: scale(1); opacity: 0.8; } } .animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; } .animate-fadeInRight { animation: fadeInRight 0.6s ease-out forwards; } .animate-fadeInLeft { animation: fadeInLeft 0.6s ease-out forwards; } .animate-fadeIn { animation: fadeIn 0.6s ease-out forwards; } .animate-pulse { animation: pulse 3s infinite; } .delay-200 { animation-delay: 0.2s; } .delay-400 { animation-delay: 0.4s; } .delay-600 { animation-delay: 0.6s; } .delay-800 { animation-delay: 0.8s; } `}</style> </div> ); } export default MainComponent; - Initial Deployment
-
63.4 kB
undefined - Follow Up Deployment
-
388 Bytes
initial commit