Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Homepage CTA buttons on demos and clean up styles #14

Merged
merged 4 commits into from
Apr 6, 2025
Merged

Homepage CTA buttons on demos and clean up styles #14

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
192d444
wip
seanparkross Apr 4, 2025
f8fda9f
I said shamon!
seanparkross Apr 4, 2025
3b1a5cc
Update docs/index.mdx
robertjdominguez Apr 6, 2025
58e7665
Merge branch 'main' into sean/doc-2600-cta-buttons-on-demos
robertjdominguez Apr 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 8 additions & 80 deletions docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,7 @@ import Link from "@docusaurus/Link";
<li>Fine grained entitlements and access control</li>
</ul>

<Link to="/quickstart/" className="cta-button">
Quickstart here.
</Link>
<Link to="/quickstart/">Quickstart.</Link>

</div>
<div className={'video-wrapper'}>
Expand All @@ -76,7 +74,7 @@ import Link from "@docusaurus/Link";
Check out these three demos to get a feel for how PromptQL works.

<div className="homepage-demo-grid">
<a href="https://promptql.console.hasura.io/public/sandbox-gtm/playground" className="demo-box">
<a href="https://promptql.console.hasura.io/public/sandbox-gtm/playground" className="demo-box" target="_blank">
<div className="icon-wrapper">
<Handshake className="demo-icon" />
</div>
Expand All @@ -85,9 +83,10 @@ Check out these three demos to get a feel for how PromptQL works.
See how sales and marketing teams leverage PromptQL to understand customer journeys, analyze pipeline data, and
drive strategic business decisions.
</p>
<div class="demo-cta-button">Explore the GTM demo</div>
</a>

<a href="https://promptql.console.hasura.io/public/sandbox-healthcare/playground" className="demo-box">
<a href="https://promptql.console.hasura.io/public/sandbox-healthcare/playground" className="demo-box" target="_blank">
<div className="icon-wrapper">
<Healthcare className="demo-icon" />
</div>
Expand All @@ -96,90 +95,19 @@ Check out these three demos to get a feel for how PromptQL works.
Discover how healthcare providers use PromptQL to analyze patient data, optimize care pathways, and improve
operational efficiency while maintaining compliance.
</p>
<div class="demo-cta-button">Explore the Healthcare demo</div>
</a>

<a href="https://promptql.console.hasura.io/public/sandbox-aml/playground" className="demo-box">
<a href="https://promptql.console.hasura.io/public/sandbox-aml/playground" className="demo-box" target="_blank">
<div className="icon-wrapper">
<Banking className="demo-icon" />
</div>
<h3>AML</h3>
<p>
Explore how financial institutions use PromptQL to streamline anti-money laundering (AML) efforts by analyzing
transaction data, uncovering suspicious patterns, and enhancing compliance with regulatory requirements.
transaction data, uncovering suspicious patterns, and enhance compliance.
</p>
<div class="demo-cta-button">Explore the AML demo</div>
</a>

</div>

<style>
{`
.homepage-demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin: 2rem 0;
}

.homepage-demo-grid .demo-box {
background: var(--primary-neutral-800);
border: 1px solid var(--primary-neutral-700);
border-radius: 12px;
padding: 2rem;
text-align: center;
transition: transform 0.2s;
cursor: pointer;
text-decoration: none;
display: block;
}

.homepage-demo-grid .demo-box:hover {
transform: translateY(-5px);
}

.homepage-demo-grid .icon-wrapper {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}

.homepage-demo-grid .demo-icon {
width: 48px;
height: 48px;
fill: var(--ifm-color-primary);
filter: drop-shadow(0 0 8px var(--ifm-color-primary));
}

.homepage-demo-grid .demo-box h3 {
margin: 0;
color: var(--primary-neutral-200);
}

.homepage-demo-grid .demo-box p {
margin-top: 0.75rem;
color: var(--primary-neutral-400);
font-size: 0.9rem;
}

.cta-button-demos {
display: inline-block;
background-color: var(--ifm-color-primary);
padding: 0.2rem 0.8rem;
border-radius: 20px;
color: #000000 !important;
text-decoration: none;
font-weight: 500;
margin-top: 1rem;
transition: background-color 0.2s;
}

.cta-button-demos a p {
color: #000000 !important;
}

.cta-button-demos:hover {
background-color: var(--ifm-color-primary-darker);
text-decoration: none;
color: #000000 !important;
}
`}
</style>
128 changes: 91 additions & 37 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -987,43 +987,6 @@ table td {
}

/* Buttons */
.cta-button p {
color: var(--ifm-color-primary) !important;
font-weight: 800 !important;
}
/*
.cta-button:hover {
background-color: var(--ifm-color-primary-darkest);
text-decoration: none;
}

.cta-button p {
color: var(--primary-neutral-1000);
margin-bottom: 0;
display: flex;
align-items: center;
}

.cta-button p span {
color: var(--primary-neutral-1000);
font-weight: bold;
margin-right: 8px;
}

.cta-button p::after {
content: '';
background-image: url('data:image/svg+xml;utf8,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 15.5L12.5 10.5L7.5 5.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
width: 20px;
height: 21px;
margin-left: 8px;
display: inline-block;
transition: transform 0.3s ease-in-out;
}

.cta-button:hover p::after {
transform: translateX(4px);
} */

.button--primary {
color: var(--primary-neutral-0);
}
Expand Down Expand Up @@ -1281,3 +1244,94 @@ table td {
.codeBlockLines_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module {
background-color: var(--primary-neutral-900) !important;
}

/* Index Page Demo Grid */
.docs-doc-id-index .homepage-demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin: 2rem 0;
}

.docs-doc-id-index .homepage-demo-grid .demo-box {
background: var(--primary-neutral-800);
border: 1px solid var(--primary-neutral-700);
border-radius: 12px;
padding: 2rem;
text-align: center;
transition: transform 0.2s;
cursor: pointer;
text-decoration: none;
display: block;
}

.docs-doc-id-index .homepage-demo-grid .demo-box:hover {
transform: translateY(-5px);
}

.docs-doc-id-index .homepage-demo-grid .icon-wrapper {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}

.docs-doc-id-index .homepage-demo-grid .demo-icon {
width: 48px;
height: 48px;
fill: var(--ifm-color-primary);
filter: drop-shadow(0 0 8px var(--ifm-color-primary));
}

.docs-doc-id-index .homepage-demo-grid .demo-box h3 {
margin: 0;
color: var(--primary-neutral-200);
}

.docs-doc-id-index .homepage-demo-grid .demo-box p {
margin-top: 0.75rem;
color: var(--primary-neutral-400);
font-size: 0.9rem;
}

.docs-doc-id-index .homepage-demo-grid .demo-box .demo-cta-button {
display: inline-block;
background-color: var(--ifm-color-primary);
padding: 0.5rem 1rem;
border-radius: 20px;
color: #000000 !important;
text-decoration: none;
font-weight: 500;
font-size: 0.8rem;
margin-top: 1rem;
transition: background-color 0.2s;
}

.docs-doc-id-index .homepage-demo-grid .demo-box:hover .demo-cta-button {
background-color: var(--ifm-color-primary-darker);
}

.docs-doc-id-index .quickstart-button {
color: var(--ifm-color-primary) !important;
}

.docs-doc-id-index .cta-button-demos {
display: inline-block;
background-color: var(--ifm-color-primary);
padding: 0.2rem 0.8rem;
border-radius: 20px;
color: #000000 !important;
text-decoration: none;
font-weight: 500;
margin-top: 1rem;
transition: background-color 0.2s;
}

.docs-doc-id-index .cta-button-demos a p {
color: #000000 !important;
}

.docs-doc-id-index .cta-button-demos:hover {
background-color: var(--ifm-color-primary-darker);
text-decoration: none;
color: #000000 !important;
}