Pages Medium
AI Product — AI Search Landing
A polished one-page marketing site for Sourcely, a fictional AI answer engine that reads the live web and replies with cited answers instead of blue links. Clean white layout with an electric-blue accent, sticky nav, and a hero search bar that animates a typed question into a sourced answer card. Includes a feature grid, three-step explainer, a traditional-search comparison, an interactive ask-a-question demo, testimonials, billing-toggle pricing, an accordion FAQ, and a footer.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--accent: #2563ff;
--accent-700: #1d4ed8;
--accent-soft: #eaf0ff;
--ink: #0b1120;
--ink-2: #2b3445;
--muted: #5b6677;
--muted-2: #8a94a6;
--line: #e6e9f0;
--line-2: #eef1f6;
--bg: #ffffff;
--bg-alt: #f7f9fc;
--bg-tint: #f1f5ff;
--white: #ffffff;
--radius: 16px;
--radius-sm: 10px;
--shadow-sm: 0 1px 2px rgba(11, 17, 32, .06), 0 1px 1px rgba(11, 17, 32, .04);
--shadow: 0 12px 30px -12px rgba(11, 17, 32, .18);
--shadow-lg: 0 30px 70px -30px rgba(37, 99, 255, .35);
--maxw: 1120px;
--font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.container--narrow { max-width: 760px; }
.skip-link {
position: absolute; left: -999px; top: 8px; background: var(--accent); color: #fff;
padding: 10px 16px; border-radius: 8px; z-index: 200;
}
.skip-link:focus { left: 16px; }
:focus-visible { outline: 3px solid rgba(37, 99, 255, .45); outline-offset: 2px; border-radius: 6px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 12px;
border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
white-space: nowrap;
}
.btn--sm { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -8px rgba(37,99,255,.7); }
.btn--primary:hover { background: var(--accent-700); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(37,99,255,.7); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.link-quiet { font-weight: 500; font-size: 14px; color: var(--muted); }
.link-quiet:hover { color: var(--ink); }
/* ---------- nav ---------- */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,.72);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.is-scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.brand__mark { color: var(--accent); display: inline-flex; }
.nav__links { display: flex; gap: 26px; margin-left: 8px; }
.nav__links a { font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color .15s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; margin-left: auto; }
.nav__toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 40px; }
.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 880px; margin-inline: auto; }
.hero__glow {
position: absolute; inset: -20% 0 auto 0; height: 620px; z-index: 0;
background:
radial-gradient(60% 60% at 50% 0%, rgba(37,99,255,.14), transparent 70%),
radial-gradient(40% 40% at 80% 10%, rgba(37,99,255,.10), transparent 70%);
pointer-events: none;
}
.eyebrow {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
color: var(--accent); background: var(--accent-soft); padding: 6px 14px; border-radius: 999px;
letter-spacing: .01em;
}
.eyebrow--center { margin-inline: auto; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.dot--live { background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5);} 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0);} 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0);} }
.hero__title { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900; margin: 22px 0 0; }
.grad { background: linear-gradient(100deg, var(--accent), #6f9bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { font-size: clamp(1.02rem, 2.2vw, 1.25rem); color: var(--muted); max-width: 620px; margin: 20px auto 0; }
.hero__cta { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.hero__note { margin-top: 14px; font-size: 13.5px; color: var(--muted-2); }
/* search demo */
.search-demo { margin: 44px auto 0; max-width: 680px; text-align: left; }
.search-bar {
display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line);
border-radius: 16px; padding: 8px 8px 8px 16px; box-shadow: var(--shadow);
transition: border-color .2s ease, box-shadow .2s ease;
}
.search-bar:focus-within { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.search-bar__icon { color: var(--muted-2); display: inline-flex; }
.search-bar__input { flex: 1; border: 0; outline: none; font-size: 16.5px; padding: 10px 4px; background: transparent; color: var(--ink); }
.search-bar__input::placeholder { color: var(--muted-2); }
.search-bar__btn { background: var(--accent); color: #fff; border: 0; border-radius: 11px; padding: 12px 22px; font-weight: 600; font-size: 15px; transition: background .2s ease, transform .15s ease; }
.search-bar__btn:hover { background: var(--accent-700); transform: translateY(-1px); }
.suggest { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip {
background: var(--bg-alt); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px;
padding: 7px 14px; border-radius: 999px; font-weight: 500; transition: all .15s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* answer card */
.answer-card {
margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 22px; box-shadow: var(--shadow); animation: rise .35s ease both;
}
.answer-card--static { margin-top: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.answer-card__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #157f3b; background: #e8f7ee; padding: 4px 11px; border-radius: 999px; }
.answer-card__q { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.answer-card__body { color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.answer-card__body .cite {
display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft);
border-radius: 5px; vertical-align: super; margin-left: 2px; padding: 0 3px;
}
.answer-card__sources { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.source {
display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted);
padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; transition: all .15s ease;
}
.source:hover { border-color: var(--accent); background: var(--bg-tint); }
.source__n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 6px; }
.source__host { font-family: var(--mono); font-weight: 500; color: var(--ink-2); }
.source__title { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.answer-card__follow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--muted); }
.follow, .follow:visited { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); transition: all .15s ease; }
.follow:hover { border-color: var(--accent); color: var(--accent); }
/* ---------- logos ---------- */
.logos { padding: 24px 0 44px; }
.logos__label { text-align: center; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-top: 20px; }
.logo-word { font-weight: 700; font-size: 18px; color: var(--muted-2); letter-spacing: -.01em; opacity: .85; transition: color .2s ease, opacity .2s ease; }
.logo-word:hover { color: var(--ink-2); opacity: 1; }
/* ---------- sections ---------- */
.section { padding: 84px 0; }
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.section__head { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.section__title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin-top: 16px; }
.section__lede { color: var(--muted); font-size: 1.08rem; margin-top: 16px; }
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d8def0; }
.card__icon {
width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 18px; margin-bottom: 18px;
}
.card h3 { font-size: 1.18rem; }
.card p { color: var(--muted); margin-top: 10px; font-size: 15px; }
/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: relative; }
.step__num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 16px; }
.step h3 { font-size: 1.12rem; }
.step p { color: var(--muted); margin-top: 10px; font-size: 15px; }
/* compare */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; max-width: 960px; margin-inline: auto; }
.compare__col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.compare__col--new { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.compare__col h3 { font-size: 1.25rem; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.compare__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.compare__col li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-2); font-size: 15px; }
.x { color: #c2503e; font-weight: 700; }
.check { color: #16a34a; font-weight: 700; }
.tag { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }
.compare__vs { font-weight: 800; color: var(--muted-2); font-size: 14px; text-transform: uppercase; }
/* try */
.try { max-width: 920px; margin-inline: auto; display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.try__prompts { display: flex; flex-direction: column; gap: 10px; }
.try__prompt {
text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: all .15s ease;
}
.try__prompt:hover { border-color: var(--accent); }
.try__prompt.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: var(--shadow-sm); }
/* testimonials */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin: 0; transition: transform .2s ease, box-shadow .2s ease; }
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stars { color: #f5a524; letter-spacing: 2px; font-size: 15px; }
.quote blockquote { margin: 14px 0 20px; font-size: 16px; color: var(--ink-2); line-height: 1.6; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.quote figcaption strong { color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 50px; text-align: center; }
.stat strong { display: block; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; color: var(--accent); letter-spacing: -.03em; }
.stat span { font-size: 13.5px; color: var(--muted); }
/* pricing */
.toggle { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 14px; font-weight: 500; color: var(--muted); }
.toggle span.is-active { color: var(--ink); font-weight: 600; }
.toggle em { font-style: normal; color: var(--accent); font-weight: 600; font-size: 12px; background: var(--accent-soft); padding: 2px 7px; border-radius: 6px; margin-left: 4px; }
.toggle__switch { width: 46px; height: 26px; border-radius: 999px; background: var(--line); border: 0; position: relative; transition: background .2s ease; }
.toggle__switch[aria-checked="true"] { background: var(--accent); }
.toggle__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.toggle__switch[aria-checked="true"] .toggle__knob { transform: translateX(20px); }
.pricing { align-items: stretch; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan--featured { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.plan__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.plan h3 { font-size: 1.2rem; }
.plan__price { margin: 14px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.plan__price .amount { font-size: 2.6rem; font-weight: 900; letter-spacing: -.03em; }
.plan__price .per { color: var(--muted); font-size: 14px; }
.plan__desc { color: var(--muted); font-size: 14.5px; }
.plan__feats { list-style: none; margin: 20px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan__feats li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink-2); }
.plan__feats li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
/* faq */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; transition: border-color .2s ease, box-shadow .2s ease; }
.faq__item[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq__item summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 16px; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--accent); transition: transform .2s ease; line-height: 1; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { color: var(--muted); font-size: 15px; padding: 0 0 18px; line-height: 1.65; }
/* cta */
.cta { padding: 30px 0 90px; }
.cta__inner {
background: linear-gradient(135deg, var(--accent), var(--accent-700));
border-radius: 26px; padding: 56px 32px; text-align: center; color: #fff; position: relative; overflow: hidden;
}
.cta__inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 80% 0%, rgba(255,255,255,.18), transparent 60%); }
.cta__inner > * { position: relative; }
.cta h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 900; }
.cta p { margin-top: 14px; opacity: .9; font-size: 1.05rem; }
.cta__form { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.cta__form input { border: 0; border-radius: 12px; padding: 14px 18px; font-size: 15px; width: 280px; max-width: 100%; outline: none; }
.cta__form .btn--primary { background: #fff; color: var(--accent); box-shadow: none; }
.cta__form .btn--primary:hover { background: #f0f4ff; }
/* footer */
.footer { background: #fff; border-top: 1px solid var(--line); padding: 56px 0 28px; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.footer__brand p { color: var(--muted); font-size: 14px; margin-top: 14px; max-width: 260px; }
.footer__col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin-bottom: 14px; }
.footer__col a { display: block; color: var(--muted); font-size: 14px; padding: 5px 0; transition: color .15s ease; }
.footer__col a:hover { color: var(--accent); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted-2); flex-wrap: wrap; }
.footer__social { display: flex; gap: 16px; }
.footer__social a { color: var(--muted); font-weight: 600; }
.footer__social a:hover { color: var(--accent); }
/* toast */
.toast {
position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 24px);
background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 12px; font-size: 14px; font-weight: 500;
box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 300;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* ---------- responsive ---------- */
@media (max-width: 920px) {
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: 1fr; }
.try { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.nav__links {
position: fixed; inset: 66px 0 auto 0; flex-direction: column; gap: 0; background: #fff;
border-bottom: 1px solid var(--line); padding: 8px 24px 18px; transform: translateY(-130%);
transition: transform .28s ease; box-shadow: var(--shadow); margin-left: 0;
}
.nav__links.is-open { transform: translateY(0); }
.nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 16px; }
.nav__actions .link-quiet { display: none; }
.nav__toggle { display: flex; }
.nav__actions { margin-left: 0; }
.section { padding: 60px 0; }
.compare { grid-template-columns: 1fr; }
.compare__vs { margin: 0 auto; }
.stats { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
}
@media (max-width: 520px) {
.grid--3 { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr; }
.hero { padding-top: 48px; }
.search-bar { flex-wrap: wrap; padding: 12px; }
.search-bar__input { width: 100%; }
.search-bar__btn { width: 100%; }
.cta__form input { width: 100%; }
.footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
}(function () {
"use strict";
/* ---------------- toast helper ---------------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-visible");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-visible");
}, 2600);
}
/* ---------------- sticky nav shadow ---------------- */
var nav = document.getElementById("nav");
function onScroll() {
if (!nav) return;
nav.classList.toggle("is-scrolled", window.scrollY > 8);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------------- mobile menu ---------------- */
var toggle = document.getElementById("navToggle");
var navLinks = document.getElementById("navLinks");
if (toggle && navLinks) {
toggle.addEventListener("click", function () {
var open = navLinks.classList.toggle("is-open");
toggle.setAttribute("aria-expanded", String(open));
});
navLinks.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
navLinks.classList.remove("is-open");
toggle.setAttribute("aria-expanded", "false");
});
});
}
/* ---------------- scroll reveal ---------------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
e.target.classList.add("is-in");
io.unobserve(e.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
reveals.forEach(function (el) { io.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add("is-in"); });
}
/* ---------------- CTA buttons -> toast ---------------- */
document.querySelectorAll("[data-cta]").forEach(function (btn) {
btn.addEventListener("click", function (e) {
e.preventDefault();
toast("Demo only — " + btn.getAttribute("data-cta") + " is illustrative.");
});
});
/* ---------------- pricing toggle ---------------- */
var billing = document.getElementById("billingToggle");
var lblM = document.getElementById("lblMonthly");
var lblA = document.getElementById("lblAnnual");
if (billing) {
billing.addEventListener("click", function () {
var annual = billing.getAttribute("aria-checked") !== "true";
billing.setAttribute("aria-checked", String(annual));
lblM.classList.toggle("is-active", !annual);
lblA.classList.toggle("is-active", annual);
document.querySelectorAll(".amount[data-monthly]").forEach(function (el) {
el.textContent = annual ? el.getAttribute("data-annual") : el.getAttribute("data-monthly");
});
});
}
/* ---------------- waitlist form ---------------- */
var wl = document.getElementById("waitlistForm");
if (wl) {
wl.addEventListener("submit", function (e) {
e.preventDefault();
toast("Thanks! You're on the list (demo).");
wl.reset();
});
}
/* ---------------- hero search -> animated cited answer ---------------- */
var ANSWERS = {
default: {
body: "Rooftop solar generates electricity during daylight, while a home battery stores surplus for use after sunset or during outages.|0| Pairing the two lets a typical household self-supply 70–90% of its annual demand,|1| though the battery adds the larger share of the upfront cost.|2|",
sources: [
{ host: "nrel.gov", title: "Residential PV + storage performance study" },
{ host: "energysage.com", title: "Solar-plus-storage self-consumption rates" },
{ host: "iea.org", title: "Cost breakdown: home solar vs. batteries" }
]
},
fasting: {
body: "Intermittent fasting can modestly improve insulin sensitivity and shift the body toward fat oxidation during the fasted window.|0| Most measured weight loss, however, tracks with the overall calorie reduction it tends to cause rather than meal timing itself.|1| Effects on resting metabolic rate appear small over the long term.|2|",
sources: [
{ host: "nih.gov", title: "Time-restricted eating and insulin response" },
{ host: "nejm.org", title: "Trial: fasting vs. calorie restriction" },
{ host: "cell.com", title: "Metabolic adaptation review" }
]
},
fourday: {
body: "Large pilots in the UK and Iceland found that four-day weeks held output roughly steady while cutting burnout and turnover.|0| Productivity gains came mainly from fewer meetings and tighter focus, not longer hours.|1| Results vary by role, and knowledge work benefits more than shift-based work.|2|",
sources: [
{ host: "autonomy.work", title: "4-Day Week Global pilot results" },
{ host: "hbr.org", title: "Why shorter weeks can raise output" },
{ host: "nature.com", title: "Meta-analysis of work-time reduction" }
]
}
};
function pickAnswer(q) {
var t = (q || "").toLowerCase();
if (t.indexOf("fast") > -1 || t.indexOf("metabol") > -1) return ANSWERS.fasting;
if (t.indexOf("four") > -1 || t.indexOf("4-day") > -1 || t.indexOf("work week") > -1) return ANSWERS.fourday;
return ANSWERS.default;
}
// turn "text|0|" markup into HTML with citation chips
function renderBodyHTML(raw) {
return raw.replace(/\|(\d+)\|/g, function (_, n) {
return '<sup class="cite">' + (parseInt(n, 10) + 1) + "</sup>";
});
}
function renderSources(container, sources) {
container.innerHTML = "";
sources.forEach(function (s, i) {
var row = document.createElement("a");
row.className = "source";
row.href = "#";
row.setAttribute("aria-label", "Source " + (i + 1) + ": " + s.host);
row.innerHTML =
'<span class="source__n">' + (i + 1) + "</span>" +
'<span class="source__host">' + s.host + "</span>" +
'<span class="source__title">— ' + s.title + "</span>";
row.addEventListener("click", function (e) {
e.preventDefault();
toast("Opening source: " + s.host + " (demo)");
});
container.appendChild(row);
});
}
var form = document.getElementById("searchForm");
var input = document.getElementById("searchInput");
var card = document.getElementById("answerCard");
var qEl = document.getElementById("answerQ");
var bodyEl = document.getElementById("answerBody");
var srcEl = document.getElementById("answerSources");
var typeTimer;
function runSearch(q) {
if (!q) { toast("Type a question to ask Sourcely."); return; }
var data = pickAnswer(q);
card.hidden = false;
qEl.textContent = '"' + q + '"';
srcEl.innerHTML = "";
bodyEl.innerHTML = '<span class="answer-card__skeleton">Reading the web…</span>';
// simulate retrieval delay, then typewriter-reveal the answer
clearTimeout(typeTimer);
typeTimer = setTimeout(function () {
var html = renderBodyHTML(data.body);
typeReveal(bodyEl, html, function () {
renderSources(srcEl, data.sources);
});
}, 650);
card.scrollIntoView({ behavior: "smooth", block: "nearest" });
}
// reveal HTML progressively without breaking tags
function typeReveal(el, html, done) {
var tmp = document.createElement("div");
tmp.innerHTML = html;
var full = tmp.childNodes;
el.innerHTML = "";
// flatten into tokens: text chars + whole element nodes
var tokens = [];
full.forEach(function (node) {
if (node.nodeType === 3) {
node.textContent.split("").forEach(function (ch) { tokens.push({ t: "ch", v: ch }); });
} else {
tokens.push({ t: "el", v: node.cloneNode(true) });
}
});
var i = 0, buf = "";
(function step() {
if (i >= tokens.length) { if (done) done(); return; }
var tk = tokens[i++];
if (tk.t === "ch") {
buf += tk.v;
el.textContent = buf; // safe: plain text so far
setTimeout(step, 9);
} else {
// commit buffered text then append element node
el.textContent = buf;
el.appendChild(tk.v);
buf = ""; // continue with fresh text node appended after
// re-anchor: subsequent chars append to a new text node
var anchorBuf = "";
(function inner() {
if (i >= tokens.length) { if (done) done(); return; }
var n = tokens[i];
if (n.t === "el") { step(); return; }
i++;
anchorBuf += n.v;
// append text after last element
var lastText = el.lastChild && el.lastChild.nodeType === 3 ? el.lastChild : el.appendChild(document.createTextNode(""));
if (el.lastChild.nodeType !== 3) { lastText = el.appendChild(document.createTextNode("")); }
el.lastChild.textContent = anchorBuf;
setTimeout(inner, 9);
})();
}
})();
}
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
runSearch(input.value.trim());
});
}
document.querySelectorAll("#suggestChips .chip").forEach(function (chip) {
chip.addEventListener("click", function () {
input.value = chip.getAttribute("data-q");
runSearch(input.value);
});
});
card && card.querySelectorAll(".follow").forEach(function (b) {
b.addEventListener("click", function () {
input.value = b.getAttribute("data-q");
runSearch(input.value);
});
});
/* ---------------- interactive "try a question" tabs ---------------- */
var TRY = {
climate: {
q: "Are EVs actually greener than gas cars?",
body: "Over their full lifetime, EVs emit roughly 50–70% less CO₂ than comparable petrol cars in most regions, even after accounting for battery manufacturing.|0| The gap widens as grids add renewables, since charging gets cleaner over the car's life.|1| In coal-heavy grids the advantage shrinks but generally remains positive.|2|",
sources: [
{ host: "icct.org", title: "Lifecycle GHG of passenger cars" },
{ host: "iea.org", title: "Global EV outlook: grid effects" },
{ host: "mit.edu", title: "Carbon Counter methodology" }
]
},
sleep: {
q: "How much sleep do adults really need?",
body: "Most adults need 7–9 hours per night, with consistent benefits to memory, mood and immune function in that range.|0| Routinely sleeping under 6 hours is linked to higher cardiovascular and metabolic risk.|1| Individual needs vary, but very short or very long sleep both correlate with worse outcomes.|2|",
sources: [
{ host: "sleepfoundation.org", title: "Recommended sleep by age" },
{ host: "nih.gov", title: "Short sleep and cardiometabolic risk" },
{ host: "thelancet.com", title: "Sleep duration cohort study" }
]
},
rates: {
q: "Why do interest rates affect house prices?",
body: "Higher interest rates raise mortgage payments, which lowers how much buyers can borrow for the same monthly budget.|0| That reduced borrowing power softens demand, and prices typically cool with a lag of several months.|1| The effect is strongest in markets where most buyers rely on financing.|2|",
sources: [
{ host: "federalreserve.gov", title: "Monetary policy and housing" },
{ host: "bis.org", title: "Rates and house-price transmission" },
{ host: "economist.com", title: "How rate hikes reach home prices" }
]
}
};
var tryBody = document.getElementById("tryBody");
var tryQ = document.getElementById("tryQ");
var trySources = document.getElementById("trySources");
function showTry(key) {
var d = TRY[key];
if (!d) return;
tryQ.textContent = '"' + d.q + '"';
tryBody.innerHTML = renderBodyHTML(d.body);
renderSources(trySources, d.sources);
}
var tryPrompts = document.querySelectorAll(".try__prompt");
tryPrompts.forEach(function (p) {
p.addEventListener("click", function () {
tryPrompts.forEach(function (o) {
o.classList.remove("is-active");
o.setAttribute("aria-selected", "false");
});
p.classList.add("is-active");
p.setAttribute("aria-selected", "true");
showTry(p.getAttribute("data-key"));
});
});
showTry("climate");
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sourcely — The AI answer engine that cites its work</title>
<meta name="description" content="Sourcely is the AI search engine that gives you direct, cited answers in real time — with sources, follow-ups, and zero blue-link guesswork." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<!-- NAV -->
<header class="nav" id="nav">
<div class="container nav__inner">
<a href="#" class="brand" aria-label="Sourcely home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none">
<circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="2.4"/>
<path d="M15.5 15.5 L21 21" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
</svg>
</span>
<span class="brand__name">Sourcely</span>
</a>
<nav class="nav__links" id="navLinks" aria-label="Primary">
<a href="#features">Features</a>
<a href="#how">How it works</a>
<a href="#compare">Compare</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
</nav>
<div class="nav__actions">
<a href="#" class="link-quiet">Sign in</a>
<a href="#pricing" class="btn btn--primary btn--sm" data-cta="Start free">Start free</a>
</div>
<button class="nav__toggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="navLinks">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="container hero__inner">
<p class="eyebrow reveal">
<span class="dot"></span> Live answers · 14B sources indexed
</p>
<h1 class="hero__title reveal">Ask anything.<br/>Get an answer that <span class="grad">cites its work.</span></h1>
<p class="hero__sub reveal">Sourcely is the AI answer engine that reads the live web for you and replies with a clear, sourced answer — not ten blue links. Every claim links back to where it came from.</p>
<div class="hero__cta reveal">
<a href="#pricing" class="btn btn--primary" data-cta="Start searching free">Start searching free</a>
<a href="#how" class="btn btn--ghost">See how it works</a>
</div>
<p class="hero__note reveal">No credit card · 50 free answers a day</p>
<!-- interactive search → answer demo -->
<div class="search-demo reveal" aria-live="polite">
<form class="search-bar" id="searchForm" autocomplete="off">
<span class="search-bar__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none">
<circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="2.2"/>
<path d="M15.5 15.5 L21 21" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
</svg>
</span>
<input id="searchInput" class="search-bar__input" type="text" aria-label="Ask Sourcely a question" placeholder="Ask Sourcely anything…" />
<button type="submit" class="search-bar__btn">Ask</button>
</form>
<div class="suggest" id="suggestChips">
<button type="button" class="chip" data-q="What's the difference between solar and battery storage?">Solar vs. battery storage</button>
<button type="button" class="chip" data-q="How does intermittent fasting affect metabolism?">Fasting & metabolism</button>
<button type="button" class="chip" data-q="Is the four-day work week actually more productive?">Four-day work week</button>
</div>
<div class="answer-card" id="answerCard" hidden>
<div class="answer-card__head">
<span class="badge"><span class="dot dot--live"></span> Answering</span>
<span class="answer-card__q" id="answerQ"></span>
</div>
<p class="answer-card__body" id="answerBody"></p>
<div class="answer-card__sources" id="answerSources" aria-label="Sources"></div>
<div class="answer-card__follow">
<span>Follow-ups:</span>
<button type="button" class="follow" data-q="What does it cost to install?">What does it cost to install?</button>
<button type="button" class="follow" data-q="How long until it pays for itself?">Payback period?</button>
</div>
</div>
</div>
</div>
<div class="hero__glow" aria-hidden="true"></div>
</section>
<!-- LOGOS -->
<section class="logos" aria-label="Trusted by teams at">
<div class="container">
<p class="logos__label">Trusted by research, product and growth teams at</p>
<div class="logos__row">
<span class="logo-word">Northwind</span>
<span class="logo-word">Pivotal Labs</span>
<span class="logo-word">Velmont</span>
<span class="logo-word">Hartley&Co</span>
<span class="logo-word">Brightseed</span>
<span class="logo-word">Orbital</span>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="section" id="features">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow eyebrow--center"><span class="dot"></span> Why Sourcely</p>
<h2 class="section__title">Search that answers, then proves it</h2>
<p class="section__lede">Three things traditional search can't do: cite every claim, read the web in real time, and keep the conversation going.</p>
</div>
<div class="grid grid--3">
<article class="card reveal">
<div class="card__icon" aria-hidden="true">[ ]</div>
<h3>Inline citations</h3>
<p>Every sentence carries a numbered source. Hover any claim to see the exact passage it came from — no hallucinated facts, no mystery links.</p>
</article>
<article class="card reveal">
<div class="card__icon" aria-hidden="true">↻</div>
<h3>Real-time web</h3>
<p>Sourcely reads the live web at query time, so you get this morning's filing, score or release — not a snapshot frozen at training time.</p>
</article>
<article class="card reveal">
<div class="card__icon" aria-hidden="true">⤷</div>
<h3>Threaded follow-ups</h3>
<p>Ask the next question without re-explaining. Sourcely keeps context across the thread and narrows sources as you dig in.</p>
</article>
<article class="card reveal">
<div class="card__icon" aria-hidden="true">⚖</div>
<h3>Balanced answers</h3>
<p>When sources disagree, Sourcely shows both sides and tells you how confident it is — instead of picking a winner silently.</p>
</article>
<article class="card reveal">
<div class="card__icon" aria-hidden="true">⌘</div>
<h3>Search where you work</h3>
<p>Browser extension, Slack, and an API. Highlight any text and get a sourced answer without leaving the page.</p>
</article>
<article class="card reveal">
<div class="card__icon" aria-hidden="true">⨀</div>
<h3>Private by default</h3>
<p>Your searches are never used to train models and never sold. Enterprise plans add SSO, audit logs and data residency.</p>
</article>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="section section--alt" id="how">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow eyebrow--center"><span class="dot"></span> How it works</p>
<h2 class="section__title">From question to cited answer in three steps</h2>
</div>
<ol class="steps">
<li class="step reveal">
<span class="step__num">1</span>
<h3>You ask in plain language</h3>
<p>Type a real question — messy, specific, conversational. No keywords or boolean operators required.</p>
</li>
<li class="step reveal">
<span class="step__num">2</span>
<h3>Sourcely reads the web</h3>
<p>It retrieves dozens of live, relevant pages, ranks them for credibility, and reads the passages that actually matter.</p>
</li>
<li class="step reveal">
<span class="step__num">3</span>
<h3>You get a sourced answer</h3>
<p>A clear synthesis with numbered citations you can verify in one click — plus suggested follow-ups to go deeper.</p>
</li>
</ol>
</div>
</section>
<!-- COMPARE -->
<section class="section" id="compare">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow eyebrow--center"><span class="dot"></span> The difference</p>
<h2 class="section__title">Ten blue links vs. one real answer</h2>
<p class="section__lede">Traditional search hands you a reading list. Sourcely hands you the answer — and the receipts.</p>
</div>
<div class="compare reveal">
<div class="compare__col compare__col--old">
<h3>Traditional search</h3>
<ul>
<li><span class="x">✕</span> You get links, then do the reading</li>
<li><span class="x">✕</span> No way to know which page is trustworthy</li>
<li><span class="x">✕</span> Every follow-up starts from scratch</li>
<li><span class="x">✕</span> Ads and SEO spam compete for the top</li>
<li><span class="x">✕</span> No synthesis across sources</li>
</ul>
</div>
<div class="compare__vs" aria-hidden="true">vs</div>
<div class="compare__col compare__col--new">
<h3>Sourcely <span class="tag">AI answers</span></h3>
<ul>
<li><span class="check">✓</span> A direct answer, written for your question</li>
<li><span class="check">✓</span> Every claim cited and verifiable</li>
<li><span class="check">✓</span> Follow-ups keep full context</li>
<li><span class="check">✓</span> Credibility-ranked, no paid placement</li>
<li><span class="check">✓</span> Synthesizes across dozens of pages</li>
</ul>
</div>
</div>
</div>
</section>
<!-- INTERACTIVE ASK MOCK -->
<section class="section section--alt" id="try">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow eyebrow--center"><span class="dot"></span> Try a question</p>
<h2 class="section__title">Pick a question, watch it get sourced</h2>
<p class="section__lede">A glimpse of the answer card. Choose a prompt and Sourcely reveals a synthesized, cited response.</p>
</div>
<div class="try reveal">
<div class="try__prompts" role="tablist" aria-label="Example questions">
<button class="try__prompt is-active" role="tab" aria-selected="true" data-key="climate">Are EVs actually greener than gas cars?</button>
<button class="try__prompt" role="tab" aria-selected="false" data-key="sleep">How much sleep do adults really need?</button>
<button class="try__prompt" role="tab" aria-selected="false" data-key="rates">Why do interest rates affect house prices?</button>
</div>
<div class="try__answer answer-card answer-card--static" id="tryAnswer" role="tabpanel">
<div class="answer-card__head">
<span class="badge"><span class="dot dot--live"></span> Sourced answer</span>
<span class="answer-card__q" id="tryQ"></span>
</div>
<p class="answer-card__body" id="tryBody"></p>
<div class="answer-card__sources" id="trySources"></div>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="section" id="reviews">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow eyebrow--center"><span class="dot"></span> Loved by curious people</p>
<h2 class="section__title">What they're saying</h2>
</div>
<div class="grid grid--3">
<figure class="quote reveal">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>It replaced four tabs and a skeptical squint. I trust it because I can click straight to the source on every line.</blockquote>
<figcaption><span class="avatar" aria-hidden="true">RA</span><span><strong>Rina Adeyemi</strong><br/>Equity Analyst, Velmont</span></figcaption>
</figure>
<figure class="quote reveal">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>My research time dropped from an afternoon to a coffee break. The follow-up threading is the part I didn't know I needed.</blockquote>
<figcaption><span class="avatar" aria-hidden="true">DK</span><span><strong>Daniel Kovač</strong><br/>PhD Candidate, Orbital</span></figcaption>
</figure>
<figure class="quote reveal">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>We piped Sourcely into Slack and our support team stopped guessing. Cited answers ended the “source?” arguments overnight.</blockquote>
<figcaption><span class="avatar" aria-hidden="true">MS</span><span><strong>Mara Solis</strong><br/>Head of Ops, Brightseed</span></figcaption>
</figure>
</div>
<div class="stats reveal">
<div class="stat"><strong>14B</strong><span>sources indexed</span></div>
<div class="stat"><strong>1.8s</strong><span>median answer time</span></div>
<div class="stat"><strong>96%</strong><span>cited-claim accuracy</span></div>
<div class="stat"><strong>2.4M</strong><span>questions answered daily</span></div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="section section--alt" id="pricing">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow eyebrow--center"><span class="dot"></span> Pricing</p>
<h2 class="section__title">Start free. Upgrade when you're hooked.</h2>
<div class="toggle reveal">
<span id="lblMonthly" class="is-active">Monthly</span>
<button class="toggle__switch" id="billingToggle" role="switch" aria-checked="false" aria-label="Toggle annual billing"><span class="toggle__knob"></span></button>
<span id="lblAnnual">Annual <em>save 20%</em></span>
</div>
</div>
<div class="grid grid--3 pricing">
<article class="plan reveal">
<h3>Free</h3>
<p class="plan__price"><span class="amount">$0</span><span class="per">forever</span></p>
<p class="plan__desc">For everyday curiosity.</p>
<ul class="plan__feats">
<li>50 sourced answers / day</li>
<li>Inline citations</li>
<li>Browser extension</li>
<li>Threaded follow-ups</li>
</ul>
<a href="#" class="btn btn--ghost btn--block" data-cta="Free plan">Get started</a>
</article>
<article class="plan plan--featured reveal">
<span class="plan__flag">Most popular</span>
<h3>Pro</h3>
<p class="plan__price"><span class="amount" data-monthly="$18" data-annual="$14">$18</span><span class="per">/mo</span></p>
<p class="plan__desc">For researchers and power users.</p>
<ul class="plan__feats">
<li>Unlimited answers</li>
<li>Deep-research mode</li>
<li>Source-quality filters</li>
<li>Slack & API access</li>
<li>Priority answer speed</li>
</ul>
<a href="#" class="btn btn--primary btn--block" data-cta="Pro plan">Start 14-day trial</a>
</article>
<article class="plan reveal">
<h3>Team</h3>
<p class="plan__price"><span class="amount" data-monthly="$39" data-annual="$31">$39</span><span class="per">/seat</span></p>
<p class="plan__desc">For teams that share answers.</p>
<ul class="plan__feats">
<li>Everything in Pro</li>
<li>Shared answer library</li>
<li>SSO & audit logs</li>
<li>Data residency</li>
<li>Dedicated support</li>
</ul>
<a href="#" class="btn btn--ghost btn--block" data-cta="Team plan">Talk to sales</a>
</article>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section" id="faq">
<div class="container container--narrow">
<div class="section__head reveal">
<p class="eyebrow eyebrow--center"><span class="dot"></span> FAQ</p>
<h2 class="section__title">Questions, answered (with sources, naturally)</h2>
</div>
<div class="faq reveal">
<details class="faq__item" open>
<summary>Where do the citations come from?</summary>
<p>Sourcely retrieves live web pages for every query, reads the relevant passages, and links each claim back to the exact page it drew from. If a fact has no source, it doesn't make the answer.</p>
</details>
<details class="faq__item">
<summary>How is this different from a regular chatbot?</summary>
<p>A chatbot answers from memory and can confidently invent facts. Sourcely reads the live web at query time and shows you the receipts, so you can verify every line in one click.</p>
</details>
<details class="faq__item">
<summary>Is my search history private?</summary>
<p>Yes. Your queries are never sold and never used to train models. On Team and Enterprise you also get SSO, audit logs and configurable data residency.</p>
</details>
<details class="faq__item">
<summary>Can I use it inside my own app?</summary>
<p>Pro and above include API access, so you can drop cited answers into your product, internal tools or Slack workspace.</p>
</details>
<details class="faq__item">
<summary>What happens when sources disagree?</summary>
<p>Sourcely shows the competing claims side by side and flags its confidence, instead of silently choosing one and hiding the rest.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta">
<div class="container cta__inner reveal">
<h2>Stop reading links. Start getting answers.</h2>
<p>Join 2.4M people who ask Sourcely first. Free to start, no card required.</p>
<form class="cta__form" id="waitlistForm">
<input type="email" required placeholder="you@work.com" aria-label="Work email" />
<button class="btn btn--primary" type="submit" data-cta="Start free">Start free</button>
</form>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<div class="container footer__inner">
<div class="footer__brand">
<a href="#" class="brand">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none">
<circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="2.4"/>
<path d="M15.5 15.5 L21 21" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
</svg>
</span>
<span class="brand__name">Sourcely</span>
</a>
<p>The AI answer engine that cites its work.</p>
</div>
<nav class="footer__col" aria-label="Product">
<h4>Product</h4>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#try">Demo</a>
<a href="#">API</a>
</nav>
<nav class="footer__col" aria-label="Company">
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Careers</a>
<a href="#">Blog</a>
<a href="#">Press</a>
</nav>
<nav class="footer__col" aria-label="Legal">
<h4>Legal</h4>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Security</a>
<a href="#">Cookies</a>
</nav>
</div>
<div class="container footer__bottom">
<p>© 2026 Sourcely Labs, Inc. · Illustrative demo, not a real product.</p>
<div class="footer__social">
<a href="#" aria-label="X">X</a>
<a href="#" aria-label="GitHub">GitHub</a>
<a href="#" aria-label="LinkedIn">in</a>
</div>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>AI Search Landing
A complete marketing landing page for Sourcely, an invented AI answer engine that turns plain-language questions into direct, cited answers. The visual identity is deliberately clean and trustworthy: white surfaces, a single electric-blue accent, generous spacing, and an Inter type scale with a JetBrains Mono accent for source hostnames.
The page runs top to bottom through every section a real product site needs — a transparent sticky nav with a mobile menu, a hero whose search bar animates a typed question into a synthesized answer card complete with numbered citations and source rows, a six-card feature grid, a three-step “how it works” explainer, a side-by-side comparison against traditional ten-blue-links search, an interactive “try a question” panel that swaps between pre-built sourced answers, customer testimonials with headline stats, a pricing table with a monthly/annual billing toggle, an accordion FAQ, an email-capture CTA, and a full footer.
Everything is vanilla: an IntersectionObserver drives scroll-reveal, a typewriter routine reveals the answer body without breaking the inline citation chips, suggestion and follow-up chips re-run the mock search, the pricing toggle rewrites prices, and a small toast() helper acknowledges every CTA. It is responsive down to ~360px with a slide-down mobile nav, stacked grids, and prefers-reduced-motion support.
Illustrative UI only — fictional brand, not a real product.