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

package/src/pages/product-page-b2c-online-security.mdx

@@ -1,285 +0,0 @@
----
----
-
-import {
-  Accordion,
-  AccordionItem,
-  AnchorNavigation,
-  Bar,
-  BarItem,
-  BlockAction,
-  BlockActionControl,
-  Breadcrumbs,
-  Button,
-  Buttons,
-  Card,
-  CardSection,
-  Carousel,
-  Container,
-  Controls,
-  Cover,
-  Divider,
-  Expander,
-  Grid,
-  GridCol,
-  Icon,
-  Pagination,
-  Pictogram,
-  Pill,
-  Section,
-} from "@orangesk/orange-design-system";
-import Page from "../layouts/DefaultPage";
-import { FAQ } from "../components/FAQ";
-import { HeroSection } from "../components/HeroSection";
-
-export const Product = () => (
-  <Section
-    spacing="default"
-    color="background-secondary"
-    id="online-ochrana-basic"
-  >
-    <Grid rowGapSize="large">
-      <GridCol size={{ xs: 12, lg: 6 }} align="middle">
-        <h2 className="h4 mb-large">
-          Online ochrana <br />{" "}
-          <span className="text-accent thin h2">Basic</span>
-        </h2>
-        <p className="mb-large">
-          Ochrana zariadenia v Orange mobilnej dátovej sieti. Určené pre každého
-          zákazníka, ktorý chce byť chránený ihneď či už v 3G, 4G alebo 5G.
-        </p>
-        <p className="text-secondary mb-large">
-          Bez nutnosti sťahovania dodatočného softvéru a aplikácie.
-        </p>
-        <Buttons isStackedOnXs>
-          <Button type="primary" className="mt-small" size="large">
-            Aktivovať v Môj Orange
-          </Button>
-          <Button className="mt-small" size="large">
-            Nemám ešte paušál
-          </Button>
-        </Buttons>
-      </GridCol>
-      <GridCol size={{ xs: 12, lg: 6 }} align="middle">
-        <Bar align="center">
-          <BarItem>
-            <Pill size="xxlarge" color="surface-primary">
-              <Icon name="mobile-applications" size="large" />
-            </Pill>
-          </BarItem>
-          <BarItem isFilling className="h3">
-            Ochrana pred hrozbami
-          </BarItem>
-        </Bar>
-        <Bar align="center">
-          <BarItem>
-            <Pill size="xxlarge" color="surface-primary">
-              <Icon name="cyber-shield" size="large" />
-            </Pill>
-          </BarItem>
-          <BarItem isFilling className="h3">
-            Bezpečné používanie internetu
-          </BarItem>
-        </Bar>
-        <Bar align="center">
-          <BarItem>
-            <Pill size="xxlarge" color="surface-primary">
-              <Icon name="dashboard-display" size="large" />
-            </Pill>
-          </BarItem>
-          <BarItem isFilling className="h3">
-            Prehľad a kontrola
-          </BarItem>
-        </Bar>
-      </GridCol>
-    </Grid>
-  </Section>
-);
-
-export const Benefits = () => (
-  <Section spacing="default">
-    <Grid>
-      <GridCol size={{ xs: 12, lg: 4 }}>
-        <h2 className="h2 thin mb-large">{"Výhody"}</h2>
-      </GridCol>
-      <GridCol size={{ xs: 12, md: 6, lg: 4 }} className="mb-large mb-md-none">
-        <div className="mb-large mb-md-xlarge">
-          <Pill size="xxlarge" className="mb" color="surface-subtle">
-            <Icon name="mobile-applications" size="large" />
-          </Pill>
-          <h3 className="h3 mb-small">{"Množstvo funkcií"}</h3>
-          <p className="mb-small">
-            {`Automatická ochrana proti spamu, vírusom, malvéru a phishingu s rozšírenými možnosťami kontroly a blokovania webového obsahu.`}
-          </p>
-        </div>
-        <div>
-          <Pill size="xxlarge" className="mb" color="surface-subtle">
-            <Icon name="cyber-shield" size="large" />
-          </Pill>
-          <h3 className="h3 mb-small">{"Spravovanie prístupu"}</h3>
-          <p>
-            {`Všetko si môžete nastavovať jednoducho cez webovú aplikáciu, ktorú si nemusíte inštalovať.`}
-          </p>
-          <p className="mb-small">
-            {`Máte možnosť natrvalo alebo v konkrétnych časoch zablokovať prístup k sociálnym sieťam vybraným stránkam, či kategóriám stránok.`}
-          </p>
-        </div>
-      </GridCol>
-      <GridCol size={{ xs: 12, md: 6, lg: 4 }}>
-        <div className="mb-large mb-md-xlarge">
-          <Pill size="xxlarge" className="mb" color="surface-subtle">
-            <Icon name="cyber-shield" size="large" />
-          </Pill>
-          <h3 className="h3 mb-small">{"Zvýšená bezpečnosť"}</h3>
-          <p className="mb-small">
-            {`Služba poskytuje aj zabezpečenie vašich osobných údajov, súborov a aplikácií či peňazí pri používaní internetového bankingu.`}
-          </p>
-        </div>
-        <div>
-          <Pill size="xxlarge" className="mb" color="surface-subtle">
-            <Icon name="dashboard-display" size="large" />
-          </Pill>
-          <h3 className="h3 mb-small">{"Poskytovanie reportov"}</h3>
-          <p className="mb-small">
-            {`K dispozícii máte tiež prehľadné reporty zablokovaných útokov, generované na týždennej alebo mesačnej báze.`}
-          </p>
-        </div>
-      </GridCol>
-    </Grid>
-  </Section>
-);
-
-export const SliderCard = ({
-  number,
-  title,
-  description,
-  children,
-  isActive,
-}) => (
-  <Card color={isActive ? "background-accent" : undefined} noBorder>
-    <CardSection>
-      <Pill
-        size="xxlarge"
-        className="mb h2"
-        color={isActive ? "surface-tertiary" : undefined}
-      >
-        <span className="h3 mb-none">{number}</span>
-      </Pill>
-      <p className="h3 bold mb-small">{title}</p>
-      <p>{description}</p>
-      {children}
-    </CardSection>
-  </Card>
-);
-
-export const HowToGet = () => (
-  <Section spacing="default" id="ako-si-aktivovat">
-    <Grid className="mb-large" rowGapSize="medium">
-      <GridCol size={{ xs: 12, lg: 10 }}>
-        <h2 className="h2 thin mb-none">
-          {"Ako si aktivovať Online ochranu?"}
-        </h2>
-      </GridCol>
-      <GridCol size={{ xs: 12, lg: 2 }} className="align-lg-right">
-        <Controls
-          icon="chevron-left"
-          data-carousel-controls="carousel-how-to-get"
-          data-carousel-action="prev"
-        />
-        <Controls
-          icon="chevron-right"
-          data-carousel-controls="carousel-how-to-get"
-          data-carousel-action="next"
-        />
-      </GridCol>
-    </Grid>
-    <Carousel
-      id="carousel-how-to-get"
-      data-swiper-options='{"slidesPerView":1.2,"breakpoints":{"768":{"slidesPerView":2.5},"1240":{"slidesPerView":3.2}}}'
-      items={[
-        <SliderCard
-          number={"1"}
-          title={"Prihláste sa"}
-          description={`Službu si môžete objednať jednoducho cez Môj Orange, alebo telefonicky na čísle 905.`}
-        >
-          <Buttons isStackedOnXs>
-            <Button type="fill">{"Zákaznícka zóna"}</Button>
-            <Button>{"Prejsť do Môj Orange app"}</Button>
-          </Buttons>
-        </SliderCard>,
-        <SliderCard
-          number={"2"}
-          title={"Aktivácia"}
-          description={`Potvrďte aktiváciu služby Online ochrana. Aktivácia prebehne
-              zvyčajne do pár minút, najviac však do 24 hodín.`}
-          isActive
-        />,
-        <SliderCard
-          number={"3"}
-          title={"Potvrdenie"}
-          description={`Po úspešnom overení aktivácie budete informovaní aj cez SMS správu.`}
-        />,
-        <SliderCard
-          number={"4"}
-          title={"Nastavenia"}
-          description={`Pre podrobné nastavenie služby stačí navštíviť portál služby Online ochrana.`}
-        >
-          <Button preserveWidth>{"Nastavenia Online ochrana"}</Button>
-        </SliderCard>,
-      ]}
-      showScrollbar={true}
-      bleedRight
-    />
-  </Section>
-);
-
-export const Login = () => (
-  <Section spacing="default">
-    <div className="d-flex flex-column align-items-center">
-      <Pill color="surface-subtle" size="xxlarge" className="mb">
-        <Icon name="cyber-shield" size="large" />
-      </Pill>
-      <h1 className="h1 thin align-center">
-        {"Prihláste sa do vašej Online ochrany"}
-      </h1>
-      <p className="align-center">
-        {`Ak už máte službu aktivovanú, prihláste sa do webového portálu Online
-        ochrana. V ňom nájdete informácie o službe, notifikačné centrum s
-        detekciou vírusov, možnosti nastavenia profilu, prehľad navštívených
-        stránok a nastavenia obsahu.`}
-      </p>
-      <Button type="primary">Prihlásiť sa do portálu</Button>
-    </div>
-  </Section>
-);
-
-<Page>
-  <HeroSection
-    src="/assets/online-ochrana-b2c.png"
-    alt="Online ochrana"
-    title="Online ochrana vášho zariadenia"
-    description="Aby ste boli na internete chránení, nemusíte inštalovať do svojho zariadenia žiadnu aplikáciu. Online ochrana kontroluje škodlivý obsah z internetu ešte pred tým, ako sa dostane do vášho zariadenia."
-  />
-  <AnchorNavigation
-    items={[
-      {
-        href: "#online-ochrana-basic",
-        isActive: true,
-        label: "Online ochrana Basic",
-      },
-      {
-        href: "#ako-si-aktivovat",
-        label: "Ako si aktivovať",
-      },
-      {
-        href: "#najcastejsie-otazky",
-        label: "Najčastejšie otázky",
-      },
-    ]}
-  />
-  <Product />
-  <Benefits />
-  <HowToGet />
-  <Login />
-  <FAQ />
-</Page>

package/src/pages/product-page-b2c-prima-volba-signpost.mdx

@@ -1,289 +0,0 @@
----
----
-
-import {
-  Accordion,
-  AccordionItem,
-  AnchorNavigation,
-  Bar,
-  BarItem,
-  BlockAction,
-  BlockActionControl,
-  BlockActionOverride,
-  Breadcrumbs,
-  Button,
-  Buttons,
-  Card,
-  CardSection,
-  Carousel,
-  Controls,
-  Divider,
-  Expander,
-  Grid,
-  GridCol,
-  Icon,
-  IconList,
-  Link,
-  Modal,
-  Pagination,
-  Pictogram,
-  Pill,
-  PromoBanner,
-  Section,
-  Tag,
-  ModalProductHeader,
-  ModalProductFooter,
-  ModalCloseButton,
-} from "@orangesk/orange-design-system";
-import Page from "../layouts/DefaultPage";
-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";
-import { ActionTiles } from "../components/ActionTile";
-
-export const list = [
-  {
-    title: "Chcem si preniesť číslo od iného operátora",
-    price: <p className="h2 thin mb-xsmall">zadarmo</p>,
-    description: "Bez viazanosti",
-    cta: "Objednať a preniesť číslo",
-    includes: [
-      "3x 10 GB dát na 30 dní",
-      "Nekonečné hovory na 3 čísla v sieti Orange na 3 mesiace zadarmo ",
-      "Po prvom dobití získate bonusový kredit 7 €",
-    ],
-  },
-  {
-    title: "Chcem Prima Voľba s novým číslom",
-    price: (
-      <p className="h2 thin mb-xsmall">
-        5 <span className="h4 normal">&euro;</span>
-      </p>
-    ),
-    description: "Bez viazanosti",
-    cta: "Objednať a preniesť číslo",
-    includes: [
-      "3x 10 GB dát na 30 dní",
-      "Nekonečné hovory na 3 čísla v sieti Orange na 3 mesiace zadarmo ",
-      "5 € úvodný kredit",
-    ],
-  },
-];
-
-export const ProductModal = () => (
-  <Modal
-    id="modal-product"
-    disableHeaderSpacing
-    disableFooterSpacing
-    renderHeader={() => (
-      <>
-        <ModalProductHeader>
-          <Bar space="small" className="mb-none">
-            <BarItem>
-              <h2 className="h3">{"Prima Voľba"}</h2>
-            </BarItem>
-            <BarItem isFilling>
-              <Tag color="black">5G</Tag>
-            </BarItem>
-          </Bar>
-        </ModalProductHeader>
-        <ModalCloseButton />
-        <Divider />
-      </>
-    )}
-    renderFooter={() => (
-      <>
-        <Divider />
-        <ModalProductFooter
-          button={
-            <Button
-              type="primary"
-              data-a11y-dialog-hide={true}
-              size="large"
-              className="mb-none"
-            >
-              Chcem Prima Voľba
-            </Button>
-          }
-        >
-          <p className="h2 normal mb-none">
-            5 <span className="h5 normal">&euro;</span>
-          </p>
-          <p className="text-secondary small mb-none">Bez viazanosti</p>
-        </ModalProductFooter>
-      </>
-    )}
-    hasStickyFooter={true}
-    actions={[
-      <Button key="1" type="primary" data-a11y-dialog-hide={true}>
-        Potvrdiť
-      </Button>,
-      <Button key="2" data-a11y-dialog-hide={true}>
-        Zatvoriť
-      </Button>,
-    ]}
-  >
-    <p className="bold">Hovory, SMS a dáta za kredit úplne bez záväzkov</p>
-    <p className="mb-large">
-      Prima Voľba je dobíjacia karta od Orangeu. S kartou môžete volať,
-      SMS-kovaťa dátovať výhodne za kredit absolútne bez viazanosti.
-    </p>
-    <h3 className="h4">S kartou Prima Voľba za 5 € získate:</h3>
-    <Accordion lastItemNoBottomBorder className="mb-none">
-      <AccordionItem
-        title="Dáta v sieti 5G"
-        id="data_5g"
-        isActive
-        renderTitle={(title) => (
-          <Bar tag="span" className="accordion__title mb-none" space="small">
-            <BarItem tag="span">
-              <Pictogram
-                name="pictogram-device-discount"
-                size="xxlarge"
-                alt="Ikona zľava na zariadenie"
-              />
-            </BarItem>
-            <BarItem isFilling tag="span">
-              <h4 className="h5">{title}</h4>
-            </BarItem>
-          </Bar>
-        )}
-      >
-        <p>
-          Po prvom dobití kreditu vo výške aspoň 7 € si najneskôr 31 dní od
-          zaregistrovania karty aktivujte úvodných 10 GB na 30 dní cez aplikáciu
-          Môj Orange alebo zaslaním SMS na číslo 445 v tvare „BEN10GB A“.
-        </p>
-        <p>
-          Následne si raz za mesiac dobite kredit aspoň 7 € a my vám za odmenu
-          aktivujeme ďalších 10 GB na 30 dní. Benefit 10 GB môžete čerpať
-          najviac 3x. Z objemu 10 GB môžete čerpať 6,25 GB bez príplatku v
-          EÚ/Zóne 1. Ďalšie dáta získate jednoducho - vyberte si z doplnkových
-          dátových balíkov.
-        </p>
-      </AccordionItem>
-      <AccordionItem
-        title="Nekonečné hovory na 30 dní zadara"
-        id="nekonecnehovory"
-        renderTitle={(title) => (
-          <Bar tag="span" className="accordion__title mb-none" space="small">
-            <BarItem tag="span">
-              <Pictogram
-                name="pictogram-infinite-sms"
-                size="xxlarge"
-                alt="Ikona zľava na zariadenie"
-              />
-            </BarItem>
-            <BarItem isFilling tag="span">
-              <h4 className="h5">{title}</h4>
-            </BarItem>
-          </Bar>
-        )}
-      >
-        <p>
-          Po prvom dobití kreditu vo výške aspoň 7 € si aktivujte Nekonečné
-          hovory na 3 Orange čísla na 3 mesiace zadarmo najneskôr 31 dní od
-          zaregistrovania karty v aplikácii Môj Orange alebo zaslaním SMS na
-          číslo 445 v tvaroch VOLAM1 09xxxxxxxx, VOLAM2 09xxxxxxxx, VOLAM3
-          09xxxxxxxx.
-        </p>
-        <p>
-          Dané mobilné čísla musia byť v sieti Orange. Zmena čísla je možná raz
-          za 30 dní.
-        </p>
-      </AccordionItem>
-      <AccordionItem
-        title="Kredit Prima Voľba"
-        id="credit_primavolba"
-        renderTitle={(title) => (
-          <Bar tag="span" className="accordion__title mb-none" space="small">
-            <BarItem tag="span">
-              <Pictogram
-                name="pictogram-trust"
-                size="xxlarge"
-                alt="Ikona zľava na zariadenie"
-              />
-            </BarItem>
-            <BarItem isFilling tag="span">
-              <h4 className="h5">{title}</h4>
-            </BarItem>
-          </Bar>
-        )}
-      >
-        <p>
-          <Link href="#" className="underline">
-            Kredit si dobíjate jednoducho
-          </Link>{" "}
-          a platí 6 mesiacov.
-        </p>
-        <p>
-          <b>Využiť ho môžete na:</b>
-        </p>
-        <ul className="list-circle">
-          <li>Volanie v SR aj v EÚ za 0,1025 €/min.</li>
-          <li>SMS/MMS za 0,1025 € v SR a za 0,0738 € v EÚ</li>
-          <li>Aktiváciu doplnkových balíkov</li>
-        </ul>
-        <Link href="#" className="underline">
-          Podrobný cenník služieb
-        </Link>
-      </AccordionItem>
-    </Accordion>
-  </Modal>
-);
-
-export const ProductCard = (product) => (
-  <Card>
-    <CardSection>
-      <h3 className="h3 mb-large">{product.title}</h3>
-      {product.price}
-      <p className="mb-large text-secondary">{product.description}</p>
-      <Button
-        type="primary"
-        size="large"
-        className="mb-none"
-        data-a11y-dialog-show="modal-product"
-      >
-        {product.cta}
-      </Button>
-    </CardSection>
-    <Divider />
-    <CardSection>
-      <Expander summary="Obsahuje" isFullWidth open>
-        <ul className="list-disc pl-medium list-unstyled">
-          {product.includes.map((item, index) => (
-            <li key={index} className="mb-small">
-              {item}
-            </li>
-          ))}
-        </ul>
-      </Expander>
-    </CardSection>
-  </Card>
-);
-
-export const Signpost = () => (
-  <Section spacing="default" color="background-secondary">
-    <Grid rowGapSize="large">
-      <GridCol size={{ xs: 12, lg: 4 }}>
-        <h2 className="h2 thin mb-large">
-          {"Vyberte si svoju predplatenú kartu"}
-        </h2>
-      </GridCol>
-      {list.map((product, index) => (
-        <GridCol key={index} size={{ xs: 12, md: 6, lg: 4 }}>
-          <ProductCard {...product} />
-        </GridCol>
-      ))}
-    </Grid>
-  </Section>
-);
-
-<Page>
-  <PageHeadingSimple title="Produkty a služby Prima Voľba" />
-  <ProductModal />
-  <Signpost />
-  <FAQ />
-</Page>