@orangesk/cms-templates 1.0.0-beta.0 → 1.0.0-beta.2

package/src/pages/product-page-b2c-equipment-insurance.mdx

@@ -1,435 +0,0 @@
----
----
-
-import {
-  Accordion,
-  AccordionItem,
-  AnchorNavigation,
-  Bar,
-  BarItem,
-  BlockAction,
-  BlockActionControl,
-  Breadcrumbs,
-  Button,
-  Card,
-  CardSection,
-  Carousel,
-  Controls,
-  Divider,
-  Expander,
-  Grid,
-  GridCol,
-  Icon,
-  IconList,
-  Pagination,
-  Pictogram,
-  Pill,
-  Section,
-} from "@orangesk/orange-design-system";
-import Page from "../layouts/DefaultPage";
-import { HeroSection } from "../components/HeroSection";
-import { ArticleCard } from "../components/ArticleCard";
-import { FileCard } from "../components/FileCard";
-import { FAQ } from "../components/FAQ";
-import { PageHeadingSimple } from "../components/PageHeading";
-import { SliderCard } from "./product-page-b2c-online-security.mdx";
-
-export const cards = [
-  {
-    title: (
-      <h3 className="h4 mb-large">
-        Poistenie zariadení <br />
-        <span className="thin text-accent h2">Optimal</span>
-      </h3>
-    ),
-    description: "Platnosť poistenia maximálne 48 mesiacov",
-    price: "5,00",
-    primaryBtn: "Aktivovať",
-    secondaryBtn: "Podrobné informácie",
-    oBaliku: [
-      "Poškodenie a krádež s limitom do 600 €",
-      "Nákup na internete (EÚ a rozvinuté krajiny) do 600 €",
-      "Nákup na internete (ostatné krajiny a použitý tovar) do 200 €",
-    ],
-    aktivacia: [
-      "Vhodné pre mobily, tablety a smart hodinky do 600 €",
-      "Kryjeme aj poškodenie z nešikovnosti a nedbanlivosti",
-      "Spoluúčasť 10 %",
-    ],
-  },
-  {
-    title: (
-      <h3 className="h4 mb-large">
-        Poistenie zariadení <br />
-        <span className="thin text-accent h2">Premium</span>
-      </h3>
-    ),
-    description: "Platnosť poistenia maximálne 48 mesiacov",
-    price: "10,00",
-    primaryBtn: "Aktivovať",
-    secondaryBtn: "Podrobné informácie",
-    oBaliku: [
-      "Poškodenie a krádež s limitom do 2000 €",
-      "Nákup na internete (EÚ a rozvinuté krajiny) do 600 €",
-      "Nákup na internete (ostatné krajiny a použitý tovar) do 200 €",
-      "Zneužitie elektronických platieb do 2 000 €",
-    ],
-    aktivacia: [
-      "Vhodné pre mobily, tablety a smart hodinky nad 600,01 €",
-      "Kryjeme aj poškodenie z nešikovnosti a nedbanlivosti",
-      "Spoluúčasť 10 %",
-    ],
-  },
-];
-
-export const ProductCard = ({ card }) => (
-  <Card className="mb-none">
-    <CardSection>
-      {card.title}
-
-      <p className="h1 normal mb-small">
-        {card.price}
-        <span className="large bold"> &euro;/mes.</span>
-      </p>
-      <p className="text-secondary mb-large">{card.description}</p>
-      <Button type="primary">{card.primaryBtn}</Button>
-      <Button>{card.secondaryBtn}</Button>
-    </CardSection>
-    <Divider />
-    <CardSection>
-      <Expander summary="Poistenie obsahuje" isFullWidth open>
-        <IconList
-          items={card.oBaliku.map((item) => ({
-            icon: "tick",
-            content: item,
-          }))}
-          className="normal"
-        />
-      </Expander>
-      <Expander summary="Výhody" isFullWidth open>
-        <IconList
-          items={card.aktivacia.map((item) => ({
-            icon: "tick",
-            content: item,
-          }))}
-          className="normal"
-        />
-      </Expander>
-    </CardSection>
-
-  </Card>
-);
-
-{/* TODO - this page, figma changed */}
-export const InsuranceCards = () => (
-
-<Section color="surface-subtle" id="ponuka-poistenia" spacing="default">
-  <div className="show-lg">
-    <Grid>
-      <GridCol size={{ xs: 12, lg: 4 }}>
-        <h2 className="h2 thin mb-large">{"Ponuka poistenia"}</h2>
-      </GridCol>
-      {cards.map((card, cardIndex) => (
-        <GridCol key={cardIndex} size={{ xs: 12, md: 6, lg: 4 }}>
-          <ProductCard card={card} />
-        </GridCol>
-      ))}
-    </Grid>
-  </div>
-  <div className="hide-lg">
-    <h2 className="h2 thin mb-large">{"Ponuka poistenia"}</h2>
-    <div className="mb">
-      <Controls
-        icon="chevron-left"
-        data-carousel-controls="carousel-insurance-cards"
-        data-carousel-action="prev"
-      />
-      <Controls
-        icon="chevron-right"
-        data-carousel-controls="carousel-insurance-cards"
-        data-carousel-action="next"
-      />
-    </div>
-    <Carousel
-      id="carousel-insurance-cards"
-      className="hide-lg mb mb-md-large"
-      data-swiper-options='{"slidesPerView":1.1,"breakpoints":{"768":{"slidesPerView":1.6}}}'
-      items={cards.map((card, cardIndex) => (
-        <div key={cardIndex}>
-          <ProductCard card={card} />
-        </div>
-      ))}
-      showScrollbar={true}
-      bleedRight
-    />
-  </div>
-</Section>
-);
-
-export const PictogramSection = () => (
-  <Section spacing="default">
-    <Grid>
-      <GridCol
-        size={{ xs: 12, md: 4 }}
-        className="d-flex flex-column align-items-center"
-      >
-        <Pictogram
-          name="pictogram-random-damage"
-          size="xxlarge"
-          className="mb-xsmall"
-        />
-        <p>Náhodné poškodenie</p>
-      </GridCol>
-      <GridCol
-        size={{ xs: 12, md: 4 }}
-        className="d-flex flex-column align-items-center"
-      >
-        <Pictogram
-          name="pictogram-theft"
-          size="xxlarge"
-          className="mb-xsmall"
-        />
-        <p>Krádež</p>
-      </GridCol>
-      <GridCol
-        size={{ xs: 12, md: 4 }}
-        className="d-flex flex-column align-items-center"
-      >
-        <Pictogram
-          name="pictogram-water-damage"
-          size="xxlarge"
-          className="mb-xsmall"
-        />
-        <p>Obliatie vodou</p>
-      </GridCol>
-    </Grid>
-  </Section>
-);
-
-export const InsuranceApplication = () => (
-  <Section spacing="default" id="kedy-si-uplatnit">
-    <h2 className="h2 thin mb-xlarge">
-      {"Kedy si môžete poistenie uplatniť?"}
-    </h2>
-    <Carousel
-      id="carousel-insurance-application"
-      data-swiper-options='{"slidesPerView":1.2,"breakpoints":{"768":{"slidesPerView":2.5},"1024":{"slidesPerView":3.5}}}'
-      items={[
-        <ArticleCard
-          title="Zvýšte hodnotu svojej nehnuteľnosti"
-          description="Poistenie si môžete uplatniť na popraskaný displej či nefungujúce tlačidlá, keď sa pošmyknete, zakopnete alebo do vás niekto vrazí a telefón vám spadne."
-          src="/assets/blogpost-cover-image-1.png"
-          alt="Image alt"
-        />,
-        <ArticleCard
-          title="Zvýšte hodnotu svojej nehnuteľnosti"
-          description="Poistenie si môžete uplatniť na popraskaný displej či nefungujúce tlačidlá, keď sa pošmyknete, zakopnete alebo do vás niekto vrazí a telefón vám spadne."
-          src="/assets/blogpost-cover-image-1.png"
-          alt="Image alt"
-        />,
-        <ArticleCard
-          title="Zvýšte hodnotu svojej nehnuteľnosti"
-          description="Poistenie si môžete uplatniť na popraskaný displej či nefungujúce tlačidlá, keď sa pošmyknete, zakopnete alebo do vás niekto vrazí a telefón vám spadne."
-          src="/assets/blogpost-cover-image-1.png"
-          alt="Image alt"
-        />,
-        <ArticleCard
-          title="Zvýšte hodnotu svojej nehnuteľnosti"
-          description="Poistenie si môžete uplatniť na popraskaný displej či nefungujúce tlačidlá, keď sa pošmyknete, zakopnete alebo do vás niekto vrazí a telefón vám spadne."
-          src="/assets/blogpost-cover-image-1.png"
-          alt="Image alt"
-        />,
-        <ArticleCard
-          title="Zvýšte hodnotu svojej nehnuteľnosti"
-          description="Poistenie si môžete uplatniť na popraskaný displej či nefungujúce tlačidlá, keď sa pošmyknete, zakopnete alebo do vás niekto vrazí a telefón vám spadne."
-          src="/assets/blogpost-cover-image-1.png"
-          alt="Image alt"
-        />,
-      ]}
-      showScrollbar={true}
-      bleedRight
-    />
-  </Section>
-);
-
-export const InsuranceInfo = () => (
-  <Section spacing="default" id="ako-poistenie-funguje">
-    <Grid className="mb-large" rowGapSize="medium">
-      <GridCol size={{ xs: 12, lg: 10 }}>
-        <h2 className="h2 thin mb-none">{"Ako poistenie funguje?"}</h2>
-      </GridCol>
-      <GridCol size={{ xs: 12, lg: 2 }} className="align-lg-right">
-        <Controls
-          icon="chevron-left"
-          data-carousel-controls="carousel-insurance-info"
-          data-carousel-action="prev"
-        />
-        <Controls
-          icon="chevron-right"
-          data-carousel-controls="carousel-insurance-info"
-          data-carousel-action="next"
-        />
-      </GridCol>
-    </Grid>
-    <Carousel
-      id="carousel-insurance-info"
-      data-swiper-options='{"slidesPerView":2.2,"breakpoints":{"768":{"slidesPerView":3.5}}}'
-      items={[
-        <SliderCard
-          number={"1"}
-          title={"Uzatvorenie poistenia"}
-          description={`Vyberte si zariadenie, ktoré si chcete poistiť. Uzatvorte poistenie
-          zariadenia na pobočke Orange alebo pri nákupe v e-shope.`}
-        />,
-        <SliderCard
-          number={"2"}
-          title={"V prípade poškodenia"}
-          description={`V prípade poškodenia kontaktujte poisťovňu.`}
-          isActive
-        />,
-        <SliderCard
-          number={"3"}
-          title={"V prípade krádeže"}
-          description={`V prípade krádeže nahláste krádež aj na polícii. Budete potrebovať policajný protokol.`}
-        />,
-        <SliderCard
-          number={"4"}
-          title={"Online hrozba"}
-          description={`V prípade udalostí z online hrozieb kontaktujte poisťovňu a postupujte podľa jej pokynov.`}
-        />,
-      ]}
-      showScrollbar={true}
-      bleedRight
-    />
-  </Section>
-);
-
-export const ClaimReport = () => (
-  <Section spacing="default" id="poistna-udalost">
-    <Grid>
-      <GridCol size={{ xs: 12, lg: 4 }}>
-        <h2 className="h2 thin mb-xlarge">{"Ako nahlásiť poistnú udalosť?"}</h2>
-      </GridCol>
-      <GridCol size={{ xs: 12, md: 6, lg: 4 }}>
-        <Pill size="xxlarge" className="mb" color="surface-subtle">
-          <Icon name="call" size="large" />
-        </Pill>
-        <h3 className="h3 mb-small">
-          {"Telefonicky kontakt"}
-          <br />
-          {"Slovensko"}
-        </h3>
-        <p className="mb-small">Pre poistnú udalosť na Slovensku zavolajte</p>
-        <p className="mb-none">
-          <strong>0800 108 156</strong>
-        </p>
-        <p>Pracovné dni 8:00 - 16:00</p>
-      </GridCol>
-      <GridCol size={{ xs: 12, md: 6, lg: 4 }}>
-        <Pill size="xxlarge" className="mb" color="surface-subtle">
-          <Icon name="suitcase" size="large" />
-        </Pill>
-        <h3 className="h3 mb-small">
-          {"Telefonicky kontakt"}
-          <br />
-          {"Zahraničie"}
-        </h3>
-        <p className="mb-small">Pre poistnú udalosť v zahraničí zavolajte</p>
-        <p className="mb-none">
-          <strong>00421 2 582 400 73</strong>
-        </p>
-        <p>Pracovné dni 8:00 - 16:00</p>
-      </GridCol>
-    </Grid>
-  </Section>
-);
-
-export const Documentation = () => (
-  <Section color="surface-subtle" spacing="default" id="dokumnetacia">
-    <Grid>
-      <GridCol size={{ xs: 12, lg: 4 }}>
-        <h2 className="h2 thin mb-xlarge">
-          {"Dokumentácia k poistnému produktu"}
-        </h2>
-      </GridCol>
-      <GridCol size={{ xs: 12, lg: 8 }}>
-        <p>{`Poskytovateľom poistenia je Poisťovňa BNP Paribas Cardif Poisťovňa, a.s. Sprostredkovateľom poistenia je spoločnosť Orange Slovensko, a.s., ktorá koná ako podriadený finančný agent samostatného finančného agenta K Finance Life, s.r.o.`}</p>
-        <p className="mb-xlarge">{`Vyššie uvedené výhody a informácie platia pre poistenia dohodnuté po 19.4.2023. Kompletné informácie nájdete v poistnej zmluve a vo Všeobecných poistných podmienkach pre Bezpečné poistenie zariadení, ktorými sa poistenie riadi. Pre poistenia dojednané pred 19.4.2023 zostávajú v platnosti podmienky a dokumenty platné v čase dojednania poistenia, t.j. v čase nákupu zariadenia.`}</p>
-        <Accordion className="mb-none">
-          <AccordionItem
-            title="Dokumenty k poistnému produktu"
-            id="dokumenty"
-            isActive
-          >
-            <FileCard
-              title="Informácie pre spotrebiteľa pred uzatvorením poistnej zmluvy na diaľku platné od 19.4.2023"
-              description="PDF 95 kB"
-            />
-            <FileCard
-              title="Informačný dokument o poistnom produkte platný od 19.4.2023"
-              description="PDF 263 kB"
-            />
-            <FileCard
-              title="Všeobecné poistné podmienky pre poistenie zariadení platné od 19.4.2023"
-              description="PDF 232 kB"
-            />
-          </AccordionItem>
-          <AccordionItem title="Archív dokumentov" id="archiv">
-            <FileCard
-              title="Informácie pre spotrebiteľa pred uzatvorením poistnej zmluvy na diaľku platné od 19.4.2023"
-              description="PDF 95 kB"
-            />
-            <FileCard
-              title="Informačný dokument o poistnom produkte platný od 19.4.2023"
-              description="PDF 263 kB"
-            />
-            <FileCard
-              title="Všeobecné poistné podmienky pre poistenie zariadení platné od 19.4.2023"
-              description="PDF 232 kB"
-            />
-          </AccordionItem>
-        </Accordion>
-      </GridCol>
-    </Grid>
-  </Section>
-);
-
-<Page>
-  <PageHeadingSimple title="Bezpečné poistenie zariadení">
-    <p>{`Oprava mobilu nemusí byť vždy lacnou záležitosťou. Bezpečné poistenie
-      zariadení chráni vaše zariadenia proti poškodeniu a krádeži, ale aj vás
-      proti online rizikám.`}</p>
-  </PageHeadingSimple>
-  <AnchorNavigation
-    items={[
-      {
-        href: "#ponuka-poistenia",
-        isActive: true,
-        label: "Ponuka poistenia",
-      },
-      {
-        href: "#kedy-si-uplatnit",
-        label: "Kedy si uplatniť",
-      },
-      {
-        href: "#ako-poistenie-funguje",
-        label: "Ako poistenie funguje",
-      },
-      {
-        href: "#poistna-udalost",
-        label: "Poistná udalosť",
-      },
-      {
-        href: "#dokumnetacia",
-        label: "Dokumentácia",
-      },
-    ]}
-  />
-  <InsuranceCards />
-  <PictogramSection />
-  <InsuranceApplication />
-  <InsuranceInfo />
-  <ClaimReport />
-  <Documentation />
-  <FAQ />
-</Page>