Offer box for education programs
The detail page of the education program has a few use cases of the offer box. The first case has a variant for users without login (another body text) and for another one for B2C. The second case is before the student starts studying. The third case is after the student starts studying. The last one is when the student finished his studies.
Pro firmy
Vzdělávací programy jsou dostupné pouze pro studenty s firemní licencí. Pokud máte firemní účet stačí se přihlásit a začít studovat
Více informací o Seduo pro firmy
Zatím vám můžeme doporučit tyto kurzy
Management středních týmů, buďte právým lídrem jako vojenský generál, který jednotku vede k vítězství
12 lekcí · 45m
Po vystudování zvládnete:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dolor dolore explicabo quo recusandae saepe soluta veniam! Alias blanditiis explicabo ipsam vero voluptatum. Eligendi eum illum laboriosam libero quo! Inventore!
Získáte certifikát:
Management 2: vedení středního týmu
11 % dokončeno
Následuje 5. lekce z 1. kurzu
Řešení krizových situací v týmu, kde je ten svatý grál
import React from 'react';
const Example = () => (
<section className="mb-9 card">
<div className="card-body">
<p className="mb-6">
<span className="mr-4">
<img src="https://dummyimage.com/68x23/9fa4a8/fff.png" width="68" height="23" alt="Seduo" />
</span>
<span className="badge badge--font-smaller badge-secondary text-uppercase">Pro firmy</span>
</p>
<div className="text-secondary">
<small>
Vzdělávací programy jsou dostupné pouze pro studenty s firemní licencí. Pokud máte firemní účet
stačí se <a href="#">přihlásit a začít studovat</a>
</small>
</div>
</div>
<div className="card-footer bg-white">
<a href="#" className="btn btn-primary btn-large btn-block mb-7 mt-5">
Více informací o Seduo pro firmy
</a>
<p className="font-weight-medium text-title">Zatím vám můžeme doporučit tyto kurzy</p>
<div className="d-flex mt-7">
<div className="flex-shrink-0">
<img
src="https://dummyimage.com/64x64/9fa4a8/fff.png"
className="rounded w-100 h-100 mr-3"
width="64"
height="64"
alt="Kurz"
/>
</div>
<div className="flex-grow-1 ml-6">
<p
className="mb-4 text-truncate-multiline text-truncate-multiline-2 text-title font-weight-medium card__text-line--smaller"
title="Management středních týmů, buďte právým lídrem jako vojenský generál, který jednotku vede k vítězství"
>
Management středních týmů, buďte právým lídrem jako vojenský generál, který jednotku vede k
vítězství
</p>
<p className="mb-0 text-secondary card__text-line--smaller">12 lekcí · 45m</p>
</div>
</div>
</div>
</section>
);
export default Example;
import React from 'react';
import { SvgIcon } from 'seduo-ui';
const Example = () => (
<section className="mb-9 card">
<div className="card-body">
<div className="icon-list row">
<div className="icon-list__icon col-1">
<SvgIcon kind="GraduationCapOutline" className="icon icon-dark icon-moderate" />
</div>
<div className="col-10">
<strong className="font-weight-medium text-title">Po vystudování zvládnete:</strong>
<div className="text-truncate-multiline text-truncate-multiline-3 text-secondary card__text-line--smaller">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dolor dolore explicabo quo
recusandae saepe soluta veniam! Alias blanditiis explicabo ipsam vero voluptatum. Eligendi eum
illum laboriosam libero quo! Inventore!
</div>
</div>
</div>
<div className="icon-list row">
<div className="icon-list__icon col-1">
<SvgIcon kind="Certificate" className="icon icon-dark icon-moderate" />
</div>
<div className="col-10">
<strong className="font-weight-medium text-title">Získáte certifikát:</strong>
<p className="text-brand-dark card__text-line--smaller">Management 2: vedení středního týmu</p>
</div>
</div>
<a href="#" className="btn btn-primary btn-large btn-block">
<span className="mr-5">
<SvgIcon kind="Play" className="icon" />
</span>
Začít studovat
</a>
<a href="#" className="btn btn-outline-primary btn-large btn-block">
Přidat do plánu
</a>
</div>
<div className="card-footer bg-white">
<div className="icon-list row">
<div className="icon-list__icon col-1">
<SvgIcon kind="StarOutline" className="icon icon-secondary mr-6" />
</div>
<div className="col-10 pl-5">
<small className="text-secondary">Obsahuje výběr těch nejlepších kurzů</small>
</div>
</div>
<div className="icon-list row">
<div className="icon-list__icon col-1">
<SvgIcon kind="Notes" className="icon icon-secondary mr-6" />
</div>
<div className="col-10 pl-5">
<small className="text-secondary">10 pracovních materiálů · 5 kvízů</small>
</div>
</div>
<div className="icon-list row">
<div className="icon-list__icon col-1">
<SvgIcon kind="Sound" className="icon icon-secondary mr-6" />
</div>
<div className="col-10 pl-5">
<small className="text-secondary">Všechny kurzy v programu jsou česky</small>
</div>
</div>
<div className="icon-list row">
<div className="icon-list__icon col-1">
<SvgIcon kind="Mobile" className="icon icon-secondary mr-6" />
</div>
<div className="col-10 pl-5">
<small className="text-secondary">Studujte kdekoliv díky mobilní aplikaci</small>
</div>
</div>
</div>
</section>
);
export default Example;
import React from 'react';
const Example = () => (
<section className="mb-9 card">
<div className="card-body">
<div className="mb-7">
<div className="card-title">
<span className="text-primary font-weight-medium">11 %</span> dokončeno
</div>
<div className="progress progress--small">
<div
className="progress-bar"
role="progressbar"
aria-valuenow={11}
aria-valuemin={0}
aria-valuemax={100}
style={{
width: '11%',
}}
>
{' '}
</div>
</div>
</div>
<div className="border rounded mb-7 p-6">
<p className="mb-4 text-secondary card__text-line--smaller">Následuje 5. lekce z 1. kurzu</p>
<p className="mb-0 text-truncate-line" title="Řešení krizových situací v týmu, kde je ten svatý grál">
Řešení krizových situací v týmu, kde je ten svatý grál
</p>
</div>
<a href="#" className="btn btn-primary btn-large btn-block">
Pokračovat ve studiu
</a>
<a href="#" className="btn btn-outline-primary btn-large btn-block">
Doporučit kolegovi
</a>
</div>
<div className="card-footer bg-white">
<p className="mb-6">
<small className="text-secondary">
Program vás nezaujal? Můžete se <a href="#">odhlásit ze studia</a>
</small>
</p>
</div>
</section>
);
export default Example;
import React from 'react';
import { SvgIcon } from 'seduo-ui';
const Example = () => (
<section className="mb-9 card">
<div className="card-body">
<div className="row pb-7 flex-sm-row-reverse align-items-center">
<div className="col-12 col-sm-auto text-center text-sm-right mb-6 mb-sm-0">
<SvgIcon kind="FinishedEducationProgram" width={86} height={57} />
</div>
<div className="col-12 col-sm text-center text-sm-left">
<strong className="font-weight-medium text-title">Program byl úspěšně dokončen 24.06.2021</strong>
</div>
</div>
<a href="#" className="btn btn-primary btn-large btn-block">
Stáhnout certifikát
</a>
<button className="btn btn-outline-primary btn-large btn-block">Doporučit kolegovi</button>
<div className="text-center px-6 pt-6">
<a href="#" className="btn btn-link text-muted">
Spustit znovu
</a>
</div>
</div>
</section>
);
export default Example;
Lector box
John Doe
Lektor ve společnosti LMC s.r.o.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fermentum tortor id mi. Aliquam erat volutpat. Mauris metus. Integer imperdiet lectus quis justo. In enim a arcu imperdiet malesuada.
import React from 'react';
import { SvgIcon } from 'seduo-ui';
export default class Example extends React.Component {
render() {
return (
<div className="card shadow-uniform">
<div className="card-body">
<div className="mb-7 mt-7">
<div className="row">
<div className="col-12 col-md-3 text-center mb-8 mb-md-0">
<img
src="https://dummyimage.com/120x120/9fa4a8/fff.png"
width="120"
height="120"
className="d-inline-block rounded-circle lazy"
alt="John Doe"
sizes="120px"
srcSet="https://dummyimage.com/240x240/9fa4a8/fff.png 240w, https://dummyimage.com/120x120/9fa4a8/fff.png 120w"
/>
</div>
<div className="col-12 col-md-9">
<h2 className="card-title text-center text-md-left">John Doe</h2>
<p className="card-subtitle text-muted text-center text-md-left mb-5">
Lektor ve společnosti LMC s.r.o.
</p>
<div className="card-text">
<p className="read-more js-read-more" data-course-name="Lorem ipsum">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum
fermentum tortor id mi. Aliquam erat volutpat. Mauris metus. Integer imperdiet
lectus quis justo. In enim a arcu imperdiet malesuada.
</p>
</div>
<a href="#" title="John Doe">
<span className="d-inline-flex align-items-center">
Všechny kurzy lektora
<SvgIcon kind="ArrowRight" className="icon icon-in-link ml-5 mb-3" />
</span>
</a>
</div>
</div>
</div>
</div>
</div>
);
}
}
Rating summary box
import React from 'react';
import ReactRating from 'react-rating';
import { SvgIcon } from 'seduo-ui';
const Rating = ({ rating }) => (
<div className="rating">
<ReactRating
className="rating__stars"
initialRating={rating}
emptySymbol={<SvgIcon size={15} kind="StarOutline" className="rating__star" />}
fullSymbol={<SvgIcon size={15} kind="Star" className="rating__star" />}
readonly
/>
</div>
);
export default class Example extends React.Component<any, any> {
render() {
return (
<section id="ratings" className="rating-summary mb-9 card card-body shadow-uniform">
<h2 className="card-title text-center mt-7 mb-8">Hodnocení kurzu</h2>
<div className="mb-5">
<div className="row">
<div className="col-12 col-md-6">
<div
itemProp="aggregateRating"
itemScope={true}
itemType="http://schema.org/AggregateRating"
className="row text-center"
>
<h1 className="col-12 mb-0 hero-text">
<meta itemProp="ratingValue" content="4.6" />
92 %
</h1>
<div className="col-12 mb-7 mb-md-0">
<div>
<Rating rating={4} />
</div>
<span className="text-muted">
<meta itemProp="reviewCount" content="2342" />2 342 hodnocení
</span>
</div>
</div>
</div>
<div className="col-10 col-md-6 mx-auto">
<div className="row no-gutters align-items-center">
<div className="col col-5 col-sm-4 text-right">
<Rating rating={5} />
</div>
<div className="col col-3 col-sm-3 mx-6 mx-sm-7">
<div className="progress progress--small">
<div
className="progress-bar progress-bar"
role="progressbar"
aria-valuenow={1666}
aria-valuemin={0}
aria-valuemax={2342}
style={{
width: '23%',
}}
/>
</div>
</div>
<div className="col col-auto">
<span className="text-muted">1666x</span>
</div>
</div>
<div className="row no-gutters align-items-center">
<div className="col col-5 col-sm-4 text-right">
<Rating rating={4} />
</div>
<div className="col col-3 col-sm-3 mx-6 mx-sm-7">
<div className="progress progress--small">
<div
className="progress-bar progress-bar"
role="progressbar"
aria-valuenow={888}
aria-valuemin={0}
aria-valuemax={2342}
style={{
width: '15%',
}}
/>
</div>
</div>
<div className="col col-auto">
<span className="text-muted">888x</span>
</div>
</div>
<div className="row no-gutters align-items-center">
<div className="col col-5 col-sm-4 text-right">
<Rating rating={3} />
</div>
<div className="col col-3 col-sm-3 mx-6 mx-sm-7">
<div className="progress progress--small">
<div
className="progress-bar progress-bar"
role="progressbar"
aria-valuenow={200}
aria-valuemin={0}
aria-valuemax={2342}
style={{
width: '8%',
}}
/>
</div>
</div>
<div className="col col-auto">
<span className="text-muted">200x</span>
</div>
</div>
<div className="row no-gutters align-items-center">
<div className="col col-5 col-sm-4 text-right">
<Rating rating={2} />
</div>
<div className="col col-3 col-sm-3 mx-6 mx-sm-7">
<div className="progress progress--small">
<div
className="progress-bar progress-bar"
role="progressbar"
aria-valuenow={0}
aria-valuemin={0}
aria-valuemax={2342}
style={{
width: '0%',
}}
/>
</div>
</div>
<div className="col col-auto">
<span className="text-muted">0x</span>
</div>
</div>
<div className="row no-gutters align-items-center">
<div className="col col-5 col-sm-4 text-right">
<Rating rating={1} />
</div>
<div className="col col-3 col-sm-3 mx-6 mx-sm-7">
<div className="progress progress--small">
<div
className="progress-bar progress-bar"
role="progressbar"
aria-valuenow={0}
aria-valuemin={0}
aria-valuemax={2342}
style={{
width: '0%',
}}
/>
</div>
</div>
<div className="col col-auto">
<span className="text-muted">0x</span>
</div>
</div>
</div>
</div>
</div>
<hr />
<div className="row">
<strong className="col-12 col-md-auto">user_25691</strong>
<span className="col-6 col-md-auto">
<Rating rating={4} />
</span>
<span className="col-6 col-md-auto ml-md-auto text-right">
<span className="badge badge-outline-alternative">z vaší firmy</span>
</span>
</div>
<p className="mt-6">
Je to kurz na který musím soustředit více pozornosti, ale určitě k zamyšlení. Líbily se mi příklady.
</p>
<hr />
<div className="row">
<strong className="col-12 col-md-auto">user_522190</strong>
<span className="col-12 col-md-auto">
<Rating rating={4} />
</span>
</div>
<p className="mt-6">
Výborné, děkujeme! Kurz jsem si pouštěl s manželkou a v mnohém jsme se našli. Můj háček je popisný
jazyk!
</p>
<div className="bg-content px-6 py-5 mb-5">
<strong>Reakce lektora:</strong>
<p>“Nová reakce“</p>
</div>
<div className="no-tap">
<hr />
<div className="text-center">
<a href="#">Dalších 10 recenzí</a>
</div>
</div>
</section>
);
}
}
Offer box
Cena: 1 790 Kč s DPH
Počet lekcí:
20
Celková délka videí:
2:05 hod
Garance vrácení peněz, Certifikát absolventa, Neomezený přístup
Cena: 1 490 Kč s DPH
Týden slev - sleva 30 %: 1 250 Kč s DPH
Platí do 14. 6. 2018
Počet lekcí:
20
Celková délka videí:
2:05 hod
Garance vrácení peněz, Certifikát absolventa, Neomezený přístup
Počet lekcí:
11
Celková délka videí:
43 min
Certifikát absolventa, Neomezený přístup
Cena: 1 790 Kč s DPH
Počet lekcí:
11
Celková délka videí:
43 min
Certifikát absolventa, Neomezený přístup
Dárek zdarma
Při koupi tohoto kurzu jako dárek získáte knihu Konec Prokrastinace zdarma. Jak dárek získám?
Počet lekcí:
11
Celková délka videí:
43 min
Certifikát absolventa, Neomezený přístup
import React from 'react';
const Example = () => (
<section className="mb-9 mb-lg-0 shadow-uniform card">
<div className="card-body">
<div>
<div className="mb-7">
<h2>
<strong itemProp="offers" itemScope={true} itemType="http://schema.org/Offer">
<meta itemProp="price" content="1790" />
<meta itemProp="priceCurrency" content="CZK" />
Cena: 1 790 Kč
</strong>
<span className="text-nowrap">s DPH</span>
</h2>
</div>
<div className="row mb-5">
<div className="col-7 col-md-3 col-lg-7">Počet lekcí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>20</strong>
</div>
</div>
<div className="row mb-7">
<div className="col-7 col-md-3 col-lg-7">Celková délka videí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>2:05 hod</strong>
</div>
</div>
<p>
<a href="#">Garance vrácení peněz</a>, Certifikát absolventa, Neomezený přístup
</p>
</div>
<a href="#" className="btn btn-primary btn-large btn-block">
Koupit kurz
</a>
</div>
</section>
);
export default Example;
import React from 'react';
const Example = () => (
<section className="mb-9 mb-lg-0 shadow-uniform card">
<div className="card-body">
<div>
<div className="mb-7">
<h2>
Cena:
<span className="price-original text-nowrap">1 490 Kč s DPH</span>
</h2>
<h2 className="price-discount">
Týden slev - sleva 30 %:
<strong itemProp="offers" itemScope={true} itemType="http://schema.org/Offer">
<meta itemProp="price" content="1790" />
<meta itemProp="priceCurrency" content="CZK" />
1 250 Kč
</strong>
<span className="text-nowrap">s DPH</span>
</h2>
<p>
<strong>Platí do 14. 6. 2018</strong>
</p>
</div>
<div className="row mb-5">
<div className="col-7 col-md-3 col-lg-7">Počet lekcí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>20</strong>
</div>
</div>
<div className="row mb-7">
<div className="col-7 col-md-3 col-lg-7">Celková délka videí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>2:05 hod</strong>
</div>
</div>
<p>
<a href="#">Garance vrácení peněz</a>, Certifikát absolventa, Neomezený přístup
</p>
</div>
<a href="#" className="btn btn-primary btn-large btn-block">
Koupit kurz
</a>
</div>
</section>
);
export default Example;
import React from 'react';
import { SvgIcon } from 'seduo-ui';
const Example = () => (
<section className="mb-9 mb-lg-0 shadow-uniform card">
<div className="card-body">
<div>
<div className="row mb-5">
<div className="col-7 col-md-3 col-lg-7">Počet lekcí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>11</strong>
</div>
</div>
<div className="row mb-7">
<div className="col-7 col-md-3 col-lg-7">Celková délka videí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>43 min</strong>
</div>
</div>
<p>Certifikát absolventa, Neomezený přístup</p>
</div>
<div className="mb-7">
<a href="#" className="btn btn-primary btn-large btn-block">
<span className="mr-5">
<SvgIcon kind="BoxArrowIn" className="icon" />
</span>
Přidat do plánu
</a>
</div>
<a href="#" className="btn btn-outline-primary btn-large btn-block">
<span className="mr-5">
<SvgIcon kind="Play" className="icon" />
</span>
Spustit kurz
</a>
</div>
</section>
);
export default Example;
import React from 'react';
import { SvgIcon, Badge } from 'seduo-ui';
const Example = () => (
<section className="mb-9 mb-lg-0 shadow-uniform card">
<div className="card-body">
<div>
<div className="mb-7">
<h2>
<strong itemProp="offers" itemScope={true} itemType="http://schema.org/Offer">
<meta itemProp="price" content="1790" />
<meta itemProp="priceCurrency" content="CZK" />
Cena: 1 790 Kč
</strong>
<span className="text-nowrap">s DPH</span>
</h2>
</div>
<div className="row mb-5">
<div className="col-7 col-md-3 col-lg-7">Počet lekcí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>11</strong>
</div>
</div>
<div className="row mb-7">
<div className="col-7 col-md-3 col-lg-7">Celková délka videí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>43 min</strong>
</div>
</div>
<p>Certifikát absolventa, Neomezený přístup</p>
</div>
<div className="mb-7">
<a href="#" className="btn btn-primary btn-large btn-block">
<span className="mr-5">
<SvgIcon kind="BoxArrowIn" className="icon" />
</span>
Přidat do plánu
</a>
</div>
<a href="#" className="btn btn-outline-primary btn-large btn-block">
<span className="mr-5">
<SvgIcon kind="Play" className="icon" />
</span>
Spustit kurz
</a>
</div>
<div className="card-gift">
<div className="card-gift-header">
<Badge color="light" pill className="mx-auto">
Dárek zdarma
</Badge>
</div>
<div className="row no-gutters">
<div className="col-12 col-md-3 mt-3">
<img
width="50"
height="50"
src="https://dummyimage.com/50x50/9fa4a8/fff.png"
alt="Gift image cap"
/>
</div>
<div className="col-12 col-md-9 small text-muted">
Při koupi tohoto kurzu jako dárek získáte knihu Konec Prokrastinace zdarma.{' '}
<a href="#">Jak dárek získám?</a>
</div>
</div>
</div>
<div className="card-footer small text-muted">
Pro získání dárku nemusíte nic dělat. Knihu vám zašleme na vaší fakturační adresu (kterou nemáme - poznámka
přepisovatele). Pokud chcete dárek zaslat jinam, stačí to uvést do (neexistující - poznámka přepisovatele)
poznámky k objednávce.
</div>
</section>
);
export default Example;
import React from 'react';
import { SvgIcon } from 'seduo-ui';
const Example = () => (
<section className="mb-9 mb-lg-0 shadow-uniform card">
<div className="d-flex justify-content-center align-items-center border-bottom py-6">
<SvgIcon kind="LogoBrandExample" height={50} width={134} />
</div>
<div className="card-body">
<div>
<div className="row mb-5">
<div className="col-7 col-md-3 col-lg-7">Počet lekcí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>11</strong>
</div>
</div>
<div className="row mb-7">
<div className="col-7 col-md-3 col-lg-7">Celková délka videí:</div>
<div className="col-5 col-md-9 col-lg-5">
<strong>43 min</strong>
</div>
</div>
<p>Certifikát absolventa, Neomezený přístup</p>
</div>
<a href="#" className="btn btn-outline-primary btn-large btn-block">
<span className="mr-5">
<SvgIcon kind="Play" className="icon" />
</span>
Spustit kurz
</a>
</div>
</section>
);
export default Example;