mirror of https://github.com/Qiskit/qiskit.org.git
feat(landing): Updates what qiskit can do (#3141)
* Deletes ctas section * Removes the code block * Updates capabilities description and urls * Update styles * Updates sections order on landing page * Fix lint * Updates capabilities copy Co-authored-by: Abby Mitchell <23662430+javabster@users.noreply.github.com> * Updates capabilities copy Co-authored-by: Abby Mitchell <23662430+javabster@users.noreply.github.com> * Removes unnecessary css classes Co-authored-by: Randy <randytolentino@ibm.com> * Removes unnecessary import Co-authored-by: Randy <randytolentino@ibm.com> * Updates capabilities copy Co-authored-by: Abby Mitchell <23662430+javabster@users.noreply.github.com> * Updates capabilities copy --------- Co-authored-by: Abby Mitchell <23662430+javabster@users.noreply.github.com> Co-authored-by: Randy <randytolentino@ibm.com>
This commit is contained in:
Yaiza
GitHub
parent
ea4b340bbb
commit
c0be4893b2
|
|
@ -1,89 +0,0 @@
|
|||
<template>
|
||||
<code class="code-cell">
|
||||
<div
|
||||
class="code-cell__block"
|
||||
:class="{ 'code-cell__block_active': activeBlocks[0] }"
|
||||
>
|
||||
<pre>import qiskit</pre>
|
||||
<pre> </pre>
|
||||
<pre><span class="code-cell__comment"># create circuit with Qiskit quantum circuit libraries</span></pre>
|
||||
<pre class="code-cell__line">
|
||||
quantum_circuit = qiskit.circuit.library.QuantumVolume(5)</pre
|
||||
>
|
||||
<pre class="code-cell__line">quantum_circuit.measure_all()</pre>
|
||||
<pre class="code-cell__line">quantum_circuit.draw()</pre>
|
||||
<pre> </pre>
|
||||
</div>
|
||||
<div
|
||||
class="code-cell__block"
|
||||
:class="{ 'code-cell__block_active': activeBlocks[1] }"
|
||||
>
|
||||
<pre><span class="code-cell__comment"># select simulator backend</span></pre>
|
||||
<pre>from qiskit import BasicAer</pre>
|
||||
<pre> </pre>
|
||||
<pre>backend = BasicAer.get_backend('qasm_simulator')</pre>
|
||||
<pre> </pre>
|
||||
<pre><span class="code-cell__comment"># prepare your circuit to run on the simulator</span></pre>
|
||||
<pre>optimized_circuit = qiskit.transpile(quantum_circuit, backend)</pre>
|
||||
<pre>optimized_circuit.draw()</pre>
|
||||
<pre> </pre>
|
||||
</div>
|
||||
<div
|
||||
class="code-cell__block"
|
||||
:class="{ 'code-cell__block_active': activeBlocks[2] }"
|
||||
>
|
||||
<pre><span class="code-cell__comment"># run on simulator</span></pre>
|
||||
<pre class="code-cell__line">job = backend.run(optimized_circuit)</pre>
|
||||
<pre class="code-cell__line">result = job.result()</pre>
|
||||
<pre class="code-cell__line">print(result.get_counts())</pre>
|
||||
</div>
|
||||
</code>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
activeBlocks: boolean[];
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "~/assets/scss/carbon.scss";
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
.code-cell {
|
||||
display: block;
|
||||
background-color: qiskit.$background-color-lighter;
|
||||
color: qiskit.$text-color;
|
||||
overflow-x: scroll;
|
||||
padding: carbon.$spacing-05 0;
|
||||
|
||||
&__block {
|
||||
opacity: 0.4;
|
||||
border-left: 0.125rem solid transparent;
|
||||
padding: carbon.$spacing-04 carbon.$spacing-05;
|
||||
margin: -(carbon.$spacing-03) 0;
|
||||
transition: all 0.2s ease-in;
|
||||
|
||||
&_active {
|
||||
opacity: 1;
|
||||
border-color: qiskit.$border-active-color;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-down(md) {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__comment,
|
||||
&__string {
|
||||
color: qiskit.$text-active-color;
|
||||
}
|
||||
|
||||
&__line {
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,55 +1,22 @@
|
|||
<template>
|
||||
<article class="cds--grid page-section qiskit-capabilities-section">
|
||||
<h2>What Can Qiskit Do</h2>
|
||||
<div class="qiskit-capabilities-section__container">
|
||||
<div class="qiskit-capabilities-section__capabilities">
|
||||
<div class="qiskit-capabilities-section__content">
|
||||
<LandingQiskitCapabilityCard
|
||||
v-for="item in capabilities"
|
||||
:id="item.title"
|
||||
:key="item.title"
|
||||
class="qiskit-capabilities-section__card scrollable"
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
:thumbnail-resource="item.thumbnailResource"
|
||||
:link="item.link"
|
||||
/>
|
||||
</div>
|
||||
<div class="qiskit-capabilities-section__scrolling-ui">
|
||||
<LandingQiskitCapabilitiesSectionCodeCell
|
||||
:active-blocks="
|
||||
capabilities.map((item, index) => isActiveSection(item, index))
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qiskit-capabilities-section__ctas">
|
||||
<UiCta
|
||||
class="qiskit-capabilities-section__ctas__link"
|
||||
kind="ghost"
|
||||
:label="quantumLabCTA.label"
|
||||
:segment="quantumLabCTA.segment"
|
||||
:url="quantumLabCTA.url"
|
||||
<div class="cds--row qiskit-capabilities-section__container">
|
||||
<LandingQiskitCapabilityCard
|
||||
v-for="item in capabilities"
|
||||
:id="item.title"
|
||||
:key="item.title"
|
||||
class="cds--col-md-4 qiskit-capabilities-section__card"
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
:thumbnail-resource="item.thumbnailResource"
|
||||
:link="item.link"
|
||||
/>
|
||||
<bx-btn
|
||||
:title="copyCodeCTA.label"
|
||||
class="qiskit-capabilities-section__copy-button"
|
||||
@click="[copyToClipboard(), trackClickEvent(copyCodeCTA.segment)]"
|
||||
>
|
||||
<span class="qiskit-capabilities-section__copy-button__label">{{
|
||||
copyCodeCTA.label
|
||||
}}</span>
|
||||
<Copy16 class="qiskit-capabilities-section__copy-button__icon" />
|
||||
</bx-btn>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import "@carbon/web-components/es/components/button/index.js";
|
||||
import Copy16 from "@carbon/icons-vue/lib/copy/16";
|
||||
import { useScrollBetweenSections } from "~/composables/useScrollBetweenSections";
|
||||
import type { CtaClickedEventProp } from "~/types/segment";
|
||||
|
||||
interface QiskitCapability {
|
||||
|
|
@ -64,10 +31,6 @@ interface QiskitCapability {
|
|||
segment?: CtaClickedEventProp;
|
||||
}
|
||||
|
||||
const { trackClickEvent } = useSegment();
|
||||
|
||||
const { activeSection } = useScrollBetweenSections();
|
||||
|
||||
const capabilities: QiskitCapability[] = [
|
||||
{
|
||||
title: "Circuit Library",
|
||||
|
|
@ -83,7 +46,7 @@ const capabilities: QiskitCapability[] = [
|
|||
{
|
||||
title: "Transpiler",
|
||||
description:
|
||||
"The transpiler translates Qiskit code into an optimized circuit using a backend’s native gate set, allowing users to program for any quantum processor or processor architecture with minimal inputs.",
|
||||
"The transpiler translates Qiskit code into an optimized circuit using a backend’s native gate set, allowing users to program for any quantum processor. Users can transpile with Qiskit's default optimization, use a custom configuration or develop their own plugin.",
|
||||
thumbnailResource: "/images/landing-page/transpiler.png",
|
||||
link: {
|
||||
url: "https://qiskit.org/documentation/apidoc/transpiler.html",
|
||||
|
|
@ -92,64 +55,35 @@ const capabilities: QiskitCapability[] = [
|
|||
},
|
||||
},
|
||||
{
|
||||
title: "Run on real hardware",
|
||||
title: "Run on any hardware",
|
||||
description:
|
||||
"Users can run and schedule jobs on real quantum processors, and employ Qiskit Runtime to orchestrate quantum programs on cloud-based CPUs, QPUs, and GPUs.",
|
||||
"Qiskit helps users schedule and run quantum programs on a variety of local simulators and cloud-based quantum processors. It supports several quantum hardware designs, such as superconducting qubits and trapped ions.",
|
||||
thumbnailResource: "/images/library/chip-01.png",
|
||||
link: {
|
||||
url: "https://qiskit.org/documentation/apidoc/ibmq_provider.html",
|
||||
url: "/providers",
|
||||
label: "Learn more",
|
||||
segment: { cta: "run-on-hardware", location: "homepage-capabilities" },
|
||||
segment: {
|
||||
cta: "transpile-to-any-hardware",
|
||||
location: "homepage-capabilities",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Try it yourself",
|
||||
description:
|
||||
"Ready to explore Qiskit’s capabilities for yourself? Copy the code to the right of this paragraph and try running it in your local Python environment. You can also click the link to the IBM Quantum Lab and test it there.",
|
||||
"Ready to explore Qiskit’s capabilities for yourself? Learn how to run Qiskit in the cloud or your local Python environment.",
|
||||
thumbnailResource: "/images/landing-page/med_02_1.png",
|
||||
segment: { cta: "try-it-yourself", location: "homepage-capabilities" },
|
||||
link: {
|
||||
url: "https://qiskit.org/documentation/getting_started.html",
|
||||
label: "Learn more",
|
||||
segment: { cta: "try-it-yourself", location: "homepage-capabilities" },
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const quantumLabCTA = {
|
||||
url: "https://quantum-computing.ibm.com/lab/files/qiskit-textbook/getting-started/example.ipynb",
|
||||
label: "Open in Quantum Lab",
|
||||
segment: { cta: "open-in-quantum-lab", location: "homepage-capabilities" },
|
||||
};
|
||||
|
||||
const copyCodeCTA = {
|
||||
url: "",
|
||||
label: "Copy code",
|
||||
segment: { cta: "copy-code", location: "homepage-capabilities" },
|
||||
};
|
||||
|
||||
function isActiveSection(item: QiskitCapability, index: number): boolean {
|
||||
if (capabilities[capabilities.length - 1].title === activeSection.value) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (
|
||||
item.title === activeSection.value ||
|
||||
(activeSection.value === "" && index === 0)
|
||||
);
|
||||
}
|
||||
|
||||
function copyToClipboard(): void {
|
||||
const codeSnippet = document.querySelector(
|
||||
".code-cell"
|
||||
) as HTMLElement | null;
|
||||
|
||||
if (codeSnippet !== null) {
|
||||
navigator.clipboard.writeText(codeSnippet.innerText);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "~/assets/scss/carbon.scss";
|
||||
@use "~/assets/scss/helpers/index.scss" as qiskit;
|
||||
|
||||
$cta-max-width: 14rem;
|
||||
|
||||
.qiskit-capabilities-section {
|
||||
padding-bottom: carbon.$spacing-09;
|
||||
|
|
@ -163,102 +97,8 @@ $cta-max-width: 14rem;
|
|||
}
|
||||
}
|
||||
|
||||
&__capabilities {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
@include carbon.breakpoint-down(md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
margin-bottom: carbon.$spacing-07;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: carbon.$spacing-13;
|
||||
|
||||
@include carbon.breakpoint-down(md) {
|
||||
margin-bottom: carbon.$spacing-07;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__scrolling-ui {
|
||||
position: sticky;
|
||||
top: carbon.$spacing-06;
|
||||
flex: 0 0 1;
|
||||
max-width: 100%;
|
||||
min-height: 20rem;
|
||||
|
||||
@include carbon.breakpoint-up(xlg) {
|
||||
flex: 0 0 38rem;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-between(lg, xlg) {
|
||||
flex: 0 0 34rem;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-down(lg) {
|
||||
flex: 0 0 22rem;
|
||||
}
|
||||
|
||||
@include carbon.breakpoint-down(md) {
|
||||
flex: initial;
|
||||
width: 100%;
|
||||
margin-bottom: carbon.$spacing-07;
|
||||
}
|
||||
}
|
||||
|
||||
&__ctas {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include carbon.breakpoint-down(md) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
&__link {
|
||||
width: 100%;
|
||||
max-width: $cta-max-width;
|
||||
padding: carbon.$spacing-05;
|
||||
margin-right: carbon.$spacing-05;
|
||||
justify-content: space-between;
|
||||
|
||||
@include carbon.breakpoint-down(md) {
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__copy-button {
|
||||
width: 100%;
|
||||
max-width: $cta-max-width;
|
||||
padding-right: carbon.$spacing-05;
|
||||
background-size: 200% 100%;
|
||||
background-position-x: 100%;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
qiskit.$button-background-color-light 0%,
|
||||
qiskit.$button-background-color-light 50%,
|
||||
qiskit.$background-color-secondary 50%,
|
||||
qiskit.$background-color-secondary 100%
|
||||
);
|
||||
transition: background-position-x 0.3s ease-out;
|
||||
|
||||
@include carbon.breakpoint-down(md) {
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-position-x: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<main>
|
||||
<LandingHeroMomentComponent :version="qiskitVersion" />
|
||||
<LandingQuickStartComponent />
|
||||
<LandingQiskitCapabilitiesSectionComponent />
|
||||
<LandingQuickStartComponent />
|
||||
<LandingLearnSectionComponent />
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue