forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1605 from mermaid-js/update-promos

Browse Source 
Update promos
This commit is contained in:
Sidharth Vinod
2025-02-14 13:45:46 +05:30
committed by GitHub
parent c5eaf340b4 1df59ae5dd
commit 77234d95b3
2 changed files with 95 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Navbar.svelte
+1 -2
View File
@@ -60,8 +60,7 @@
</script>
{#if activePromotion}
<div
class="top-bar z-10 flex h-fit w-full items-center justify-center bg-gradient-to-r from-[#bd34fe] to-[#ff3670] p-1 text-center text-white">
<div class="top-bar z-10 flex h-fit w-full bg-primary">
<div
class="flex flex-grow"
role="button"
src/lib/util/promos/January2025.svelte
+94 -18
View File
@@ -7,24 +7,95 @@
url: string;
}
const taglines: Taglines[] = [
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard'
const allTaglines: { [key: string]: { design: number; taglines: Taglines[] } } = {
A: {
design: 1,
taglines: [
{
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle_A'
},
{
label: 'Diagram live with teammates in Mermaid Chart',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams_A'
},
{
label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor_A'
},
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_A'
}
]
},
{
label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor'
B: {
design: 2,
taglines: [
{
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle_B'
},
{
label: 'Diagram live with teammates in Mermaid Chart',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams_B'
},
{
label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor_B'
},
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_A'
}
]
},
{
label: 'Diagram live with teammates in Mermaid Chart',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams'
C: {
design: 1,
taglines: [
{
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle_C'
},
{
label: 'Diagram live with teammates in Mermaid Pro',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams_C'
},
{
label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor_C'
},
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_B'
}
]
},
{
label: 'Replace ChatGPT Pro, Mermaid.live, and LucidChart with Mermaid Pro',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle'
D: {
design: 2,
taglines: [
{
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=AIbundle_D'
},
{
label: 'Diagram live with teammates in Mermaid Pro',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams_D'
},
{
label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor_D'
},
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=whiteboard_B'
}
]
}
];
};
const { design, taglines } =
Object.values(allTaglines)[Math.floor(Math.random() * Object.values(allTaglines).length)];
let index = Math.floor(Math.random() * taglines.length);
let currentTagline = $state(taglines[index]);
@@ -39,17 +110,22 @@
});
</script>
<div class="grid w-full">
<div
class="grid w-full {design === 1
? 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670]'
: 'bg-[#2E2183]'} ">
{#key currentTagline}
<a
href={currentTagline.url}
target="_blank"
class="col-start-1 row-start-1 flex items-center justify-center gap-4 no-underline"
class="col-start-1 row-start-1 flex items-center justify-center gap-4 p-0.5 no-underline"
in:fade={{ delay: 750 }}
out:fade={{ duration: 1000 }}>
<span class="text-sm tracking-wider">{currentTagline.label}</span>
<button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide"
>Try now</button>
<button
class="rounded p-0.5 px-2 text-sm font-semibold tracking-wide"
class:bg-[#2E2183]={design === 1}
class:bg-[#E0095F]={design === 2}>Try now</button>
</a>
{/key}
</div>