/* ================== SECTION ================== */
.agentic-demo {
padding: 100px 6%;
background: #000;
color: #fff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
}
.agentic-demo * {
box-sizing: border-box;
}
/* ================== LAYOUT ================== */
.demo-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: center;
}
/* ================== LEFT CONTENT ================== */
.demo-text .label {
font-style: italic;
opacity: 0.8;
font-size: 16px;
}
.demo-text h2 {
margin-top: 16px;
font-size: 28px;
line-height: 1.4;
font-weight: 500;
}
/* ================== RIGHT CARD ================== */
.demo-visual {
position: relative;
}
.demo-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 40px 80px rgba(0,0,0,0.45);
animation: fadeUp 1s ease both;
}
/* ================== VIDEO ================== */
.demo-card video {
width: 100%;
height: auto;
display: block;
}
/* ================== ANIMATION ================== */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ================== RESPONSIVE ================== */
@media (max-width: 900px) {
.demo-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.demo-text h2 {
font-size: 22px;
}
}
Prompt:
“Mark the Zylker deal as won and schedule a call with John
for an onboarding meeting”
/* ================== SECTION ================== */
.agentic-demo {
padding: 100px 6%;
background: #000;
color: #fff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
}
.agentic-demo * {
box-sizing: border-box;
}
/* ================== LAYOUT ================== */
.demo-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: center;
}
/* ================== LEFT CONTENT ================== */
.demo-text .label {
font-style: italic;
opacity: 0.8;
font-size: 16px;
}
.demo-text h2 {
margin-top: 16px;
font-size: 28px;
line-height: 1.45;
font-weight: 500;
}
/* ================== RIGHT CARD ================== */
.demo-visual {
position: relative;
}
.demo-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 40px 80px rgba(0,0,0,0.45);
animation: fadeUp 1s ease both;
}
/* ================== VIDEO ================== */
.demo-card video {
width: 100%;
height: auto;
display: block;
}
/* ================== ANIMATION ================== */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ================== RESPONSIVE ================== */
@media (max-width: 900px) {
.demo-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.demo-text h2 {
font-size: 22px;
}
}
Prompt:
“Schedule a campaign called ‘Summer Sale Blast’ for next Tuesday
at 11 AM and target all leads from Bangalore.”
/* ================== BASE ================== */
.agentic-demo {
padding: 100px 6%;
background: #000;
color: #fff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
}
.agentic-demo * {
box-sizing: border-box;
}
/* ================== LAYOUT ================== */
.demo-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: center;
}
/* ================== LEFT PROMPT ================== */
.demo-text .label {
font-style: italic;
opacity: 0.8;
font-size: 16px;
}
.demo-text h2 {
margin-top: 16px;
font-size: 28px;
line-height: 1.45;
font-weight: 500;
}
/* ================== RIGHT CARD ================== */
.demo-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 40px 80px rgba(0,0,0,0.45);
animation: fadeUp 1s ease both;
}
/* ================== VIDEO ================== */
.demo-card video {
width: 100%;
display: block;
}
/* ================== ANIMATION ================== */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ================== RESPONSIVE ================== */
@media (max-width: 900px) {
.demo-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.demo-text h2 {
font-size: 22px;
}
}
Prompt:
“Search the desk for any open tickets. Mark them as in progress
and send a reply that we are working on it and will update by
end of the day.”
/* ================== BASE ================== */
.agentic-demo {
padding: 100px 6%;
background: #000;
color: #fff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
}
.agentic-demo * {
box-sizing: border-box;
}
/* ================== LAYOUT ================== */
.demo-wrapper {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: center;
}
/* ================== LEFT PROMPT ================== */
.demo-text .label {
font-style: italic;
opacity: 0.8;
font-size: 16px;
}
.demo-text h2 {
margin-top: 16px;
font-size: 28px;
line-height: 1.45;
font-weight: 500;
}
/* ================== RIGHT CARD ================== */
.demo-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 40px 80px rgba(0,0,0,0.45);
animation: fadeUp 1s ease both;
}
/* ================== VIDEO ================== */
.demo-card video {
width: 100%;
display: block;
}
/* ================== ANIMATION ================== */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ================== RESPONSIVE ================== */
@media (max-width: 900px) {
.demo-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.demo-text h2 {
font-size: 22px;
}
}
Prompt:
“Generate an invoice for Naveen Kumar from ABC Corp
for ₹1200 on consulting services.”