<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Premium Glass UI</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins", sans-serif;
}
body{
background:#050505;
}
/* CENTER */
.main-section{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
/* GRID */
.wrapper{
width:100%;
max-width:900px;
}
.grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows:180px;
gap:20px;
}
/* CARD */
.card{
position:relative;
border-radius:22px;
padding:20px;
color:#fff;
font-size:18px;
font-weight:600;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
/* PREMIUM GLASS */
background: rgba(255,255,255,0.06);
backdrop-filter: blur(20px);
border:1px solid rgba(255,255,255,0.12);
/* DEPTH */
box-shadow:
0 15px 35px rgba(0,0,0,0.8),
inset 0 0 25px rgba(255,255,255,0.05);
transition: all 0.35s ease;
overflow:hidden;
}
/* GLOW BORDER */
.card::after{
content:"";
position:absolute;
inset:-1px;
border-radius:22px;
background:linear-gradient(120deg,#ff00cc,#3333ff,#00ffee);
opacity:0;
transition:0.4s;
z-index:-1;
}
/* SHINE EFFECT */
.card::before{
content:"";
position:absolute;
top:-100%;
left:-100%;
width:200%;
height:200%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.25),
transparent
);
transform: rotate(25deg);
transition:0.6s;
}
/* HOVER */
.card:hover{
transform: translateY(-10px) scale(1.04);
box-shadow:
0 25px 60px rgba(0,0,0,0.9),
0 0 25px rgba(255,0,200,0.4);
}
.card:hover::after{
opacity:1;
}
.card:hover::before{
top:100%;
left:100%;
}
/* COLORS */
.purple{
background: linear-gradient(135deg,#6a11cb,#ff3cac);
}
.blue{
background: linear-gradient(135deg,#00c6ff,#0072ff);
}
.dark{
background: linear-gradient(135deg,#16222a,#3a6073);
}
/* SIZE */
.tall{
grid-row: span 2;
}
.wide{
grid-column: span 2;
}
/* TEXT */
.card span{
line-height:1.4;
letter-spacing:0.5px;
}
</style>
</head>
<body>
AI Assistant
Code gen:<br>code components
AI SEO
Code gen:<br>apps
Optimization<br>Suggestions
Interactions<br>with GSAP
Commenting<br>updates
Code<br>components
AEO Maturity Model
</body>
</html>]]>
