Smart Classroom
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
href="https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@500;600;700;800&family=Hind+Siliguri:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap"
rel="stylesheet"
/>
<style>
.ic-page {
/* PORTABILITY: this element is now a size container, so every
@container rule below responds to the width of whatever
parent/container you drop this section into, not the browser
viewport. Nothing else about the design has been changed. */
container-type: inline-size;
container-name: ic-root;
/* ===== BACKGROUND: pure white base, neutral tints derived from it ===== */
--bg: #ffffff;
--bg-alt: #f5f6f8;
--panel: #ffffff;
--panel-2: #fafbfc;
--border: rgba(20, 22, 30, 0.11);
--border-soft: rgba(20, 22, 30, 0.06);
--text: #1c1c22;
--text-dim: #62636d;
--text-mute: #9a9aa4;
--blue: #2a5dd9;
--blue-dim: rgba(42, 93, 217, 0.1);
--violet: #7c5cfc;
--violet-dim: rgba(124, 92, 252, 0.1);
--amber: #e8960b;
--amber-dim: rgba(232, 150, 11, 0.14);
--red: #e14b3e;
--red-dim: rgba(225, 75, 62, 0.1);
--green: #12967f;
--green-dim: rgba(18, 150, 127, 0.12);
--radius: 18px;
--font-display: "Baloo Da 2", sans-serif;
--font-body: "Hind Siliguri", sans-serif;
--font-mono: "JetBrains Mono", monospace;
}
.ic-page * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ic-page {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
line-height: 1.65;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
}
.ic-page a {
color: inherit;
text-decoration: none;
}
.ic-page img {
max-width: 100%;
display: block;
}
.ic-page ::selection {
background: var(--amber);
color: #241b12;
}
/* progress bar */
.ic-page #progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(
90deg,
var(--blue),
var(--violet),
var(--amber)
);
width: 0%;
z-index: 300;
transition: width 0.1s linear;
}
/* background texture: ruled notebook lines */
.ic-page .bg-rule {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
to bottom,
transparent 0 40px,
rgba(42, 93, 217, 0.05) 40px 41px
);
-webkit-mask-image: radial-gradient(
ellipse 85% 65% at 50% 0%,
#000 35%,
transparent 100%
);
mask-image: radial-gradient(
ellipse 85% 65% at 50% 0%,
#000 35%,
transparent 100%
);
pointer-events: none;
}
.ic-page .margin-rule {
position: absolute;
top: 0;
bottom: 0;
left: 70px;
width: 2px;
background: rgba(225, 75, 62, 0.35);
pointer-events: none;
display: none;
}
.ic-page .glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.16;
pointer-events: none;
}
.ic-page .wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;
position: relative;
}
.ic-page .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.03em;
color: var(--blue);
padding: 6px 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--blue-dim);
}
.ic-page .eyebrow span.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 8px var(--blue);
animation: ic-blink 1.8s ease-in-out infinite;
}
@keyframes ic-blink {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(0.7);
}
}
.ic-page h1,
.ic-page h2,
.ic-page h3,
.ic-page h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.005em;
color: var(--text);
}
.ic-page .section-head {
max-width: 640px;
margin-bottom: 52px;
}
.ic-page .section-head h2 {
font-size: clamp(26px, 4cqi, 40px);
line-height: 1.22;
margin-top: 14px;
}
.ic-page .section-head p {
color: var(--text-dim);
font-size: 16.5px;
margin-top: 14px;
}
/* ===== REVEAL: renders instantly, no scroll/IntersectionObserver dependency =====
Content is visible by default (opacity:1 / no transform) so it can never get
stuck hidden if JS doesn't run or the host page's scroll container behaves
oddly. A short one-time fade/rise plays on load purely via CSS animation. */
.ic-page .reveal {
opacity: 1;
transform: none;
animation: ic-fadein 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ic-page .reveal.in {
opacity: 1;
transform: none;
}
@keyframes ic-fadein {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ic-page .modes-grid .reveal:nth-child(1),
.ic-page .feat-grid .reveal:nth-child(1),
.ic-page .games-grid .reveal:nth-child(1),
.ic-page .uc-grid .reveal:nth-child(1),
.ic-page .screens-grid .reveal:nth-child(1) {
animation-delay: 0.02s;
}
.ic-page .modes-grid .reveal:nth-child(2),
.ic-page .feat-grid .reveal:nth-child(2),
.ic-page .games-grid .reveal:nth-child(2),
.ic-page .uc-grid .reveal:nth-child(2),
.ic-page .screens-grid .reveal:nth-child(2) {
animation-delay: 0.1s;
}
.ic-page .modes-grid .reveal:nth-child(3),
.ic-page .feat-grid .reveal:nth-child(3),
.ic-page .games-grid .reveal:nth-child(3),
.ic-page .uc-grid .reveal:nth-child(3),
.ic-page .screens-grid .reveal:nth-child(3) {
animation-delay: 0.18s;
}
.ic-page .games-grid .reveal:nth-child(4),
.ic-page .uc-grid .reveal:nth-child(4),
.ic-page .screens-grid .reveal:nth-child(4) {
animation-delay: 0.26s;
}
.ic-page .screens-grid .reveal:nth-child(5) {
animation-delay: 0.34s;
}
/* ============ NAV ============ */
.ic-page #nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border-soft);
display: none;
}
.ic-page #nav .bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 28px;
max-width: 1180px;
margin: 0 auto;
}
.ic-page .brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
}
.ic-page .brand .mark {
width: 32px;
height: 32px;
border-radius: 9px;
background: linear-gradient(135deg, var(--blue), var(--violet));
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #fff;
font-weight: 700;
box-shadow: 0 6px 14px -6px rgba(42, 93, 217, 0.6);
}
.ic-page .brand small {
display: block;
font-family: var(--font-mono);
font-weight: 500;
font-size: 10.5px;
color: var(--text-mute);
letter-spacing: 0.04em;
}
.ic-page #nav nav {
display: flex;
gap: 28px;
align-items: center;
}
.ic-page #nav nav a:not(.btn) {
font-size: 14.5px;
color: var(--text-dim);
font-weight: 600;
transition: color 0.2s;
position: relative;
padding-bottom: 2px;
}
.ic-page #nav nav a:not(.btn)::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 0;
height: 2px;
background: var(--blue);
transition: width 0.25s ease;
}
.ic-page #nav nav a:not(.btn):hover {
color: var(--text);
}
.ic-page #nav nav a:not(.btn):hover::after {
width: 100%;
}
.ic-page .btn {
font-family: var(--font-body);
font-weight: 700;
font-size: 14.5px;
padding: 11px 22px;
border-radius: 11px;
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition:
transform 0.2s,
box-shadow 0.2s,
background 0.2s;
position: relative;
overflow: hidden;
}
.ic-page .btn::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.55),
transparent
);
transform: skewX(-20deg);
transition: left 0.55s ease;
}
.ic-page .btn:hover::before {
left: 120%;
}
.ic-page .btn-primary {
background: linear-gradient(135deg, var(--blue), #4f7bff);
color: #fff;
box-shadow: 0 10px 24px -10px rgba(42, 93, 217, 0.55);
}
.ic-page .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -10px rgba(42, 93, 217, 0.65);
}
.ic-page .btn-ghost {
background: var(--panel);
border-color: var(--border);
color: var(--text);
}
.ic-page .btn-ghost:hover {
border-color: var(--blue);
color: var(--blue);
transform: translateY(-2px);
}
.ic-page .navtoggle {
display: none;
background: none;
border: 1px solid var(--border);
border-radius: 8px;
width: 38px;
height: 38px;
color: var(--text);
font-size: 18px;
}
/* ============ HERO ============ */
.ic-page #hero {
position: relative;
padding: 96px 0 70px;
overflow: hidden;
}
.ic-page .glow-a {
width: 520px;
height: 520px;
background: var(--blue);
top: -220px;
left: -120px;
}
.ic-page .glow-b {
width: 460px;
height: 460px;
background: var(--amber);
top: 60px;
right: -180px;
}
.ic-page .doodle {
position: absolute;
font-size: 26px;
opacity: 0.5;
pointer-events: none;
animation: ic-drift 9s ease-in-out infinite;
}
.ic-page .doodle.d1 {
top: 14%;
left: 6%;
animation-duration: 8s;
}
.ic-page .doodle.d2 {
top: 60%;
left: 2%;
animation-duration: 11s;
animation-delay: 0.6s;
}
.ic-page .doodle.d3 {
top: 8%;
right: 8%;
animation-duration: 10s;
animation-delay: 1.2s;
}
.ic-page .doodle.d4 {
bottom: 10%;
right: 4%;
animation-duration: 7.5s;
animation-delay: 0.3s;
}
@keyframes ic-drift {
0%,
100% {
transform: translateY(0) rotate(-6deg);
}
50% {
transform: translateY(-16px) rotate(6deg);
}
}
.ic-page .hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.ic-page #hero h1 {
font-size: clamp(32px, 4.6cqi, 52px);
line-height: 1.22;
margin-top: 20px;
}
.ic-page #hero h1 em {
font-style: normal;
background: linear-gradient(
90deg,
var(--blue),
var(--violet),
var(--amber)
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: ic-sheen 5s linear infinite;
}
@keyframes ic-sheen {
to {
background-position: 200% center;
}
}
.ic-page #hero .lead {
font-size: 17.5px;
color: var(--text-dim);
max-width: 520px;
margin-top: 20px;
}
.ic-page .hero-cta {
display: flex;
gap: 14px;
margin-top: 34px;
flex-wrap: wrap;
}
/* Static stat chips — numbers are plain HTML text, no JS/animation
involved, so there is nothing that can freeze or race on load. */
.ic-page .hero-stats {
display: flex;
gap: 12px;
margin-top: 40px;
flex-wrap: wrap;
}
.ic-page .stat-chip {
display: flex;
align-items: center;
gap: 12px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
padding: 11px 16px 11px 12px;
box-shadow: 0 10px 22px -16px rgba(20, 22, 30, 0.16);
}
.ic-page .stat-ic {
flex: none;
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.ic-page .stat-txt {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.ic-page .stat-txt b {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: var(--text);
}
.ic-page .stat-txt span {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-mute);
white-space: nowrap;
}
.ic-page .stat-chip.stat-blue .stat-ic {
background: var(--blue-dim);
color: var(--blue);
}
.ic-page .stat-chip.stat-violet .stat-ic {
background: var(--violet-dim);
color: var(--violet);
}
.ic-page .stat-chip.stat-amber .stat-ic {
background: var(--amber-dim);
color: var(--amber);
}
.ic-page .stat-chip.stat-green .stat-ic {
background: var(--green-dim);
color: var(--green);
}
/* signature: smartboard mock */
.ic-page .stage {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 30px 70px -30px rgba(20, 22, 30, 0.18);
overflow: hidden;
position: relative;
transition: transform 0.4s ease;
}
.ic-page .stage:hover {
transform: translateY(-4px) rotate(-0.3deg);
}
.ic-page .stage-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bg-alt);
border-bottom: 1px solid var(--border-soft);
}
.ic-page .stage-dots {
display: flex;
gap: 6px;
}
.ic-page .stage-dots i {
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
}
.ic-page .stage-dots i:nth-child(1) {
background: #ff5f57;
}
.ic-page .stage-dots i:nth-child(2) {
background: #febc2e;
}
.ic-page .stage-dots i:nth-child(3) {
background: #28c840;
}
.ic-page .conn-pill {
font-family: var(--font-mono);
font-size: 11.5px;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--panel-2);
color: var(--blue);
display: flex;
align-items: center;
gap: 6px;
transition: all 0.4s ease;
}
.ic-page .conn-pill .pulse {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor;
animation: ic-blink 1.4s infinite;
}
.ic-page .stage-body {
display: flex;
height: 300px;
}
.ic-page .stage-tools {
width: 52px;
background: var(--bg-alt);
border-right: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
align-items: center;
padding: 14px 0;
gap: 14px;
}
.ic-page .stage-tools .t {
width: 32px;
height: 32px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: var(--text-dim);
border: 1px solid transparent;
transition: all 0.2s;
}
.ic-page .stage-tools .t.active {
background: var(--blue-dim);
color: var(--blue);
border-color: rgba(42, 93, 217, 0.3);
}
.ic-page .stage-canvas {
flex: 1;
position: relative;
background:
radial-gradient(
circle at 30% 20%,
rgba(124, 92, 252, 0.07),
transparent 55%
),
radial-gradient(
circle at 80% 80%,
rgba(42, 93, 217, 0.07),
transparent 55%
);
}
.ic-page .stage-canvas svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.ic-page .draw-path {
stroke-dasharray: 900;
stroke-dashoffset: 900;
animation: ic-draw 4.5s ease-in-out infinite;
}
.ic-page .draw-path.p2 {
animation-delay: 0.4s;
}
.ic-page .draw-path.p3 {
animation-delay: 0.8s;
}
@keyframes ic-draw {
0% {
stroke-dashoffset: 900;
}
55% {
stroke-dashoffset: 0;
}
90% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -900;
}
}
.ic-page .float-card {
position: absolute;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 12px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
box-shadow: 0 14px 30px -14px rgba(20, 22, 30, 0.18);
animation: ic-bob 4.5s ease-in-out infinite;
}
@keyframes ic-bob {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
.ic-page .float-card.leaderboard {
top: 16px;
right: 16px;
width: 150px;
}
.ic-page .float-card.leaderboard b {
color: var(--amber);
font-family: var(--font-body);
font-size: 12px;
display: block;
margin-bottom: 6px;
}
.ic-page .lb-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
color: var(--text-dim);
}
.ic-page .lb-row b {
color: var(--text);
font-weight: 700;
}
.ic-page .cam-bubble {
position: absolute;
bottom: 14px;
right: 16px;
width: 74px;
height: 56px;
border-radius: 10px;
background: linear-gradient(135deg, #eef2ff, #fdf6e8);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.ic-page .live-tag {
position: absolute;
top: -9px;
left: 6px;
background: var(--red);
color: #fff;
font-family: var(--font-mono);
font-size: 9px;
padding: 2px 6px;
border-radius: 5px;
letter-spacing: 0.03em;
animation: ic-blink 1.6s infinite;
}
.ic-page .stage-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
background: var(--bg-alt);
border-top: 1px solid var(--border-soft);
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-mute);
}
.ic-page .ticker-wrap {
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
background: var(--bg-alt);
overflow: hidden;
margin-top: 88px;
}
.ic-page .ticker {
display: flex;
gap: 48px;
white-space: nowrap;
padding: 15px 0;
animation: ic-scroll 28s linear infinite;
width: max-content;
}
.ic-page .ticker span {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-mute);
letter-spacing: 0.02em;
}
.ic-page .ticker span b {
color: var(--blue);
}
@keyframes ic-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ============ CONNECTION MODES ============ */
.ic-page #modes {
padding: 110px 0 90px;
position: relative;
}
.ic-page .modes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.ic-page .mode-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 26px;
position: relative;
overflow: hidden;
transition:
transform 0.3s,
border-color 0.3s,
box-shadow 0.3s;
}
.ic-page .mode-card:hover {
transform: translateY(-6px) rotate(-0.5deg);
border-color: rgba(42, 93, 217, 0.35);
box-shadow: 0 20px 40px -20px rgba(20, 22, 30, 0.18);
}
.ic-page .mode-card .ic {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 18px;
transition: transform 0.3s;
}
.ic-page .mode-card:hover .ic {
transform: scale(1.12) rotate(-6deg);
}
.ic-page .mode-card h3 {
font-size: 19px;
margin-bottom: 8px;
}
.ic-page .mode-card p {
font-size: 14.5px;
color: var(--text-dim);
}
.ic-page .mode-card .tag {
display: inline-block;
margin-top: 16px;
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--text-mute);
}
.ic-page .mode-card.m1 .ic {
background: var(--green-dim);
color: var(--green);
}
.ic-page .mode-card.m2 .ic {
background: var(--violet-dim);
color: var(--violet);
}
.ic-page .mode-card.m3 .ic {
background: var(--amber-dim);
color: var(--amber);
}
/* ============ FEATURE SPLIT ============ */
.ic-page .split-tabs {
display: flex;
gap: 10px;
margin-bottom: 44px;
}
.ic-page .split-tab {
font-family: var(--font-mono);
font-size: 13px;
padding: 9px 18px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--text-dim);
cursor: pointer;
background: var(--panel);
}
.ic-page .split-tab.active {
background: var(--blue);
color: #fff;
border-color: var(--blue);
font-weight: 700;
}
.ic-page #student,
.ic-page #teacher {
padding: 0 0 110px;
position: relative;
}
.ic-page .feat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ic-page .feat-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 26px 24px;
transition:
transform 0.3s,
box-shadow 0.3s;
}
.ic-page .feat-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 36px -20px rgba(20, 22, 30, 0.16);
}
.ic-page .feat-card .num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--blue);
}
.ic-page .feat-card h4 {
font-size: 17.5px;
margin: 10px 0 8px;
}
.ic-page .feat-card p {
font-size: 14px;
color: var(--text-dim);
}
.ic-page #teacher {
padding-top: 20px;
}
.ic-page .teacher-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 20px;
}
.ic-page .teacher-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.ic-page .t-row {
display: flex;
gap: 16px;
padding: 20px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
align-items: flex-start;
transition:
transform 0.25s,
border-color 0.25s;
}
.ic-page .t-row:hover {
transform: translateX(6px);
border-color: rgba(124, 92, 252, 0.35);
}
.ic-page .t-row .ic {
flex: none;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--violet-dim);
color: var(--violet);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.ic-page .t-row h4 {
font-size: 16px;
margin-bottom: 4px;
}
.ic-page .t-row p {
font-size: 13.7px;
color: var(--text-dim);
}
.ic-page .board-panel {
background: linear-gradient(160deg, var(--panel), var(--bg-alt));
border: 1px solid var(--border);
border-radius: 16px;
padding: 26px;
position: sticky;
top: 100px;
height: fit-content;
}
.ic-page .board-panel h3 {
font-size: 18px;
margin-bottom: 6px;
}
.ic-page .board-panel p {
font-size: 13.7px;
color: var(--text-dim);
margin-bottom: 18px;
}
.ic-page .board-tools-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ic-page .board-tools-row span {
font-family: var(--font-mono);
font-size: 11.5px;
padding: 6px 10px;
border-radius: 8px;
background: var(--panel-2);
border: 1px solid var(--border);
color: var(--text-dim);
transition:
transform 0.2s,
color 0.2s;
}
.ic-page .board-tools-row span:hover {
transform: translateY(-2px);
color: var(--blue);
}
.ic-page .swatches {
display: flex;
gap: 8px;
margin-top: 18px;
}
.ic-page .swatches i {
width: 20px;
height: 20px;
border-radius: 6px;
display: block;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.ic-page .swatches i:hover {
transform: scale(1.25);
}
/* ============ APP SCREENS (PLACEHOLDER GRID) ============ */
.ic-page #screens {
padding: 0 0 110px;
position: relative;
}
.ic-page .screens-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.ic-page .screen-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
transition:
transform 0.3s,
box-shadow 0.3s,
border-color 0.3s;
}
.ic-page .screen-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -20px rgba(20, 22, 30, 0.18);
}
.ic-page .screen-frame {
border-bottom: 1px solid var(--border-soft);
}
.ic-page .screen-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bg-alt);
}
.ic-page .screen-dots {
display: flex;
gap: 5px;
flex: none;
}
.ic-page .screen-dots i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--border);
display: block;
}
.ic-page .screen-url {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-mute);
}
/* Demo image inside each frame: aspect-ratio box, cropped to fill,
background color shows for a beat before the (instant, inline)
SVG paints. Swap the <img> src for a real screenshot any time. */
.ic-page .screen-img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
background: var(--ph-bg, var(--bg-alt));
}
.ic-page .screen-card figcaption {
padding: 15px 18px 18px;
}
.ic-page .screen-card figcaption b {
display: block;
font-family: var(--font-display);
font-size: 16px;
margin-bottom: 4px;
color: var(--text);
}
.ic-page .screen-card figcaption span {
font-size: 13px;
color: var(--text-dim);
}
.ic-page .screen-card.sc-blue {
--ph-bg: var(--blue-dim);
}
.ic-page .screen-card.sc-blue .screen-ic {
color: var(--blue);
}
.ic-page .screen-card.sc-amber {
--ph-bg: var(--amber-dim);
}
.ic-page .screen-card.sc-amber .screen-ic {
color: var(--amber);
}
.ic-page .screen-card.sc-violet {
--ph-bg: var(--violet-dim);
}
.ic-page .screen-card.sc-violet .screen-ic {
color: var(--violet);
}
.ic-page .screen-card.sc-green {
--ph-bg: var(--green-dim);
}
.ic-page .screen-card.sc-green .screen-ic {
color: var(--green);
}
.ic-page .screen-card.sc-red {
--ph-bg: var(--red-dim);
}
.ic-page .screen-card.sc-red .screen-ic {
color: var(--red);
}
/* ============ GAMES ============ */
.ic-page #games {
padding: 110px 0;
position: relative;
background: var(--bg-alt);
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.ic-page .games-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.ic-page .game-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px 20px;
position: relative;
overflow: hidden;
min-height: 210px;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition:
transform 0.3s,
box-shadow 0.3s;
}
.ic-page .game-card:hover {
transform: translateY(-6px) rotate(0.6deg);
box-shadow: 0 22px 44px -20px rgba(20, 22, 30, 0.2);
}
.ic-page .game-card .glyph {
position: absolute;
top: 20px;
left: 20px;
font-size: 30px;
animation: ic-bob 3.6s ease-in-out infinite;
}
.ic-page .game-card:nth-child(2) .glyph {
animation-delay: 0.3s;
}
.ic-page .game-card:nth-child(3) .glyph {
animation-delay: 0.6s;
}
.ic-page .game-card:nth-child(4) .glyph {
animation-delay: 0.9s;
}
.ic-page .game-card .badge {
position: absolute;
top: 20px;
right: 18px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-mute);
}
.ic-page .game-card h4 {
font-size: 16.5px;
margin-bottom: 6px;
}
.ic-page .game-card p {
font-size: 13px;
color: var(--text-dim);
}
.ic-page .game-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.45;
background: radial-gradient(
circle at 85% 90%,
var(--gc, var(--blue)) 0%,
transparent 60%
);
}
.ic-page .game-card:nth-child(1) {
--gc: rgba(42, 93, 217, 0.14);
}
.ic-page .game-card:nth-child(2) {
--gc: rgba(232, 150, 11, 0.14);
}
.ic-page .game-card:nth-child(3) {
--gc: rgba(124, 92, 252, 0.14);
}
.ic-page .game-card:nth-child(4) {
--gc: rgba(225, 75, 62, 0.14);
}
/* ============ USE CASES ============ */
.ic-page #usecases {
padding: 110px 0;
}
.ic-page .uc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.ic-page .uc-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px;
transition:
border-color 0.25s,
transform 0.25s;
}
.ic-page .uc-card:hover {
border-color: var(--blue);
transform: translateY(-4px);
}
.ic-page .uc-card .ic {
font-size: 22px;
margin-bottom: 14px;
display: inline-block;
transition: transform 0.3s;
}
.ic-page .uc-card:hover .ic {
transform: scale(1.15) rotate(-8deg);
}
.ic-page .uc-card p {
font-size: 13.7px;
color: var(--text-dim);
}
/* ============ PRICING ============ */
.ic-page #pricing {
padding: 110px 0;
position: relative;
}
.ic-page .price-wrap {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 50px;
align-items: center;
}
.ic-page .id-card {
perspective: 1400px;
width: 100%;
max-width: 400px;
height: 250px;
margin: 0 auto;
animation: ic-idfloat 5s ease-in-out infinite;
}
@keyframes ic-idfloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.ic-page .id-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
}
.ic-page .id-inner.flipped {
transform: rotateY(180deg);
}
.ic-page .id-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
border-radius: 18px;
padding: 26px;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 25px 55px -22px rgba(20, 22, 30, 0.2);
}
.ic-page .id-front {
background: linear-gradient(145deg, #ffffff, #f2f3f6);
}
.ic-page .id-back {
background: linear-gradient(145deg, #eaf7f3, #def1eb);
transform: rotateY(180deg);
border-color: rgba(18, 150, 127, 0.4);
}
.ic-page .id-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.ic-page .id-top .tag {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-mute);
letter-spacing: 0.04em;
}
.ic-page .id-price {
font-family: var(--font-display);
font-size: 38px;
font-weight: 700;
}
.ic-page .id-price small {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-dim);
font-weight: 500;
}
.ic-page .id-back .id-price {
color: var(--green);
}
.ic-page .id-note {
font-size: 12.5px;
color: var(--text-dim);
}
.ic-page .id-strip {
height: 34px;
background: repeating-linear-gradient(
45deg,
#e2e4ea,
#e2e4ea 6px,
#d3d6de 6px,
#d3d6de 12px
);
border-radius: 6px;
margin-top: 6px;
opacity: 0.7;
}
.ic-page .price-copy .eyebrow {
margin-bottom: 16px;
}
.ic-page .price-copy h2 {
font-size: clamp(24px, 3.4cqi, 34px);
margin-bottom: 16px;
line-height: 1.25;
}
.ic-page .price-copy p {
color: var(--text-dim);
font-size: 15.5px;
margin-bottom: 22px;
}
.ic-page .verify-btn {
font-family: var(--font-mono);
font-size: 13px;
padding: 12px 20px;
border-radius: 11px;
background: var(--green-dim);
border: 1px solid rgba(18, 150, 127, 0.4);
color: var(--green);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
transition: transform 0.2s;
}
.ic-page .verify-btn:hover {
transform: translateY(-2px);
}
.ic-page .price-list {
list-style: none;
margin-top: 26px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ic-page .price-list li {
font-size: 14px;
color: var(--text-dim);
display: flex;
gap: 10px;
align-items: flex-start;
}
.ic-page .price-list li b {
color: var(--amber);
font-family: var(--font-mono);
font-size: 12px;
margin-top: 2px;
}
.ic-page #confetti {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 250;
overflow: hidden;
}
.ic-page .confetti-piece {
position: absolute;
top: -20px;
border-radius: 2px;
animation: ic-fall linear forwards;
}
@keyframes ic-fall {
to {
transform: translateY(110vh) rotate(540deg);
opacity: 0.2;
}
}
/* ============ CONTACT / FOOTER ============ */
.ic-page #contact {
padding: 110px 0 60px;
position: relative;
}
.ic-page .contact-panel {
background: linear-gradient(150deg, var(--panel), var(--bg-alt));
border: 1px solid var(--border);
border-radius: 24px;
padding: 56px;
position: relative;
overflow: hidden;
}
.ic-page .contact-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 50px;
align-items: center;
position: relative;
z-index: 2;
}
.ic-page .contact-grid h2 {
font-size: clamp(26px, 3.6cqi, 38px);
margin-bottom: 16px;
line-height: 1.28;
}
.ic-page .contact-grid p {
color: var(--text-dim);
font-size: 15.5px;
max-width: 460px;
}
.ic-page .contact-cta {
display: flex;
gap: 14px;
margin-top: 28px;
flex-wrap: wrap;
}
.ic-page .contact-info {
display: flex;
flex-direction: column;
gap: 16px;
}
.ic-page .cinfo-row {
display: flex;
gap: 14px;
align-items: center;
background: var(--panel-2);
border: 1px solid var(--border);
padding: 15px 18px;
border-radius: 13px;
transition: transform 0.2s;
}
.ic-page .cinfo-row:hover {
transform: translateX(-4px);
}
.ic-page .cinfo-row .ic {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--blue-dim);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex: none;
}
.ic-page .cinfo-row div span {
display: block;
font-size: 11px;
color: var(--text-mute);
font-family: var(--font-mono);
}
.ic-page .cinfo-row div b {
font-size: 14.5px;
font-weight: 700;
}
.ic-page .socials {
display: flex;
gap: 10px;
margin-top: 6px;
flex-wrap: wrap;
}
.ic-page .socials a {
width: 36px;
height: 36px;
border-radius: 9px;
background: var(--panel-2);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--text-dim);
transition: all 0.2s;
}
.ic-page .socials a:hover {
color: var(--blue);
border-color: var(--blue);
transform: translateY(-3px);
}
.ic-page footer {
padding: 36px 0 50px;
text-align: center;
}
.ic-page footer p {
font-size: 13px;
color: var(--text-mute);
}
.ic-page footer p b {
color: var(--text-dim);
}
/* PORTABILITY: these were viewport (@media) breakpoints in the
original page. They're now @container queries keyed to the
width of .ic-page itself (see container-type/container-name
above), so the layout reflows based on the width of whatever
element you place this section inside, not the browser window. */
@container ic-root (max-width: 980px) {
.ic-page .hero-grid,
.ic-page .teacher-grid,
.ic-page .price-wrap,
.ic-page .contact-grid {
grid-template-columns: 1fr;
}
.ic-page .modes-grid,
.ic-page .feat-grid {
grid-template-columns: 1fr 1fr;
}
.ic-page .games-grid,
.ic-page .uc-grid,
.ic-page .screens-grid {
grid-template-columns: 1fr 1fr;
}
.ic-page .board-panel {
position: static;
}
.ic-page #nav nav {
display: none;
}
.ic-page .navtoggle {
display: block;
}
}
@container ic-root (max-width: 640px) {
.ic-page .modes-grid,
.ic-page .feat-grid,
.ic-page .games-grid,
.ic-page .uc-grid,
.ic-page .screens-grid {
grid-template-columns: 1fr;
}
.ic-page .contact-panel {
padding: 34px 22px;
}
.ic-page .id-card {
max-width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.ic-page * {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
</style>
<div class="ic-page">
<div id="progress"></div>
<div id="confetti"></div>
<!-- ===================== NAV ===================== -->
<div id="nav">
<div class="bar">
<div class="brand">
<div class="mark">IC</div>
<div>
Interactive ClassRoom
<small>RCPSC · Bigosofts</small>
</div>
</div>
<nav>
<a href="#modes">সংযোগ</a>
<a href="#student">শিক্ষার্থী</a>
<a href="#teacher">শিক্ষক</a>
<a href="#games">খেলা</a>
<a href="#pricing">মূল্য</a>
<a href="#contact" class="btn btn-primary">শুরু করুন</a>
</nav>
<button class="navtoggle">☰</button>
</div>
</div>
<!-- ===================== HERO ===================== -->
<section id="hero">
<div class="bg-rule"></div>
<div class="margin-rule"></div>
<span class="doodle d1">✏️</span>
<span class="doodle d2">📐</span>
<span class="doodle d3">⭐</span>
<span class="doodle d4">📝</span>
<div class="wrap hero-grid">
<div class="reveal">
<span class="eyebrow"
><span class="dot"></span> একটি ড্যাশবোর্ড, সব ক্লাসরুম টুল</span
>
<h1>
যেকোনো স্ক্রিনকে বানান <em>স্মার্ট, গেমিফায়েড ক্লাসরুম</em> — অনলাইন
বা সম্পূর্ণ অফলাইন।
</h1>
<p class="lead">
প্রেজেন্টেশন, স্মার্টবোর্ড, কুইজ ব্যাংক, গেমিফিকেশন আর লাইভ লিডারবোর্ড
— সবকিছু নিয়ন্ত্রিত হবে শিক্ষকের ফোন থেকেই, ঘরের ভেতরে কোনো ইন্টারনেট
ছাড়াই।
</p>
<div class="hero-cta">
<a href="https://demo.bigosofts.com" class="btn btn-primary"
>▶ লাইভ ডেমো দেখুন</a
>
<a href="#pricing" class="btn btn-ghost">মূল্য দেখুন</a>
</div>
<div class="hero-stats">
<div class="stat-chip stat-blue">
<span class="stat-ic">🎮</span>
<div class="stat-txt"><b>৪</b><span>বিল্ট-ইন গেম</span></div>
</div>
<div class="stat-chip stat-violet">
<span class="stat-ic">📶</span>
<div class="stat-txt"><b>৩</b><span>সংযোগের উপায়</span></div>
</div>
<div class="stat-chip stat-amber">
<span class="stat-ic">🔌</span>
<div class="stat-txt">
<b>০</b><span>ঘরে ইন্টারনেট লাগে না</span>
</div>
</div>
<div class="stat-chip stat-green">
<span class="stat-ic">📱</span>
<div class="stat-txt"><b>১</b><span>ফোনেই সব নিয়ন্ত্রণ</span></div>
</div>
</div>
</div>
<div class="reveal">
<div class="stage">
<div class="stage-top">
<div class="stage-dots"><i></i><i></i><i></i></div>
<div class="conn-pill" id="connPill">
<span class="pulse"></span
><span id="connText">📡 ইন্টারনেট · রিমোট</span>
</div>
</div>
<div class="stage-body">
<div class="stage-tools">
<div class="t active">✎</div>
<div class="t">▢</div>
<div class="t">◯</div>
<div class="t">🖌</div>
<div class="t">🎨</div>
<div class="t">🧹</div>
</div>
<div class="stage-canvas">
<svg viewBox="0 0 400 300" preserveAspectRatio="none">
<path
class="draw-path p1"
d="M40 210 C 90 120, 150 260, 210 150 S 320 90, 360 140"
fill="none"
stroke="#2A5DD9"
stroke-width="3"
stroke-linecap="round"
opacity="0.85"
/>
<circle
class="draw-path p2"
cx="120"
cy="70"
r="26"
fill="none"
stroke="#7C5CFC"
stroke-width="3"
opacity="0.75"
pathLength="900"
/>
<rect
class="draw-path p3"
x="230"
y="40"
width="46"
height="46"
rx="8"
fill="none"
stroke="#E8960B"
stroke-width="3"
opacity="0.75"
pathLength="900"
/>
</svg>
<div class="float-card leaderboard">
<b>🏆 লাইভ লিডারবোর্ড</b>
<div class="lb-row"><span>১. টিম নোভা</span><b>৯৮০</b></div>
<div class="lb-row"><span>২. টিম অরবিট</span><b>৮৬০</b></div>
<div class="lb-row"><span>৩. টিম ফ্লাক্স</span><b>৭৯০</b></div>
</div>
<div class="cam-bubble">
<span class="live-tag">লাইভ</span>
🧑🏫
</div>
</div>
</div>
<div class="stage-bottom">
<span>presenter-view.local</span>
<span id="stageStatus">সিঙ্ক্ড · কোনো ল্যাগ নেই</span>
</div>
</div>
</div>
</div>
<div class="ticker-wrap">
<div class="ticker">
<span><b>প্রেজেন্টেশন স্টুডিও</b></span>
<span><b>ডিজিটাল স্মার্টবোর্ড</b></span>
<span><b>লাইভ লিডারবোর্ড</b></span>
<span><b>MCQ ও CQ ব্যাংক</b></span>
<span><b>মেমরি ফ্লিপ</b></span>
<span><b>মনোপলি কুইজ</b></span>
<span><b>মেজ রানার</b></span>
<span><b>ওয়ার্ড পাজল</b></span>
<span><b>স্ক্রিন ও ক্যামেরা শেয়ার</b></span>
<span><b>সম্পূর্ণ অফলাইনে চলে</b></span>
<span><b>প্রেজেন্টেশন স্টুডিও</b></span>
<span><b>ডিজিটাল স্মার্টবোর্ড</b></span>
<span><b>লাইভ লিডারবোর্ড</b></span>
<span><b>MCQ ও CQ ব্যাংক</b></span>
<span><b>মেমরি ফ্লিপ</b></span>
<span><b>মনোপলি কুইজ</b></span>
<span><b>মেজ রানার</b></span>
<span><b>ওয়ার্ড পাজল</b></span>
<span><b>স্ক্রিন ও ক্যামেরা শেয়ার</b></span>
<span><b>সম্পূর্ণ অফলাইনে চলে</b></span>
</div>
</div>
</section>
<!-- ===================== CONNECTION MODES ===================== -->
<section id="modes">
<div class="wrap">
<div class="section-head reveal">
<span class="eyebrow"><span class="dot"></span> সংযোগ</span>
<h2>
প্রেজেন্টার স্ক্রিন নিয়ন্ত্রণ করুন নিজের মতো — ইন্টারনেট থাকুক বা না
থাকুক।
</h2>
<p>
শিক্ষকের ড্যাশবোর্ড ঘরে যে নেটওয়ার্কই থাকুক, তার সাথেই কথা বলে
প্রেজেন্টার ডিসপ্লের সাথে। কোনো আইটি সেটআপ লাগে না, কোনো তার লাগে না।
</p>
</div>
<div class="modes-grid">
<div class="mode-card m1 reveal">
<div class="ic">📶</div>
<h3>ফোন হটস্পট</h3>
<p>
শিক্ষকের ফোনের হটস্পট চালু করে প্রেজেন্টার পিসি তাতে যুক্ত করুন।
একবার যুক্ত হলে সম্পূর্ণ লোকাল — কোনো ডেটা প্ল্যান লাগে না।
</p>
<span class="tag">১০০% অফলাইন</span>
</div>
<div class="mode-card m2 reveal">
<div class="ic">🏠</div>
<h3>একই ওয়াইফাই নেটওয়ার্ক</h3>
<p>
শিক্ষকের ড্যাশবোর্ড আর প্রেজেন্টার পিসি একই ক্লাসরুম রাউটারে যুক্ত
করুন। তাৎক্ষণিক লোকাল সিঙ্ক, কোনো ক্লাউড রাউন্ড-ট্রিপ নেই।
</p>
<span class="tag">লোকাল নেটওয়ার্ক</span>
</div>
<div class="mode-card m3 reveal">
<div class="ic">🌍</div>
<h3>ইন্টারনেট · রিমোট</h3>
<p>
পৃথিবীর যেকোনো জায়গা থেকে ইন্টারনেটের মাধ্যমে প্রেজেন্টার ভিউ
নিয়ন্ত্রণ করুন — অনলাইন ক্লাস আর দূরে থেকে পড়ানোর জন্য আদর্শ।
</p>
<span class="tag">বৈশ্বিক নিয়ন্ত্রণ</span>
</div>
</div>
</div>
</section>
<!-- ===================== STUDENT FEATURES ===================== -->
<section id="student">
<div class="wrap">
<div class="section-head reveal">
<span class="eyebrow"
><span class="dot"></span> শিক্ষার্থীদের জন্য</span
>
<h2>শিক্ষার্থীরা তাদের পাশে যা দেখে।</h2>
<p>
ক্লাসের একটি পরিষ্কার, মনোযোগ-বান্ধব ভিউ — কনটেন্ট, অবস্থান আর খেলা,
সব একসাথে।
</p>
</div>
<div class="feat-grid">
<div class="feat-card reveal">
<span class="num">০১</span>
<h4>📽️ প্রেজেন্টেশন মডিউল</h4>
<p>
বড় স্ক্রিনে শিক্ষক যা দেখাচ্ছেন, শিক্ষার্থীরা ঠিক তা-ই লাইভ
প্রেজেন্টেশন, পিডিএফ ও ছবির মাধ্যমে অনুসরণ করে।
</p>
</div>
<div class="feat-card reveal">
<span class="num">০২</span>
<h4>🏆 লাইভ লিডারবোর্ড</h4>
<p>
শিক্ষার্থীরা পরীক্ষার নম্বর ও উপস্থিতির ভিত্তিতে নিজের র্যাংক
রিয়েল টাইমে পরিবর্তন হতে দেখে — রেজাল্ট কার্ডের জন্য অপেক্ষা করতে
হয় না।
</p>
</div>
<div class="feat-card reveal">
<span class="num">০৩</span>
<h4>❓ কুইজ ও সৃজনশীল প্রশ্ন মডিউল</h4>
<p>
শিক্ষার্থীরা MCQ ও CQ প্রশ্ন পড়ে এবং নিজেরাই কুইজ গেম খেলে নিজের
গতিতে টপিক রিভিশন করতে পারে।
</p>
</div>
</div>
</div>
</section>
<!-- ===================== TEACHER FEATURES ===================== -->
<section id="teacher">
<div class="wrap">
<div class="split-tabs reveal">
<div class="split-tab active">শিক্ষকদের জন্য</div>
</div>
<div class="section-head reveal">
<span class="eyebrow"
><span class="dot"></span> শিক্ষক নিয়ন্ত্রণ কক্ষ</span
>
<h2>একটি ফোন থেকেই ক্লাস চালাতে শিক্ষকের যা যা দরকার।</h2>
<p>
প্রেজেন্টেশন নিয়ন্ত্রণ, পূর্ণাঙ্গ ডিজিটাল স্মার্টবোর্ড, প্রশ্ন
ব্যাংক, শিক্ষার্থী র্যাংকিং সিস্টেম, আর চারটি রেডিমেড ক্লাসরুম গেম।
</p>
</div>
<div class="teacher-grid">
<div class="teacher-list">
<div class="t-row reveal">
<div class="ic">📽️</div>
<div>
<h4>প্রেজেন্টার নিয়ন্ত্রণ ও লাইভ আপলোড</h4>
<p>
প্রজেক্টরে যেকোনো প্রেজেন্টেশন খুলুন আর শিক্ষকের নিজের ডিভাইস
থেকে সরাসরি লাইভ স্লাইড আপলোড করুন।
</p>
</div>
</div>
<div class="t-row reveal">
<div class="ic">📡</div>
<div>
<h4>ছবি, নোট, মাইক ও স্ক্রিন শেয়ারিং</h4>
<p>
প্রেজেন্টেশনের মাঝেই ছবি, নোট, শ্রেণিবিন্যাস ট্রি, আঁকা, পিডিএফ,
লাইভ মাইক্রোফোন অডিও, স্ক্রিন শেয়ার বা লাইভ ক্যামেরা ফিড শেয়ার
করুন।
</p>
</div>
</div>
<div class="t-row reveal">
<div class="ic">🖊️</div>
<div>
<h4>পূর্ণাঙ্গ ডিজিটাল স্মার্টবোর্ড, যেকোনো সময়</h4>
<p>
যখন খুশি স্মার্টবোর্ড খুলুন — পেন, ইরেজার, রং নির্বাচক, স্ট্রোক
ও সাইজ নিয়ন্ত্রণ, শেপ, বুলেট, আইকন, ইমোজি, ছবি সংযোজন,
ডার্ক/হোয়াইটবোর্ড সুইচ, মাল্টি-পেজ বোর্ড আর ছবি এক্সপোর্ট সহ।
</p>
</div>
</div>
<div class="t-row reveal">
<div class="ic">🎥</div>
<div>
<h4>ক্যামেরা + স্মার্টবোর্ড, অনলাইন ক্লাসের জন্য</h4>
<p>
স্মার্টবোর্ড ব্যবহারের সময় ক্যামেরা বা স্ক্রিন শেয়ার করুন —
লেখা ও আঁকার সময় শিক্ষকের মুখ কোণায় একটি বাবলে দেখা যায়,
স্মার্টবোর্ড হয়ে ওঠে সম্পূর্ণ অনলাইন-ক্লাস টুল।
</p>
</div>
</div>
<div class="t-row reveal">
<div class="ic">🗂️</div>
<div>
<h4>MCQ ও CQ প্রশ্ন ব্যাংক</h4>
<p>
MCQ ও CQ প্রশ্ন আপলোড করে প্রশ্ন ব্যাংক তৈরি করুন, তারপর দরকার
হলে টপিক ফিল্টার দিয়ে প্রেজেন্টার ভিউতে ক্লাস চালান।
</p>
</div>
</div>
<div class="t-row reveal">
<div class="ic">🏆</div>
<div>
<h4>শিক্ষার্থী ডাটাবেস, নম্বর ও উপস্থিতি</h4>
<p>
শিক্ষার্থী ডাটাবেস তৈরি করুন, পরীক্ষার নম্বর ও উপস্থিতি আপডেট
করুন, আর যেকোনো মুহূর্তে লাইভ লিডারবোর্ড প্রেজেন্টার ভিউতে
পাঠান।
</p>
</div>
</div>
<div class="t-row reveal">
<div class="ic">🎮</div>
<div>
<h4>গেমিফায়েড ক্লাস পরিচালনা</h4>
<p>
পুরো পাঠ একটি খেলার মতো চালান — ইমেজ-মেমরি চ্যালেঞ্জ, কুইজ
মনোপলি, মেজ নেভিগেশন, বা প্রসঙ্গভিত্তিক ওয়ার্ড পাজল।
</p>
</div>
</div>
</div>
<div class="board-panel reveal">
<h3>🖊️ স্মার্টবোর্ড টুলকিট</h3>
<p>
একটি সাধারণ হোয়াইটবোর্ডের সব মূল টুল — ডিজিটাল, এক্সপোর্টযোগ্য আর
লাইভ শেয়ারযোগ্য।
</p>
<div class="board-tools-row">
<span>পেন</span><span>ইরেজার</span><span>শেপ</span
><span>স্ট্রোক প্রস্থ</span> <span>বুলেট</span><span>আইকন</span
><span>ইমোজি</span><span>ছবি সংযোজন</span> <span>মাল্টি-পেজ</span
><span>ছবি এক্সপোর্ট</span>
</div>
<div class="swatches">
<i style="background: #2a5dd9"></i
><i style="background: #7c5cfc"></i>
<i style="background: #e8960b"></i
><i style="background: #e14b3e"></i>
<i style="background: #12967f"></i
><i style="background: #241b12"></i>
</div>
</div>
</div>
</div>
</section>
<!-- ===================== APP SCREENS (PLACEHOLDER GRID) ===================== -->
<!--
HOW TO ADD REAL SCREENSHOTS:
Inside each .screen-placeholder div below, replace its contents with:
<img src="/path/to/your-screenshot.png" alt="বর্ণনা" loading="lazy" />
The surrounding .screen-frame (browser-style top bar) and .screen-card
(hover, border, shadow) styling will keep working as-is — you're only
swapping what's inside the placeholder box.
-->
<section id="screens">
<div class="wrap">
<div class="section-head reveal">
<span class="eyebrow"><span class="dot"></span> ভেতরে যা আছে</span>
<h2>আসল অ্যাপের ইন্টারফেস — এক নজরে।</h2>
<p>
কুইজ, লিডারবোর্ড, গেম, ড্যাশবোর্ড ও স্মার্টবোর্ড — প্রতিটি মডিউলের
প্রকৃত স্ক্রিনশট এই গ্রিডে বসবে।
</p>
</div>
<div class="screens-grid">
<figure class="screen-card sc-blue reveal">
<div class="screen-frame">
<div class="screen-bar">
<span class="screen-dots"><i></i><i></i><i></i></span>
<span class="screen-url">quiz-view.local</span>
</div>
<img
class="screen-img"
src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/929a221f-4fc7-420b-8228-2d00965f426c.jpeg"
alt="কুইজ পেজের ডেমো ইন্টারফেস — প্রশ্ন ও অপশন কার্ড"
width="400"
height="250"
loading="lazy"
/>
</div>
<figcaption>
<b>কুইজ পেজ</b>
<span>প্রশ্ন ব্যাংক থেকে ফিল্টার করা MCQ ও CQ লাইভ কুইজ ভিউ</span>
</figcaption>
</figure>
<figure class="screen-card sc-amber reveal">
<div class="screen-frame">
<div class="screen-bar">
<span class="screen-dots"><i></i><i></i><i></i></span>
<span class="screen-url">leaderboard.local</span>
</div>
<img
class="screen-img"
src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/1a31bbc7-9507-432d-a7ac-9f038d52f2d2.jpeg"
alt="লাইভ লিডারবোর্ডের ডেমো ইন্টারফেস — র্যাংক ও স্কোর তালিকা"
width="400"
height="250"
loading="lazy"
/>
</div>
<figcaption>
<b>লাইভ লিডারবোর্ড</b>
<span>নম্বর ও উপস্থিতির ভিত্তিতে রিয়েল-টাইম র্যাংকিং</span>
</figcaption>
</figure>
<figure class="screen-card sc-violet reveal">
<div class="screen-frame">
<div class="screen-bar">
<span class="screen-dots"><i></i><i></i><i></i></span>
<span class="screen-url">game-mode.local</span>
</div>
<img
class="screen-img"
src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/2496dcf5-4762-48cc-896d-b3d5d3642928.jpeg"
alt="ক্লাসরুম গেমের ডেমো ইন্টারফেস — মেমরি কার্ড গ্রিড"
width="400"
height="250"
loading="lazy"
/>
</div>
<figcaption>
<b>ক্লাসরুম গেম</b>
<span>মেমরি ফ্লিপ, মনোপলি কুইজ, মেজ রানার ও ওয়ার্ড পাজল</span>
</figcaption>
</figure>
<figure class="screen-card sc-green reveal">
<div class="screen-frame">
<div class="screen-bar">
<span class="screen-dots"><i></i><i></i><i></i></span>
<span class="screen-url">dashboard.local</span>
</div>
<img
class="screen-img"
src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/c2fc0edd-bf75-4a52-a9ad-5dd619736de9.jpeg"
alt="শিক্ষক ড্যাশবোর্ডের ডেমো ইন্টারফেস — নিয়ন্ত্রণ প্যানেল"
width="400"
height="250"
loading="lazy"
/>
</div>
<figcaption>
<b>শিক্ষক ড্যাশবোর্ড</b>
<span>ফোন থেকে পুরো ক্লাস নিয়ন্ত্রণের কেন্দ্রীয় কক্ষ</span>
</figcaption>
</figure>
<figure class="screen-card sc-red reveal">
<div class="screen-frame">
<div class="screen-bar">
<span class="screen-dots"><i></i><i></i><i></i></span>
<span class="screen-url">smartboard.local</span>
</div>
<img
class="screen-img"
src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/033bfd0c-a482-448c-a9be-02511f7264cc.jpeg"
alt="ডিজিটাল স্মার্টবোর্ডের ডেমো ইন্টারফেস — পেন ও শেপ টুল সহ ক্যানভাস"
width="400"
height="250"
loading="lazy"
/>
</div>
<figcaption>
<b>ডিজিটাল স্মার্টবোর্ড</b>
<span>পেন, শেপ, মাল্টি-পেজ ও ছবি এক্সপোর্টসহ পূর্ণাঙ্গ বোর্ড</span>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ===================== GAMES ===================== -->
<section id="games">
<div class="wrap">
<div class="section-head reveal">
<span class="eyebrow"><span class="dot"></span> গেমিফিকেশন</span>
<h2>চারটি বিল্ট-ইন গেম। লক্ষ্য একটাই — পাঠ যেন মনে থেকে যায়।</h2>
<p>
প্রতিটি গেম চলে শিক্ষকের নিজের প্রেজেন্টেশন কনটেন্ট, ছবি আর ফিল্টার
করা প্রশ্ন ব্যাংক দিয়ে।
</p>
</div>
<div class="games-grid">
<div class="game-card reveal">
<span class="glyph">🎴</span><span class="badge">খেলা ০১</span>
<h4>মেমরি ফ্লিপ</h4>
<p>
ছেলে-বনাম-মেয়ে ছবি মুখস্থ চ্যালেঞ্জ, চাক্ষুষ ধারণা মনে রাখতে
সাহায্য করে।
</p>
</div>
<div class="game-card reveal">
<span class="glyph">🎲</span><span class="badge">খেলা ০২</span>
<h4>মনোপলি কুইজ</h4>
<p>
প্রশ্ন ব্যাংক থেকে ফিল্টার করা MCQ প্রশ্ন দিয়ে বোর্ড-স্টাইল দলীয়
খেলা।
</p>
</div>
<div class="game-card reveal">
<span class="glyph">🧩</span><span class="badge">খেলা ০৩</span>
<h4>মেজ রানার</h4>
<p>
কুইজের সঠিক উত্তর দিয়ে শিক্ষার্থীরা গোলকধাঁধায় এগোনোর সুযোগ অর্জন
করে।
</p>
</div>
<div class="game-card reveal">
<span class="glyph">🔤</span><span class="badge">খেলা ০৪</span>
<h4>ওয়ার্ড পাজল</h4>
<p>
প্রসঙ্গ থেকে সঠিক শব্দ অনুমান করে শেয়ার করা ক্লাস গ্রিড পূরণ করুন।
</p>
</div>
</div>
</div>
</section>
<!-- ===================== USE CASES ===================== -->
<section id="usecases">
<div class="wrap">
<div class="section-head reveal">
<span class="eyebrow"><span class="dot"></span> কাদের জন্য</span>
<h2>শুধু "শিক্ষকদের" জন্য নয়, তার চেয়েও বেশি কিছু।</h2>
<p>
যেকোনো উপস্থাপক, যাঁর হাত থেকেই দূর থেকে বড় স্ক্রিন নিয়ন্ত্রণ দরকার।
</p>
</div>
<div class="uc-grid">
<div class="uc-card reveal">
<div class="ic">🏫</div>
<p>সরাসরি বা সম্পূর্ণ অনলাইনে দূর থেকে পড়ানো</p>
</div>
<div class="uc-card reveal">
<div class="ic">📱</div>
<p>ফোন বা ট্যাবলেট থেকে দূর থেকে স্মার্টবোর্ড চালানো</p>
</div>
<div class="uc-card reveal">
<div class="ic">🎙️</div>
<p>
হোস্ট ডিভাইসে ওয়্যারলেস মাইক্রোফোন হিসেবে লাইভ অডিও স্ট্রিম ব্যবহার
</p>
</div>
<div class="uc-card reveal">
<div class="ic">🖥️</div>
<p>
হ্যান্ড ডিভাইস থেকে বড় স্ক্রিনে স্ক্রিন বা লাইভ ক্যামেরা শেয়ার
</p>
</div>
<div class="uc-card reveal">
<div class="ic">🎮</div>
<p>যেসব শিক্ষক চান পাঠ যেন লেকচার নয়, খেলার মতো লাগুক</p>
</div>
<div class="uc-card reveal">
<div class="ic">🗂️</div>
<p>
ক্লাসের ভেতরে বা বাইরে টপিক অনুযায়ী ফিল্টার করা কুইজ বা CQ সেশন
চালানো
</p>
</div>
<div class="uc-card reveal">
<div class="ic">🏆</div>
<p>
লাইভ লিডারবোর্ডের মাধ্যমে সেরা পারফর্মারদের প্রকাশ্যে পুরস্কৃত করা
</p>
</div>
<div class="uc-card reveal">
<div class="ic">🧑💼</div>
<p>
প্রশিক্ষক ও প্রকল্প ব্যবস্থাপক যাঁরা নিজের হাত থেকে রুমে উপস্থাপনা
করেন
</p>
</div>
</div>
</div>
</section>
<!-- ===================== PRICING ===================== -->
<section id="pricing">
<div class="wrap">
<div class="price-wrap">
<div class="id-card reveal">
<div class="id-inner" id="idInner">
<div class="id-face id-front">
<div class="id-top">
<span class="tag">স্ট্যান্ডার্ড লাইসেন্স</span>
<span>🎫</span>
</div>
<div>
<div class="id-price">৳৬০০০<small> / লাইসেন্স</small></div>
<p class="id-note">
সম্পূর্ণ অ্যাক্সেস — প্রেজেন্টেশন, স্মার্টবোর্ড, কুইজ ব্যাংক,
লিডারবোর্ড ও সবগুলো ৪টি গেম।
</p>
</div>
<div class="id-strip"></div>
</div>
<div class="id-face id-back">
<div class="id-top">
<span class="tag">যাচাইকৃত শিক্ষক অফার</span>
<span>✅</span>
</div>
<div>
<div class="id-price">৳৫০০০<small> / লাইসেন্স</small></div>
<p class="id-note">
যেকোনো প্রতিষ্ঠানের নিশ্চিত শিক্ষক, প্রশিক্ষক ও প্রকল্প
ব্যবস্থাপকদের জন্য।
</p>
</div>
<div class="id-strip"></div>
</div>
</div>
</div>
<div class="price-copy reveal">
<span class="eyebrow"><span class="dot"></span> মূল্য</span>
<h2>একটি লাইসেন্স। সব মডিউল অন্তর্ভুক্ত।</h2>
<p>
Interactive ClassRoom-এর দাম ফ্ল্যাট <strong>৳৬০০০</strong>। আপনি
যদি বর্তমানে কোনো প্রতিষ্ঠানে শিক্ষক, প্রশিক্ষক বা প্রকল্প
ব্যবস্থাপক হিসেবে কর্মরত আছেন তা দেখাতে পারেন, তাহলে আপনি ছাড়যুক্ত
<strong>৳৫০০০</strong> অফার মূল্যের জন্য যোগ্য।
</p>
<button class="verify-btn" id="verifyBtn">
🪪 আমি শিক্ষক / প্রশিক্ষক / পিএম — কার্ড ফ্লিপ করুন
</button>
<ul class="price-list">
<li>
<b>✓</b> প্রেজেন্টেশন স্টুডিও, স্মার্টবোর্ড ও প্রশ্ন ব্যাংক
অন্তর্ভুক্ত
</li>
<li>
<b>✓</b> শিক্ষার্থী ডাটাবেস, নম্বর, উপস্থিতি ও লাইভ লিডারবোর্ড
</li>
<li>
<b>✓</b> সবগুলো ৪টি গেমিফিকেশন মডিউল — মেমরি ফ্লিপ, মনোপলি কুইজ,
মেজ রানার, ওয়ার্ড পাজল
</li>
<li>
<b>✓</b> অফলাইন হটস্পট / লোকাল ওয়াইফাই নিয়ন্ত্রণ, সাথে
ইন্টারনেট-ভিত্তিক রিমোট নিয়ন্ত্রণ
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ===================== CONTACT ===================== -->
<section id="contact">
<div class="wrap">
<div class="contact-panel">
<div class="bg-rule"></div>
<div class="contact-grid">
<div class="reveal">
<span class="eyebrow"><span class="dot"></span> যোগাযোগ করুন</span>
<h2 style="margin-top: 14px">
আপনার প্রথম গেমিফায়েড ক্লাস চালাতে প্রস্তুত?
</h2>
<p>
আপনার স্কুল, কোচিং সেন্টার বা প্রশিক্ষণ কক্ষের জন্য Interactive
ClassRoom লাইসেন্স নিয়ে Bigosofts-এর সাথে কথা বলুন।
</p>
<div class="contact-cta">
<a href="https://wa.me/8801756668432" class="btn btn-primary"
>💬 হোয়াটসঅ্যাপে চ্যাট করুন</a
>
<a href="https://rcpsc.bigosofts.com" class="btn btn-ghost"
>▶ লাইভ ডেমো দেখুন</a
>
</div>
<div class="socials" style="margin-top: 30px">
<a href="https://facebook.com/bigosofts" title="Facebook">f</a>
<a href="https://twitter.com/bigosofts" title="Twitter/X">x</a>
<a href="https://linkedin.com/in/abdullah-limon" title="LinkedIn"
>in</a
>
<a href="https://github.com/bigosofts" title="GitHub">gh</a>
<a href="https://www.youtube.com/@BigOSoft" title="YouTube">yt</a>
<a href="https://instagram.com/bigosofts" title="Instagram">ig</a>
</div>
</div>
<div class="contact-info reveal">
<div class="cinfo-row">
<div class="ic">✉️</div>
<div><span>ইমেইল</span><b>bigosofts@gmail.com</b></div>
</div>
<div class="cinfo-row">
<div class="ic">📞</div>
<div><span>ফোন</span><b>+৮৮০ ১৭৫৬ ৬৬৮৪৩২</b></div>
</div>
<div class="cinfo-row">
<div class="ic">📍</div>
<div>
<span>ঠিকানা</span><b>রাজেন্দ্রপুর, গাজীপুর, ঢাকা, বাংলাদেশ</b>
</div>
</div>
<div class="cinfo-row">
<div class="ic">🌐</div>
<div><span>স্টুডিও</span><b>bigosofts.com</b></div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="wrap">
<p>
Interactive ClassRoom — RCPSC-এর জন্য তৈরি করেছে <b>Bigosofts</b>। ©
২০২৬ Bigosofts. সর্বস্বত্ব সংরক্ষিত।
</p>
</div>
</footer>
</section>
</div>
<script>
// scroll progress bar
var progress = document.querySelector(".ic-page #progress");
window.addEventListener("scroll", function () {
var h = document.documentElement;
var pct = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
progress.style.width = pct + "%";
});
// mobile nav toggle
document
.querySelector(".ic-page .navtoggle")
.addEventListener("click", function () {
var nav = document.querySelector(".ic-page #nav nav");
nav.style.display = nav.style.display === "flex" ? "none" : "flex";
nav.style.cssText +=
"position:absolute;top:64px;left:0;right:0;flex-direction:column;background:#FFFFFF;padding:20px 28px;border-bottom:1px solid rgba(20,22,30,.11);gap:16px;";
});
// connection status cycler on hero mock
var modes = [
{ text: "📡 ইন্টারনেট · রিমোট", color: "#2A5DD9" },
{ text: "📶 ফোন হটস্পট · অফলাইন", color: "#E8960B" },
{ text: "🏠 লোকাল ওয়াইফাই · অফলাইন", color: "#7C5CFC" },
];
var mi = 0;
var pill = document.getElementById("connText");
var pillWrap = document.getElementById("connPill");
setInterval(function () {
mi = (mi + 1) % modes.length;
pill.textContent = modes[mi].text;
pillWrap.style.color = modes[mi].color;
}, 2800);
// pricing card flip + confetti
var idInner = document.getElementById("idInner");
var verifyBtn = document.getElementById("verifyBtn");
var confettiWrap = document.querySelector(".ic-page #confetti");
var confettiColors = ["#2A5DD9", "#7C5CFC", "#E8960B", "#E14B3E", "#12967F"];
function burstConfetti() {
for (var i = 0; i < 40; i++) {
var p = document.createElement("div");
p.className = "confetti-piece";
var size = 6 + Math.random() * 6;
p.style.width = size + "px";
p.style.height = size * 0.4 + "px";
p.style.left = Math.random() * 100 + "vw";
p.style.background =
confettiColors[Math.floor(Math.random() * confettiColors.length)];
p.style.animationDuration = 2 + Math.random() * 1.5 + "s";
confettiWrap.appendChild(p);
(function (el) {
setTimeout(function () {
el.remove();
}, 4000);
})(p);
}
}
verifyBtn.addEventListener("click", function () {
idInner.classList.toggle("flipped");
if (idInner.classList.contains("flipped")) {
verifyBtn.textContent = "↩ স্ট্যান্ডার্ড মূল্যে ফিরুন";
burstConfetti();
} else {
verifyBtn.textContent =
"🪪 আমি শিক্ষক / প্রশিক্ষক / পিএম — কার্ড ফ্লিপ করুন";
}
});
// NOTE: the old scroll-triggered IntersectionObserver reveal has been
// removed on purpose. All ".reveal" sections now render instantly via
// a pure-CSS load animation (see .ic-page .reveal in <style>), so
// content can never get stuck invisible if this script fails to run
// or the host page's scroll container behaves unexpectedly.
// stage tilt on mouse move (desktop)
var stage = document.querySelector(".ic-page .stage");
if (stage && window.matchMedia("(hover:hover)").matches) {
stage.addEventListener("mousemove", function (e) {
var r = stage.getBoundingClientRect();
var x = (e.clientX - r.left) / r.width - 0.5;
var y = (e.clientY - r.top) / r.height - 0.5;
stage.style.transform =
"rotateX(" + -y * 4 + "deg) rotateY(" + x * 4 + "deg) translateY(-4px)";
});
stage.addEventListener("mouseleave", function () {
stage.style.transform = "";
});
}
</script>
