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

package/src/pages/product-page-b2b-microsoft-365.mdx

@@ -1,747 +0,0 @@
----
----
-
-import {
-  Accordion,
-  AccordionItem,
-  AnchorNavigation,
-  Bar,
-  BarItem,
-  BlockAction,
-  BlockActionControl,
-  BlockActionOverride,
-  Breadcrumbs,
-  Button,
-  Buttons,
-  Card,
-  CardSection,
-  Carousel,
-  Controls,
-  Divider,
-  Expander,
-  Field,
-  Grid,
-  GridCol,
-  Icon,
-  IconList,
-  Image,
-  Link,
-  Pagination,
-  Pictogram,
-  Pill,
-  PromoBanner,
-  Section,
-  Tag,
-} 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";
-import { ActionTiles } from "../components/ActionTile";
-
-export const CustomHero = () => (
-  <Section spacing="default">
-    <PromoBanner image="/assets/microsoft-365.png">
-      <h1 className="display-3 thin text-accent">
-        Microsoft 365 <br />
-        <span className="text-default">Copilot</span>
-      </h1>
-      <p className="text-secondary mb-large">
-        75 % používateľov potvrdilo, že sú produktívnejší, keď používajú
-        Copilota
-      </p>
-      <Button type="primary" className="mb-large show-lg" size="large">
-        {"Mám záujem"}
-      </Button>
-      <Image
-        src="/assets/microsoft-partner-do-hero.png"
-        alt="Microsoft 365"
-        className="show-lg"
-      />
-    </PromoBanner>
-  </Section>
-);
-
-export const SimplifyWork = () => (
-  <Section spacing="default" id="microsoft-365-copilot">
-    <PromoBanner image="/assets/microsoft-copilot-logo-large.png">
-      <p className="mb-xsmall">Microsoft Copilot</p>
-      <h2 className="h1 thin mb-medium">
-        {"Zjednodušte si prácu s AI asistentom Microsoft Copilot"}
-      </h2>
-      <p className="text-secondary mb-none">
-        {`Buďte kreatívnejší a produktívnejší s revolučným nástrojom od Microsoftu. Využívajte najmodernejšiu umelú inteligenciu na automatizáciu vašich procesov. Copilot využijete s vašimi obľúbenými aplikáciami Microsoft 365, ako sú Word, Outlook, PowerPoint a Teams.`}
-      </p>
-    </PromoBanner>
-  </Section>
-);
-
-export const Features = () => (
-  <Section spacing="default">
-    <div className="hide-md mb">
-      <Controls
-        icon="chevron-left"
-        data-carousel-controls="carousel-features"
-        data-carousel-action="prev"
-      />
-      <Controls
-        icon="chevron-right"
-        data-carousel-controls="carousel-features"
-        data-carousel-action="next"
-      />
-    </div>
-    <Carousel
-      id="carousel-features"
-      data-swiper-options='{"slidesPerView":1.2,"breakpoints":{"480":{"slidesPerView":1.8},"768":{"slidesPerView":3}}}'
-      items={[
-        <div>
-          <Pill size="xxlarge" className="mb" color="surface-subtle">
-            <Icon name="file-copy" size="large" />
-          </Pill>
-          <h3 className="h3 mb-small">{`Jednoduchá práca s dokumentmi, e-mailami a sprezentáciami`}</h3>
-          <p className="mb-small text-secondary">
-            {`Copilot vám pomôže so všetkým. Od písania e-mailov až po tvorbu pútavých prezentácií. Vďaka pokročilým technológiám AI zvládne Copilot analýzu dát v tabuľkách a tvorbu kreatívneho obsahu.`}
-          </p>
-        </div>,
-        <div>
-          <Pill size="xxlarge" className="mb" color="surface-subtle">
-            <Icon name="email" size="large" />
-          </Pill>
-          <h3 className="h3 mb-small">{`Zjednodušená komunikácia a spolupráca`}</h3>
-          <p className="mb-small text-secondary">
-            {`Copilot vám pomôže s plánovaním schôdzok, zjednoduší e-mailovú komunikáciu a analýzu dát pre lepšie rozhodovanie. To vám prinesie viac času na strategické a inovatívne projekty.`}
-          </p>
-        </div>,
-        <div>
-          <Pill size="xxlarge" className="mb" color="surface-subtle">
-            <Icon name="dashboard-display" size="large" />
-          </Pill>
-          <h3 className="h3 mb-small">{`Personalizovaný zážitok a neustála inovácia`}</h3>
-          <p className="mb-small text-secondary">
-            {`Copilot sa neustále učí a prispôsobuje vašim potrebám. Čím viac ho používate, tým lepšie vám bude rozumieť, a tým relevantnejšiu pomoc vám bude poskytovať.`}
-          </p>
-        </div>,
-      ]}
-      showScrollbar={true}
-      bleedRight
-    />
-  </Section>
-);
-
-export const CTA = () => (
-  <Section className="pt-none pb-none">
-    <PromoBanner variant="vertical">
-      <div>
-        <Image
-          src="/assets/microsoft-copilot-logo-small.png"
-          alt="Microsoft 365 Copilot"
-        />
-        <h2 className="h1 thin">Microsoft Copilot</h2>
-        <p className="align-selft-center mb-large">
-          Získajte zľavu až 15 % pri kúpe 10 a viac licencií (platí do
-          31.12.2024)
-        </p>
-        <Button type="primary" className="mb-none" size="large">
-          {"Chcem Microsoft Copilot"}
-        </Button>
-      </div>
-    </PromoBanner>
-  </Section>
-);
-
-export const MoreFeatures = () => (
-  <>
-    <Section spacing="default" color="background-secondary">
-      <PromoBanner image="/assets/microsoft-365-computer.png">
-        <p className="mb-xsmall">Microsoft 365</p>
-        <h2 className="h1 thin mb-medium">
-          {"Ako vám môže uľahčiť Microsoft 365 podnikanie?"}
-        </h2>
-        <p className="text-secondary mb-none">
-          {`Microsoft 365 je komplexný kancelársky balík v online úložisku (Cloud), vďaka ktorému môžete pracovať odkiaľkoľvek a všetko potrebné tak máte vždy so sebou. Za jeden mesačný poplatok získate kancelársky balík na profesionálne fungovanie svojej firmy, vďaka ktorému zvýšite efektivitu svojej práce.`}
-        </p>
-      </PromoBanner>
-    </Section>
-    <Section spacing="default" color="background-secondary">
-      <div className="hide-md mb">
-        <Controls
-          icon="chevron-left"
-          data-carousel-controls="carousel-more-features"
-          data-carousel-action="prev"
-        />
-        <Controls
-          icon="chevron-right"
-          data-carousel-controls="carousel-more-features"
-          data-carousel-action="next"
-        />
-      </div>
-      <Carousel
-        id="carousel-more-features"
-        data-swiper-options='{"slidesPerView":1.2,"breakpoints":{"480":{"slidesPerView":1.8},"768":{"slidesPerView":3}, "1240":{"slidesPerView":4}}}'
-        items={[
-          <div>
-            <Pill size="xxlarge" className="mb" color="fill-moderate">
-              <Icon name="email" size="large" />
-            </Pill>
-            <h3 className="h3 mb-small">{`E-mail a kalendár`}</h3>
-            <p className="mb-small text-secondary">
-              {`Microsoft 365 vám zabezpečí profesionálny e-mail s kapacitou mailboxu až 50 GB a zdieľané kalendáre pre vašich zamestnancov.`}
-            </p>
-          </div>,
-          <div>
-            <Pill size="xxlarge" className="mb" color="fill-moderate">
-              <Icon name="collective-class-training" size="large" />
-            </Pill>
-            <h3 className="h3 mb-small">{`Tímová spolupráca`}</h3>
-            <p className="mb-small text-secondary">
-              {`Pracujte s viacerými používateľmi naraz cez Teams alebo SharePoint. K tomu získate úložisko až 1 TB na OneDrive pre každého, s kým zdieľate dokumenty.`}
-            </p>
-          </div>,
-          <div>
-            <Pill size="xxlarge" className="mb" color="fill-moderate">
-              <Icon name="briefcase" size="large" />
-            </Pill>
-            <h3 className="h3 mb-small">{`Efektívne podnikanie`}</h3>
-            <p className="mb-small text-secondary">
-              {`Vytvorenie jednoduchého rezervačného systému vďaka Microsoft Bookings a spravovanie zákazníckych kontaktov cez Outlook Customer Manager.`}
-            </p>
-          </div>,
-          <div>
-            <Pill size="xxlarge" className="mb" color="fill-moderate">
-              <Icon name="orange-reflect" size="large" />
-            </Pill>
-            <h3 className="h3 mb-small">{`Viac zariadení`}</h3>
-            <p className="mb-small text-secondary">
-              {`Najnovšie verzie kancelárskych aplikácií budete mať vždy dostupné až na 5 zariadeniach v rámci jednej licencie.`}
-            </p>
-          </div>,
-        ]}
-        showScrollbar={true}
-        bleedRight
-      />
-    </Section>
-  </>
-);
-
-export const PackagesOverview = () => (
-  <Section
-    className="pt-none pb-none"
-    color="background-secondary"
-    id="baliky-microsoft-365"
-  >
-    <PromoBanner variant="vertical">
-      <div>
-        <Image
-          src="/assets/microsoft-copilot-logo-small-v2.png"
-          alt="Microsoft 365 Copilot"
-        />
-        <h2 className="h1 thin">Balíky Microsoft 365</h2>
-        <p className="align-selft-center mb-large">
-          Vyberte si z balíkov Microsoft 365 ten, ktorý najviac vyhovuje vášmu
-          podnikaniu. Pripravili sme pre vás podrobný prehľad balíkov Microsoft
-          365.
-        </p>
-        <p className="mb-large">
-          Cena bez DPH už od <br />
-          <span className="h1 thin">5,42</span>
-          <b> €/mes.</b>
-        </p>
-        <Button type="primary" className="mb-none" size="large">
-          {"Prejsť na prehľad balíkov"}
-        </Button>
-      </div>
-    </PromoBanner>
-  </Section>
-);
-
-export const addons = [
-  {
-    header: {
-      icon: (
-        <Image
-          src="/assets/microsoft-copilot-logo-small.png"
-          alt="Microsoft 365 Copilot"
-          width={60}
-          height={60}
-        />
-      ),
-      background: {
-        color: "background-contrast",
-      },
-    },
-    title: "Microsoft Copilot",
-    description:
-      "Prelomový nástroj umelej inteligencie pre zvýšenie produktivity.",
-    price: <p className="h1 thin mb-none">Ozvite sa</p>,
-    about: (
-      <>
-        <p>
-          Copilot nie je len obyčajný doplnok, ale váš verný partner, ktorý vám
-          pomôže zefektívniť prácu, prebudiť kreativitu a posunúť produktivitu
-          na novú úroveň.
-        </p>
-        <IconList
-          items={[
-            {
-              icon: "tick",
-              content:
-                "Jednoduchá práca s dokumentmi, e-mailami a prezentáciami.",
-            },
-            {
-              icon: "tick",
-              content: "Zjednodušená komunikácia a spolupráca.",
-            },
-            {
-              icon: "tick",
-              content: "Personalizovaný zážitok. ",
-            },
-            {
-              icon: "tick",
-              content: "Bezproblémová integrácia s Microsoft 365.",
-            },
-          ]}
-          className="normal"
-        />
-      </>
-    ),
-  },
-  {
-    header: {
-      icon: (
-        <Image
-          src="/assets/power-bi.svg"
-          alt="Power BI"
-          width={60}
-          height={60}
-        />
-      ),
-      background: {
-        style: {
-          backgroundColor: "#B5E8F7",
-        },
-      },
-    },
-    title: "Power BI",
-    description: "Používateľská licencia",
-    price: (
-      <p>
-        Cena bez DPH od
-        <br />
-        <span className="h1 thin">10,00</span>
-        <b> €/mes.</b>
-      </p>
-    ),
-    about: (
-      <IconList
-        items={[
-          {
-            icon: "tick",
-            content:
-              "Zdieľajte informácie, ktoré pomáhajú každému robiť rozhodnutia na základe faktov, nie na základe inštinktu.",
-          },
-          {
-            icon: "tick",
-            content:
-              "Distribuujte poznatky všetkým členom tímu, vnútri aj mimo svojej organizácie a podľa potreby udeľujte oprávnenia na úpravy.",
-          },
-          {
-            icon: "tick",
-            content:
-              "Pristupujte k vizualizáciám kdekoľvek, aj na cestách, vďaka aplikácii Power BI Mobile.",
-          },
-          {
-            icon: "tick",
-            content:
-              "Zlepšujte spoluprácu pomocou tímových komentárov a buďte stále v spojení so svojimi odbermi a ich aktualizáciami.",
-          },
-        ]}
-        className="normal"
-      />
-    ),
-  },
-  {
-    header: {
-      icon: (
-        <Image
-          src="/assets/microsoft-project.svg"
-          alt="Microsoft Project"
-          width={60}
-          height={60}
-        />
-      ),
-      background: {
-        color: "fill-accent4",
-      },
-    },
-    title: "Microsoft Project",
-    description: "Aplikácia na plánovanie projektov v reálnom čase",
-    price: (
-      <p>
-        Cena bez DPH od
-        <br />
-        <span className="h1 thin">8,00</span>
-        <b> €/mes.</b>
-      </p>
-    ),
-    about: (
-      <IconList
-        items={[
-          {
-            icon: "tick",
-            content:
-              "Jednoducho plánujte svoje projekty vďaka dynamickému plánovaniu, ktoré zohľadňuje vynaložené úsilie, trvanie projektu a priradených členov tímu.",
-          },
-          {
-            icon: "tick",
-            content:
-              "Vytvorte interaktívne tabule a pozrite si celkový stav alebo si prejdite detaily projektov aj pomocou vizualizácie v aplikácii Power BI.",
-          },
-          {
-            icon: "tick",
-            content:
-              "S flexibilnou a bezpečnou platformou vytvoríte počítačové/mobilné prostredie, aké vám a vášmu tímu vyhovuje pre lepšiu automatizáciu práce. Platforma je založená na službe Azure (najdôveryhodnejší podnikový Cloud na svete).",
-          },
-        ]}
-        className="normal"
-      />
-    ),
-  },
-  {
-    header: {
-      icon: (
-        <Image src="/assets/visio.svg" alt="Visio" width={60} height={60} />
-      ),
-      background: {
-        color: "fill-accent2",
-      },
-    },
-    title: "Visio",
-    description:
-      "Pokročilý program na prípravu diagramov a grafických zobrazení",
-    price: (
-      <p>
-        Cena bez DPH od
-        <br />
-        <span className="h1 thin">5,00</span>
-        <b> €/mes.</b>
-      </p>
-    ),
-    about: (
-      <IconList
-        items={[
-          {
-            icon: "tick",
-            content:
-              "Jednoducho a intuitívne kreslite vývojové diagramy, organizačné schémy, pôdorysy, technické návrhy a ďalšie projekty. Používajte moderné tvary a šablóny so známymi funkciami balíka Microsoft 365.",
-          },
-          {
-            icon: "tick",
-            content:
-              "Prepojte diagramy s údajmi v reálnom čase. Vďaka použitému formátovaniu tvarov sa vývojové diagramy po zmene základných údajov automaticky aktualizujú.",
-          },
-          {
-            icon: "tick",
-            content:
-              "Spolupracujte na vývojových diagramoch Visia odkiaľkoľvek s rôznymi účastníkmi projektu.",
-          },
-        ]}
-        className="normal"
-      />
-    ),
-  },
-  {
-    header: {
-      icon: (
-        <Image
-          src="/assets/sharepoint.svg"
-          alt="SharePoint"
-          width={60}
-          height={60}
-        />
-      ),
-      background: {
-        color: "fill-accent3",
-      },
-    },
-    title: "SharePoint",
-    description: "Aplikácia na centralizované schvaľovanie žiadostí",
-    price: (
-      <p>
-        Obsiahnuté od balíka
-        <br />
-        <span className="h1 thin">Basic</span>
-      </p>
-    ),
-    about: (
-      <IconList
-        items={[
-          {
-            icon: "tick",
-            content:
-              "Už nemusíte závisieť od externých dodávateľov systémov evidencie a schvaľovania žiadostí.",
-          },
-          {
-            icon: "tick",
-            content:
-              "Ide najmä o Fleet vozidlá, prenájom prezentačných nástrojov, rezerváciu priestorov…",
-          },
-          {
-            icon: "tick",
-            content:
-              "Túto aplikáciu využívame aj my v Orangei na interné schvaľovanie.",
-          },
-        ]}
-        className="normal"
-      />
-    ),
-  },
-  {
-    header: {
-      icon: (
-        <Image
-          src="/assets/bookings.svg"
-          alt="Bookings"
-          width={60}
-          height={60}
-        />
-      ),
-      background: {
-        style: {
-          backgroundColor: "#BAEBD6",
-        },
-      },
-    },
-    title: "Bookings",
-    description: "Aplikácia na manažment stretnutí a termínov",
-    price: (
-      <p>
-        Obsiahnuté od balíka
-        <br />
-        <span className="h1 thin">Basic</span>
-      </p>
-    ),
-    about: (
-      <IconList
-        items={[
-          {
-            icon: "tick",
-            content:
-              "Ušetrite čas vďaka prehľadnému kalendáru dostupnosti pobočiek a pracovníkov, ktorý je spojený s rezervačným systémom.",
-          },
-          {
-            icon: "tick",
-            content:
-              "Ideálna aplikácia pre podniky, ktoré využívajú rezervačný systém od tretej strany.",
-          },
-        ]}
-        className="normal"
-      />
-    ),
-  },
-  {
-    header: {
-      icon: (
-        <Image
-          src="/assets/microsoft-teams.svg"
-          alt="Microsoft Teams"
-          width={60}
-          height={60}
-        />
-      ),
-      background: {
-        style: {
-          backgroundColor: "#F9B000",
-        },
-      },
-    },
-    title: "Microsoft Teams",
-    description:
-      "Najmodernejší videokonferencný nástroj a integrácie Microsoft 365 v jednom.",
-    price: (
-      <p>
-        Obsiahnuté od balíka
-        <br />
-        <span className="h1 thin">Basic</span>
-      </p>
-    ),
-    about: (
-      <IconList
-        items={[
-          {
-            icon: "tick",
-            content:
-              "Editujte dokumenty s viacerými používateľmi v reálnom čase.",
-          },
-          {
-            icon: "tick",
-            content: "Možnosť pridávania komentárov a vnorených odpovedí.",
-          },
-        ]}
-        className="normal"
-      />
-    ),
-  },
-];
-
-export const AddonCard = (addon) => (
-  <Card>
-    <CardSection {...addon.header.background}>{addon.header.icon}</CardSection>
-    <CardSection>
-      <h3>{addon.title}</h3>
-      <p>{addon.description}</p>
-    </CardSection>
-    <CardSection>{addon.price}</CardSection>
-    <Divider />
-    <CardSection>
-      <Expander summary="Popis" isFullWidth open>
-        <div className="text-secondary">{addon.about}</div>
-      </Expander>
-    </CardSection>
-  </Card>
-);
-
-export const Packages = () => (
-  <Section spacing="default" color="background-secondary" id="doplnkove-sluzby">
-    <Grid className="mb-large" rowGapSize="medium">
-      <GridCol size={{ xs: 12, lg: 10 }}>
-        <h2 className="h2 thin mb-none">
-          {"Doplnkové služby k balíku Microsoft 365"}
-        </h2>
-      </GridCol>
-      <GridCol size={{ xs: 12, lg: 2 }} className="align-lg-right">
-        <Controls
-          icon="chevron-left"
-          data-carousel-controls="carousel-addons"
-          data-carousel-action="prev"
-        />
-        <Controls
-          icon="chevron-right"
-          data-carousel-controls="carousel-addons"
-          data-carousel-action="next"
-        />
-      </GridCol>
-    </Grid>
-    <Carousel
-      id="carousel-addons"
-      data-swiper-options='{"slidesPerView":1.1,"breakpoints":{"768":{"slidesPerView":1.5},"1240":{"slidesPerView":3}}}'
-      items={addons.map((addon, addonIndex) => (
-        <AddonCard key={addonIndex} {...addon} />
-      ))}
-      showScrollbar={true}
-      bleedRight
-    />
-  </Section>
-);
-
-export const Form = () => (
-  <Section spacing="default" color="background-secondary" id="zavolajte-mi">
-    <div className="d-flex flex-column align-items-center align-center mb-large">
-      <h2 className="h2 thin">Máte záujem o službu Microsoft 365?</h2>
-      <p>
-        Zanechajte nám vaše kontaktné údaje a my sa vám obratom ozveme. Náš
-        obchodný zástupca vám pomôže nájsť ideálne riešenie.
-      </p>
-    </div>
-    <Grid className="justify-content-center">
-      <GridCol size={{ xs: 12, sm: 10, md: 7, lg: 5 }}>
-        <form action="#">
-          <Field
-            control={{
-              control: {
-                type: "text",
-                className: "text-input--fullwidth",
-              },
-              type: "group",
-            }}
-            label="Meno a Priezvisko"
-            isFullwidth
-          />
-          <Field
-            control={{
-              control: {
-                type: "text",
-                className: "text-input--fullwidth",
-              },
-              type: "group",
-            }}
-            label="Telefonne cislo"
-          />
-          <Field
-            control={{
-              control: {
-                type: "text",
-                className: "text-input--fullwidth",
-              },
-              type: "group",
-            }}
-            label="Nazov spolocnosti alebo ICO"
-          />
-          <Field
-            control={{
-              control: {
-                type: "text",
-                className: "text-input--fullwidth",
-              },
-              type: "group",
-            }}
-            label="Obec vasho posobenia"
-          />
-          <Field
-            control={{
-              type: "checkbox",
-            }}
-            label="Súhlasím so spracovaním osobných údajov na marketingové účely. (súhlas je povinný) viac info"
-            className="mb-large"
-          />
-          <Button type="primary" htmlType="submit" className="fullwidth">
-            {"Zavolajte mi"}
-          </Button>
-        </form>
-      </GridCol>
-    </Grid>
-  </Section>
-);
-
-<Page isDark>
-  <CustomHero />
-  <AnchorNavigation
-    items={[
-      {
-        href: "#microsoft-365-copilot",
-        isActive: true,
-        label: "Microsoft 365 Copilot",
-      },
-      {
-        href: "#baliky-microsoft-365",
-        label: "Balíky Microsoft 365",
-      },
-      {
-        href: "#doplnkove-sluzby",
-        label: "Doplnkové služby",
-      },
-      {
-        href: "#zavolajte-mi",
-        label: "Zavolajte mi",
-      },
-      {
-        href: "#najcastejsie-otazky",
-        label: "Najčastejšie otázky",
-      },
-    ]}
-  >
-    <Button type="primary" className="mb-none show-lg">
-      {"Mám záujem"}
-    </Button>
-  </AnchorNavigation>
-  <SimplifyWork />
-  <Features />
-  <CTA />
-  <MoreFeatures />
-  <PackagesOverview />
-  <Packages />
-  <Form />
-  <FAQ />
-</Page>