![[Source Code] Short notes Daily calm Landing Page](/api/backend/storage/public/product-media/user_3bf20fb7af5b8145/07b6d149143567f9c7ac5b18debe5c63-dot-hero-csf49ogs.gif)
[Source Code] Short notes Daily calm Landing Page
FULL SOURCE CODE: DOT. — SHORT NOTES. DAILY CALM. LANDING PAGE Bộ giao diện Landing Page tối giản, tĩnh lặng và mang phong cách Retro Nokia độc đáo dành riêng cho ứng dụng nhắn tin Peer-to-Peer, Nhật ký cá nhân, Mindfulness App hoặc Sản phẩm kỹ thuật số phong cách Minimalist! 🌟 TÍNH NĂNG NỔI BẬT: - Hiệu ứng Tin nhắn Gõ máy Nokia (TypingMessages Component): Đoạn tin nhắn hiển thị đè chính xác trên màn hình chiếc điện thoại Nokia cổ điển trong Video ("Are you here?", "Yes, I am.", "Speak soon.") với tốc độ gõ/xóa tự động và con trỏ nhấp nháy retro. - Pill Floating Navigation Bar: Thanh Menu dạng viên thuốc nổi cố định đầu trang với hiệu ứng làm mờ nền Backdrop Blur và logo "dot." bằng font Instrument Serif sang trọng. - Nút bấm CTA "Link up" với hiệu ứng Glint: Nút màu xanh nhạt nổi bật với dải lóa sáng mờ tự động mở rộng theo nhịp rê chuột. - Nghệ thuật Typography đẳng cấp: Kết hợp tinh tế giữa font Instrument Serif, Inter và Nokia Cellphone FC Small. - Fullscreen Video Loop Background: Nền video chiếc điện thoại Nokia mờ ảo mang lại sự bình yên trong kỷ nguyên số. - Responsive 100%: Tương thích mượt mà trên cả PC và thiết bị di động. 🛠️ CÔNG NGHỆ SỬ DỤNG: - React 19 / TypeScript - Motion (motion/react v12) - Font Instrument Serif, Inter & Nokia Cellphone FC Small - Vite 8 - Tailwind CSS 3 🚀 HƯỚNG DẪN CÀI ĐẶT & CHẠY DỰ ÁN: 1. Giải nén file .zip 2. Mở terminal tại thư mục dự án và chạy: npm install 3. Khởi chạy giao diện thử nghiệm: npm run dev 4. Build ra sản phẩm thực tế: npm run build (Đã đính kèm file HUONG_DAN_SU_DUNG_VA_DEPLOY.md hướng dẫn từng bước thay đổi tin nhắn, màu sắc và đưa lên mạng miễn phí!) 📩 Hỗ trợ giải đáp & hướng dẫn cài đặt nếu gặp khó khăn trong quá trình sử dụng.
Mô tả sản phẩm
FULL SOURCE CODE: DOT. — SHORT NOTES. DAILY CALM. LANDING PAGE Bộ giao diện Landing Page tối giản, tĩnh lặng và mang phong cách Retro Nokia độc đáo dành riêng cho ứng dụng nhắn tin Peer-to-Peer, Nhật ký cá nhân, Mindfulness App hoặc Sản phẩm kỹ thuật số phong cách Minimalist! 🌟 TÍNH NĂNG NỔI BẬT: - Hiệu ứng Tin nhắn Gõ máy Nokia (TypingMessages Component): Đoạn tin nhắn hiển thị đè chính xác trên màn hình chiếc điện thoại Nokia cổ điển trong Video ("Are you here?", "Yes, I am.", "Speak soon.") với tốc độ gõ/xóa tự động và con trỏ nhấp nháy retro. - Pill Floating Navigation Bar: Thanh Menu dạng viên thuốc nổi cố định đầu trang với hiệu ứng làm mờ nền Backdrop Blur và logo "dot." bằng font Instrument Serif sang trọng. - Nút bấm CTA "Link up" với hiệu ứng Glint: Nút màu xanh nhạt nổi bật với dải lóa sáng mờ tự động mở rộng theo nhịp rê chuột. - Nghệ thuật Typography đẳng cấp: Kết hợp tinh tế giữa font Instrument Serif, Inter và Nokia Cellphone FC Small. - Fullscreen Video Loop Background: Nền video chiếc điện thoại Nokia mờ ảo mang lại sự bình yên trong kỷ nguyên số. - Responsive 100%: Tương thích mượt mà trên cả PC và thiết bị di động. 🛠️ CÔNG NGHỆ SỬ DỤNG: - React 19 / TypeScript - Motion (motion/react v12) - Font Instrument Serif, Inter & Nokia Cellphone FC Small - Vite 8 - Tailwind CSS 3 🚀 HƯỚNG DẪN CÀI ĐẶT & CHẠY DỰ ÁN: 1. Giải nén file .zip 2. Mở terminal tại thư mục dự án và chạy: npm install 3. Khởi chạy giao diện thử nghiệm: npm run dev 4. Build ra sản phẩm thực tế: npm run build (Đã đính kèm file HUONG_DAN_SU_DUNG_VA_DEPLOY.md hướng dẫn từng bước thay đổi tin nhắn, màu sắc và đưa lên mạng miễn phí!) 📩 Hỗ trợ giải đáp & hướng dẫn cài đặt nếu gặp khó khăn trong quá trình sử dụng.