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

package/src/pages/roaming-b2c.mdx

@@ -1,549 +0,0 @@
----
-disableThemeSwitcher: true
----
-
-import {
-  Accordion,
-  AccordionItem,
-  Alert,
-  AnchorNavigation,
-  Bar,
-  BarBreak,
-  BarItem,
-  BlockAction,
-  BlockActionControl,
-  Breadcrumbs,
-  Button,
-  Buttons,
-  Card,
-  CardSection,
-  Carousel,
-  Container,
-  Controls,
-  Cover,
-  Divider,
-  Expander,
-  Field,
-  Grid,
-  GridCol,
-  Group,
-  Icon,
-  IconList,
-  Image,
-  Pagination,
-  Pictogram,
-  Pill,
-  PromoBanner,
-  Section,
-  Select,
-  Table,
-  Tag,
-} from "@orangesk/orange-design-system";
-import Page from "../layouts/DefaultPage";
-import { PageHeadingSimple } from "../components/PageHeading";
-import { FAQ } from "../components/FAQ";
-import { ActionTile, ActionTiles } from "../components/ActionTile";
-
-export const countries = [
-  "Rakúsko",
-  "Česká republika",
-  "Maďarsko",
-  "Švajčiarsko",
-  "Spojené arabské emiráty",
-  "Egypt",
-];
-
-export const prices = [
-  {
-    icon: "call",
-    title: "Volania",
-    price: "4,0417",
-    priceType: "€/min.",
-    description: "Prichádzajúce za 0,9744 €/min. Bez DPH",
-    tag: "Odchádzajuce",
-  },
-  {
-    icon: "data-traffic",
-    title: "Dáta",
-    price: "10,1661",
-    priceType: "€/MB",
-    description: "Za každý spotrebovaný megabyte",
-  },
-  {
-    icon: "orange-messenger",
-    title: "SMS/MMS správy",
-    price: "0,4460",
-    priceType: "€/správa",
-    description: "Za každú odoslanú správu",
-  },
-];
-
-export const zones = [
-  {
-    title: (
-      <>
-        Do{" "}
-        <a href="#" className="underline">
-          Zóny 1
-        </a>
-      </>
-    ),
-    price: "4,0417",
-    priceType: "€/min.",
-  },
-  {
-    title: (
-      <>
-        Do Zóny{" "}
-        <a href="#" className="underline">
-          Švajčiarsko
-        </a>
-      </>
-    ),
-    price: "4,0417",
-    priceType: "€/min.",
-  },
-  {
-    title: (
-      <>
-        Do{" "}
-        <a href="#" className="underline">
-          Zóny 2
-        </a>
-      </>
-    ),
-    price: "4,0417",
-    priceType: "€/min.",
-  },
-  {
-    title: (
-      <>
-        Do{" "}
-        <a href="#" className="underline">
-          Zóny 3
-        </a>
-      </>
-    ),
-    price: "4,0417",
-    priceType: "€/min.",
-  },
-  {
-    title: (
-      <>
-        Do{" "}
-        <a href="#" className="underline">
-          Zóny 4
-        </a>
-      </>
-    ),
-    price: "4,0417",
-    priceType: "€/min.",
-  },
-];
-
-export const cards = [
-  {
-    title: "Svetové dáta na deň",
-    description:
-      "Vhodné na krátky výlet alebo len základné použitie: 500+ emailov bez príloh alebo 100 minút navigácie",
-    price: "5,00",
-    primaryBtn: "Aktivovať",
-    secondaryBtn: "Podrobné informácie",
-    oBaliku: [
-      "Platí vo vybraných krajinách sveta - Zóna Svet",
-      "Platí 7 dní (od začiatku aktívneho využívania dát)",
-    ],
-    aktivacia: [
-      "aktivácia cez SMS v tvare „ANO SVET 1GB“ na číslo 950",
-      "deaktivácia cez SMS v tvare „ANO SVET 1GB“ na číslo 950",
-    ],
-  },
-  {
-    title: "Svetové dáta 4 GB",
-    description:
-      "Ideálne na krátku dovolenku: denne trochu mapy, sociálne siete, maily a fotky",
-    price: "10,00",
-    primaryBtn: "Aktivovať",
-    secondaryBtn: "Podrobné informácie",
-    oBaliku: [
-      "Platí vo vybraných krajinách sveta - Zóna Svet",
-      "Platí 7 dní (od začiatku aktívneho využívania dát)",
-    ],
-    aktivacia: [
-      "aktivácia cez SMS v tvare „ANO SVET 1GB“ na číslo 950",
-      "deaktivácia cez SMS v tvare „ANO SVET 1GB“ na číslo 950",
-    ],
-  },
-  {
-    title: "Svetové dáta 10 GB",
-    description:
-      "Vhodné na dlhšiu dovolenku alebo intenzívnejšie používanie: môžeš streamovať, zdieľať fotky, pozerať videá",
-    price: "20,00",
-    primaryBtn: "Aktivovať",
-    secondaryBtn: "Podrobné informácie",
-    oBaliku: [
-      "Platí vo vybraných krajinách sveta - Zóna Svet",
-      "Platí 7 dní (od začiatku aktívneho využívania dát)",
-    ],
-    aktivacia: [
-      "aktivácia cez SMS v tvare „ANO SVET 1GB“ na číslo 950",
-      "deaktivácia cez SMS v tvare „ANO SVET 1GB“ na číslo 950",
-    ],
-  },
-];
-
-export const ProductCard = ({ card }) => (
-  <Card className="mb-none">
-    <CardSection>
-      <h3 className="h3">{card.title}</h3>
-      <p>{card.description}</p>
-      <p className="h1 normal mb-large">
-        {card.price}
-        <span className="large bold"> &euro;</span>
-      </p>
-      <Button type="primary">{card.primaryBtn}</Button>
-      <Button>{card.secondaryBtn}</Button>
-    </CardSection>
-    <Divider />
-    <CardSection>
-      <Expander summary="O balíku" isFullWidth open>
-        <IconList
-          items={card.oBaliku.map((item) => ({
-            icon: "tick",
-            content: item,
-          }))}
-          className="normal"
-        />
-      </Expander>
-      <Expander summary="Aktivácia" isFullWidth open>
-        <IconList
-          items={card.aktivacia.map((item) => ({
-            icon: "tick",
-            content: item,
-          }))}
-          className="normal"
-        />
-      </Expander>
-    </CardSection>
-  </Card>
-);
-
-export const SearchSection = () => (
-  <Section color="surface-subtle" spacing="default">
-    <h2 className="h2 thin mb mb-md-large text-narrow">
-      Vyhľadajte krajinu a spoznajte ceny roamingu
-    </h2>
-    <Group
-      addonSuffix={
-        <Button type="primary" key="1">
-          Hľadať
-        </Button>
-      }
-      control={{ type: "text", id: "group-2", placeholder: "Kam cestujete?" }}
-      className="mb mb-md-large"
-    />
-    <Bar className="mb-large mb-md-xlarge">
-      <BarItem>Najhľadanejšie krajiny</BarItem>
-      <BarItem canShrink tag="nav">
-        <Bar
-          space="small"
-          canWrap={false}
-          className="horizontal-scroll mb-none"
-          align="center"
-          role="list"
-          aria-label="Najhľadanejšie krajiny"
-        >
-          {countries.map((country, countryIndex) => (
-            <BarItem
-              key={countryIndex}
-              className="mb mb-md-none"
-              role="listitem"
-            >
-              <Tag
-                color="transparent"
-                tabIndex={0}
-                aria-label={`Vyhľadať roaming pre ${country}`}
-                onClick={() => {}}
-              >
-                {country}
-              </Tag>
-            </BarItem>
-          ))}
-        </Bar>
-      </BarItem>
-    </Bar>
-    <Bar className="mb mb-md-large">
-      <BarItem>
-        <Image src="/assets/uae.svg" />
-      </BarItem>
-      <BarItem canShrink>
-        <h3 className="h3 mb-xsmall">
-          Spojené arabské emiráty (+ ostrov Marawah)
-        </h3>
-        <p className="h3 thin">(+971)</p>
-      </BarItem>
-    </Bar>
-    <Grid rowGapSize="medium" className="mb-large mb-md-xlarge">
-      <GridCol size={{ xs: 12, md: 6 }}>
-        <Field
-          control={{
-            type: "select",
-            width: "fullwidth",
-            options: ["Paušály", "Internet"],
-          }}
-          label="Váš typ paušálu"
-        />
-      </GridCol>
-      <GridCol size={{ xs: 12, md: 6 }}>
-        <Field
-          control={{
-            type: "select",
-            width: "fullwidth",
-            options: ["Go Safe Premium", "Internet"],
-          }}
-          label="Váš program"
-        />
-      </GridCol>
-    </Grid>
-    <p className="bold small mb-small">Ceny pre váš paušál</p>
-    <Grid rowGapSize="medium" className="mb-large mb-md-xlarge">
-      {prices.map((card, cardIndex) => (
-        <GridCol key={cardIndex} size={{ xs: 12, md: 6, lg: 4 }}>
-          <Card>
-            <CardSection>
-              <Bar space="small">
-                <BarItem>
-                  <Icon name={card.icon} size="large" />
-                </BarItem>
-                <BarItem className="h4" isFilling>
-                  {card.title}
-                </BarItem>
-              </Bar>
-              <p className="bold h4">
-                {card.price}{" "}
-                <span className="normal reset-font-size">{card.priceType}</span>{" "}
-                {card.tag ? <Tag size="small">{card.tag}</Tag> : null}
-              </p>
-              <p className="small">{card.description}</p>
-            </CardSection>
-          </Card>
-        </GridCol>
-      ))}
-    </Grid>
-    <Alert
-      isFullWidth
-      title="Vyhnite sa nechceným poplatkom v Grécku"
-      description="Ak cestujete na grécke ostrovy, odporúčame, aby ste si nastavili manuálnu voľbu gréckej siete namiesto automatickej. Až po pripojení si zapnite dátový roaming. Vyhnete sa tak nechcenému pripojeniu do siete napr. tureckého operátora, ktorý nie je v EÚ a následným zvýšeným poplatkom."
-      className="mb-large mb-md-xlarge"
-    />
-    <Accordion className="mb-large mb-md-xlarge">
-      <AccordionItem
-        title="Detailné ceny roamingových hovorov"
-        id="detailne-ceny"
-      >
-        <Grid>
-          {zones.map((zone, zoneIndex) => (
-            <GridCol key={zoneIndex} size={{ xs: 12, md: 4, lg: "auto" }}>
-              <Bar space="small" className="mb-none">
-                <BarItem className="bold">{zone.title}</BarItem>
-                <BarBreak className="show-md" />
-                <BarItem isFilling className="align-right align-md-left">
-                  <p className="bold">
-                    {zone.price}{" "}
-                    <span className="normal small">{zone.priceType}</span>{" "}
-                  </p>
-                </BarItem>
-              </Bar>
-            </GridCol>
-          ))}
-        </Grid>
-      </AccordionItem>
-      <AccordionItem
-        title="Dostupnosť služieb u roamingových partnerov"
-        id="dostupnost-sluzieb"
-      >
-        <Table
-          headers={[
-            {
-              key: "col1",
-              label: "Operátor",
-            },
-            {
-              key: "col2",
-              label: "Volania a dáta",
-            },
-            {
-              key: "col3",
-              label: "Volania cez VoLTE",
-            },
-            {
-              key: "col4",
-              label: "MMS Správy",
-            },
-          ]}
-          rows={[
-            {
-              col1: {
-                value: <b>Emirates Integrated Telecommunications Company</b>,
-              },
-              col2: "3G, GPRS, CAMEL, 4G/LTE, 5G NSA",
-              col3: "Nie",
-              col4: "Áno",
-            },
-            {
-              col1: {
-                value: <b>Emirates Telecom Corp-ETISALAT</b>,
-              },
-              col2: "3G, GPRS, 4G/LTE, 5G NSA",
-              col3: "Nie",
-              col4: "Áno",
-            },
-          ]}
-          isScrollable
-        />
-      </AccordionItem>
-    </Accordion>
-    <h2 className="h2 thin mb mb-md-large text-narrow">
-      Vyberte si roamingový balík pre vašu destináciu a ušetrite.
-    </h2>
-    <div className="mb hide-lg">
-      <Controls
-        icon="chevron-left"
-        data-carousel-controls="carousel-blog-posts"
-        data-carousel-action="prev"
-      />
-      <Controls
-        icon="chevron-right"
-        data-carousel-controls="carousel-blog-posts"
-        data-carousel-action="next"
-      />
-    </div>
-    <Carousel
-      id="carousel-blog-posts"
-      className="mb mb-md-large"
-      data-swiper-options='{"slidesPerView":1.1,"breakpoints":{"768":{"slidesPerView":1.6}, "1024":{"slidesPerView":3}}}'
-      items={cards.map((card, cardIndex) => (
-        <div key={cardIndex}>
-          <ProductCard card={card} />
-        </div>
-      ))}
-      showScrollbar={true}
-      bleedRight
-    />
-  </Section>
-);
-
-export const OutsideSlovakia = () => (
-  <Section className="pt-none pb-none">
-    <PromoBanner image="/assets/predvolba.png" alignImage="bottom">
-      <h2 className="h1 thin mb-medium">
-        {"Plánujete volať a posielať správy zo Slovenska do zahraničia?"}
-      </h2>
-      <p className="mb-large text-secondary">
-        {`Pozrite si ceny volaní a správ do zahraničia. Stačí si vybrať cieľovú krajinu a spoznáte konkrétne ceny pre váš paušál.`}
-      </p>
-      <Button type="primary" size="large" className="mb-none">
-        {"Spoznať ceny"}
-      </Button>
-    </PromoBanner>
-  </Section>
-);
-
-export const VoLTE = () => (
-  <Section
-    className="pt-none pb-none is-light"
-    style={{ backgroundColor: "#D9DAC6" }}
-  >
-    <PromoBanner image="/assets/volte.png" alignImage="bottom">
-      <h2 className="display-3 thin mb-medium">
-        {"Využívajte službu VoLTE aj v roamingu"}
-      </h2>
-      <p className="mb-large">
-        {`VoLTE (Voice over LTE) je služba, ktorá umožňuje uskutočňovať a prijímať hovory prostredníctvom siete 4G. Zistite, ako môžete túto službu využívať aj v zahraničí a či je s ňou váš mobilný telefón kompatibilný.`}
-      </p>
-      <Button type="primary" size="large" className="mb-none">
-        {"Viac o roamingu VoLTE"}
-      </Button>
-    </PromoBanner>
-  </Section>
-);
-
-export const Recommended = () => {
-  return (
-    <ActionTiles
-      tiles={[
-        "Roamingové doplnkové balíky",
-        "Roamingové zóny",
-        "Regulovaný roaming v EÚ",
-      ]}
-    />
-  );
-};
-
-export const Videos = () => (
-  <Section spacing="default">
-    <h2 className="thin h2 mb mb-md-large">Užitočné rady pre cestovateľov</h2>
-    <Grid rowGapSize="medium">
-      <GridCol size={{ xs: 12, md: 6 }}>
-        <iframe
-          src="https://www.youtube.com/embed/LwyptXNIkTo"
-          title="video-0"
-          frameBorder="0"
-          allowFullScreen
-          className="aspect-ratio-16-9"
-        />
-      </GridCol>
-      <GridCol size={{ xs: 12, md: 6 }}>
-        <iframe
-          src="https://www.youtube.com/embed/LwyptXNIkTo"
-          title="video-0"
-          frameBorder="0"
-          allowFullScreen
-          className="aspect-ratio-16-9"
-        />
-      </GridCol>
-    </Grid>
-  </Section>
-);
-
-export const RoamingB2C = () => (
-  <>
-    <PageHeadingSimple title="Roaming">
-      <p>
-        {`Pozrite si ceny, za ktoré môžete volať, dátovať či posielať správy v
-      zahraničí.`}
-      </p>
-    </PageHeadingSimple>
-    <AnchorNavigation
-      items={[
-        {
-          href: "#kam-cestujete",
-          isActive: true,
-          label: "Kam cestujete?",
-        },
-        {
-          href: "#dalsie-benefity",
-          label: "Dalšie benefity",
-        },
-        {
-          href: "#ako-ziskat",
-          label: "Ako získať",
-        },
-        {
-          href: "#podmienky",
-          label: "Podmienky",
-        },
-      ]}
-    />
-    <SearchSection />
-    <OutsideSlovakia />
-    <VoLTE />
-    <Recommended />
-    <Videos />
-    <FAQ />
-  </>
-);
-
-<Page>
-  <RoamingB2C />
-</Page>

package/src/pages/signpost-insurance.mdx

@@ -1,126 +0,0 @@
----
----
-
-import {
-  Breadcrumbs,
-  Section,
-  GridCol,
-  Grid,
-  Pagination,
-  Card,
-  CardSection,
-  Pill,
-  Pictogram,
-  Divider,
-  Expander,
-  Icon,
-  Accordion,
-  AccordionItem,
-  Bar,
-  BarItem,
-  BlockAction,
-  BlockActionControl,
-  Container,
-  Cover,
-  Button,
-  Carousel,
-  Image,
-  PromoBanner,
-} from "@orangesk/orange-design-system";
-import Page from "../layouts/DefaultPage";
-import { PageHeadingSimple } from "../components/PageHeading";
-import { ActionTile, ActionTiles } from "../components/ActionTile";
-
-export const ProductsAndServices = () => {
-  const list = [
-    {
-      title: "Poistenie telefónov a iných zariadení",
-      description:
-        "Poistite si vaše mobilné zariadenia proti krádeži, poškodeniu a iným nehodám.",
-      image: "/assets/rozcestnik-poistenie--telefonov.png",
-    },
-    {
-      title: "Cestovné poistenie",
-      description:
-        "Cestuje po svete bez starostí s výhodným poistením od Orangeu.",
-      image: "/assets/rozcestnik-poistenie--cestovne-poistenie.png",
-    },
-    {
-      title: "Poistenie úrazov",
-      description:
-        "Vyberte si u nás úrazové poistenie za výhodnú cenu pre zákazníkov Orange.",
-      image: "/assets/rozcestnik-poistenie--poistenie-urazov.png",
-    },
-    {
-      title: "Poistenie faktúr",
-      description:
-        "Neohrozte váš rodinný rozpočet a poistite sa pre prípad straty zamestnania, pracovnej neschopnosti a invalidity.",
-      image: "/assets/rozcestnik-poistenie--poistenie-faktur.png",
-    },
-  ];
-  return (
-    <Section color="surface-subtle">
-      <Grid>
-        <GridCol
-          size={{
-            sm: 8,
-            lg: 6,
-          }}
-        >
-          <h2 className="h2 thin mb-large mb-md-xlarge">
-            {"Poistenie pre každý prípad"}
-          </h2>
-        </GridCol>
-      </Grid>
-      <Grid justifyHeight rowGapSize="medium">
-        {list.map((item) => (
-          <GridCol
-            key={item.title}
-            size={{
-              md: 6,
-              lg: 4,
-            }}
-          >
-            <BlockAction>
-              <Card href={item.href} className="mb-none">
-                <Image src={item.image} alt={item.title} />
-                <CardSection isFilling>
-                  <h3>
-                    <BlockActionControl>
-                      <a href="#" className="h3">
-                        {item.title}
-                      </a>
-                    </BlockActionControl>
-                  </h3>
-                  <p>{item.description}</p>
-                </CardSection>
-              </Card>
-            </BlockAction>
-          </GridCol>
-        ))}
-      </Grid>
-    </Section>
-  );
-};
-
-export const Suggestions = () => {
-  return (
-    <ActionTiles
-      title="Poistenie vybavíte"
-      tiles={["Online", "Na predajni", "Na zákaznícka linke 905"]}
-    />
-  );
-};
-
-export const list = [
-  { icon: "street", title: "Zľava až do 225 € na telefón k paušálu" },
-  { icon: "film", title: "Bezpečné doručenie na druhý pracovný deň" },
-  { icon: "startover", title: "Možnosť bezplatného doručenia do predajne" },
-  { icon: "startover", title: "Vrátenie tovaru bez dôvodu až do 14 dní" },
-];
-
-<Page>
-  <PageHeadingSimple title="Poistenie od Orangeu" />
-  <ProductsAndServices />
-  <Suggestions />
-</Page>