UI/UX Showcase

Bộ sưu tập Component VLEDU

Các khối giao diện mẫu (Bento Grid, Buttons, Cards) thiết kế theo chuẩn Awwwards và 21st.dev. Copy code để triển khai nhanh vào dự án chính.

Feature Bento Grid (21st.dev Style)

Bố cục Bento mượt mà, phù hợp để trình bày tính năng nổi bật.

Học mọi lúc mọi nơi

Nền tảng VLEDU hỗ trợ đa thiết bị, lưu trữ tiến độ học tập trên đám mây theo thời gian thực.

Tốc độ cao

Video streaming cực mượt với công nghệ CDN toàn cầu.

import { motion } from "framer-motion";
import { Sparkles, Zap, Shield } from "lucide-react";

export function FeatureBento() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
      <motion.div 
        whileHover={{ y: -5 }}
        className="col-span-1 md:col-span-2 bg-gradient-to-br from-slate-900 to-slate-800 p-8 rounded-3xl text-white relative overflow-hidden group"
      >
        <div className="absolute top-0 right-0 p-8 opacity-20 group-hover:scale-110 transition-transform duration-500">
          <Sparkles className="w-32 h-32" />
        </div>
        <h3 className="text-2xl font-bold mb-3 z-10 relative">Học mọi lúc mọi nơi</h3>
        <p className="text-slate-300 z-10 relative max-w-sm">Nền tảng VLEDU hỗ trợ đa thiết bị, lưu trữ tiến độ học tập trên đám mây theo thời gian thực.</p>
      </motion.div>
      <motion.div 
        whileHover={{ y: -5 }}
        className="col-span-1 bg-primary/10 border border-primary/20 p-8 rounded-3xl text-slate-900"
      >
        <div className="bg-primary/20 w-12 h-12 rounded-full flex items-center justify-center mb-4 text-primary">
          <Zap className="w-6 h-6" />
        </div>
        <h3 className="text-xl font-bold mb-2">Tốc độ cao</h3>
        <p className="text-sm text-slate-600">Video streaming mượt mà với công nghệ CDN toàn cầu.</p>
      </motion.div>
    </div>
  );
}

Liquid Glass Button (Framer Motion)

Nút bấm tương tác có hiệu ứng nổi và hover scale nhẹ nhàng.

import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";

export function LiquidGlassButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="group relative px-8 py-4 bg-slate-900 text-white rounded-2xl font-bold text-lg overflow-hidden shadow-xl shadow-slate-900/20"
    >
      <div className="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]" />
      <span className="flex items-center gap-2">
        Bắt đầu ngay
        <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
      </span>
    </motion.button>
  );
}

Premium Pricing Card

Thẻ giá (Pricing Card) hiện đại với hiệu ứng Glassmorphism và viền gradient.

PRO

999.000đ

Truy cập toàn bộ khóa học E-7.

Video bài giảng 4K
Bài tập thực hành
Chứng chỉ hoàn thành

import { motion } from "framer-motion";
import { Check } from "lucide-react";

export function PricingCard() {
  return (
    <motion.div 
      whileHover={{ y: -10 }}
      className="relative max-w-sm mx-auto rounded-[2.5rem] bg-white p-8 shadow-[0_20px_40px_-15px_rgba(0,0,0,0.1)] border border-slate-100 overflow-hidden"
    >
      <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-primary to-green-400" />
      <div className="inline-block px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-bold tracking-wide mb-6">
        PRO
      </div>
      <h3 className="text-4xl font-extrabold text-slate-900 mb-2">999.000đ</h3>
      <p className="text-slate-500 mb-8 font-medium">Truy cập toàn bộ khóa học E-7.</p>
      
      <ul className="space-y-4 mb-8">
        {['Video bài giảng 4K', 'Bài tập thực hành', 'Chứng chỉ hoàn thành'].map((feature, i) => (
          <li key={i} className="flex items-center gap-3 text-slate-700 font-medium">
            <div className="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center">
              <Check className="w-4 h-4" />
            </div>
            {feature}
          </li>
        ))}
      </ul>

      <button className="w-full h-14 rounded-2xl bg-slate-900 text-white font-bold text-lg hover:bg-slate-800 transition-colors shadow-lg shadow-slate-900/20">
        Mua ngay
      </button>
    </motion.div>
  );
}