diff --git a/addons/website_slides_survey/static/src/img/certification.svg b/addons/website_slides_survey/static/src/img/certification.svg
new file mode 100644
index 0000000000000000000000000000000000000000..54895cf600fc1393ec1fabb608dc908c81b0f9d5
--- /dev/null
+++ b/addons/website_slides_survey/static/src/img/certification.svg
@@ -0,0 +1 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M7.158 11.549a2.005 2.005 0 0 1-3.105-1.286 2.005 2.005 0 0 1-1.286-3.105 2.005 2.005 0 0 1 1.286-3.105 2.005 2.005 0 0 1 3.105-1.286 2.005 2.005 0 0 1 3.105 1.286 2.005 2.005 0 0 1 1.286 3.105 2.005 2.005 0 0 1-1.286 3.105 2.005 2.005 0 0 1-3.105 1.286z" id="a"/><filter filterUnits="objectBoundingBox" id="b"><feMorphology radius=".5" in="SourceAlpha" result="shadowSpreadInner1"/><feOffset in="shadowSpreadInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0749562937 0" in="shadowInnerInner1"/></filter><path id="d" d="M6.04788912 6.85018391L7.55257375 8.20939291 9.91700506 6 11 6.947144 7.55257375 10 5 7.75171917z"/><filter x="-2.5%" y="-3.8%" width="105%" height="115%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".3" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.233200393 0" in="shadowOffsetOuter1"/></filter></defs><g transform="translate(-2 -2)" fill="none" fill-rule="evenodd"><g transform="rotate(22 5.57 9.903)"><use fill="#00C9FF" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path stroke="#FFF" stroke-width=".7" d="M7.158 11.96a2.355 2.355 0 0 1-3.395-1.407 2.355 2.355 0 0 1-1.406-3.395 2.355 2.355 0 0 1 1.406-3.395 2.355 2.355 0 0 1 3.395-1.406 2.355 2.355 0 0 1 3.395 1.406 2.355 2.355 0 0 1 1.406 3.395 2.355 2.355 0 0 1-1.406 3.395 2.355 2.355 0 0 1-3.395 1.406z"/></g><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g></svg>
\ No newline at end of file
diff --git a/addons/website_slides_survey/static/src/scss/website_profile.scss b/addons/website_slides_survey/static/src/scss/website_profile.scss
deleted file mode 100644
index c912aebf31b0403bb0e9af2203ba426672ecffc5..0000000000000000000000000000000000000000
--- a/addons/website_slides_survey/static/src/scss/website_profile.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// Certification Card
-.o_wprofile_slides_certif_card_body {
- height: 66px;
- > div > div:first-child {
- position: absolute;
- padding: 0px;
- top: 8px;
- left: 8px;
- width: 66px;
- height: 66px;
- }
- > div > div:nth-child(3) > span {
- position: absolute;
- right: 32px;
- top: 13px;
- }
- > div > div > div:nth-child(2) {
- position: absolute;
- bottom: 0px;
- right: 32px;
- a {
- margin-left: 8px;
- color: grey;
- }
- }
-}
diff --git a/addons/website_slides_survey/static/src/scss/website_slides_survey.scss b/addons/website_slides_survey/static/src/scss/website_slides_survey.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3aaa503352c85dd1b5b1bc8bacbaa87ee5bcc411
--- /dev/null
+++ b/addons/website_slides_survey/static/src/scss/website_slides_survey.scss
@@ -0,0 +1,34 @@
+$o_wss_color_1 : #5B7687;
+$o_wss_color_2 : #485761;
+
+// General
+// **************************************************
+.o_wss_certification_icon {
+ @include size(1.4em, auto);
+}
+
+// Course page
+// **************************************************
+#wrap.o_wss_certification_channel {
+ .o_wslides_course_header {
+ background-image: linear-gradient(120deg, $o_wss_color_1, $o_wss_color_2);
+ }
+
+ .o_wslides_course_pict {
+ @include media-breakpoint-up(md) {
+ border-color: $o_wss_color_2;
+ }
+ }
+
+ .o_wslides_nav_tabs .nav-link {
+ @include media-breakpoint-up(md) {
+ &, &:hover{
+ border-color: $o_wss_color_1;
+ }
+
+ &.active {
+ border-color: $gray-100;
+ }
+ }
+ }
+}
diff --git a/addons/website_slides_survey/views/assets.xml b/addons/website_slides_survey/views/assets.xml
index 7a31fa078c869a3728af3511e56de31b01fd8be3..40eae6539701ac8619c4b2e6feb70626e7097a17 100644
--- a/addons/website_slides_survey/views/assets.xml
+++ b/addons/website_slides_survey/views/assets.xml
@@ -2,9 +2,11 @@
<odoo>
<data>
<template id="assets_frontend" inherit_id="website.assets_frontend" name="Slides Certification">
+ <xpath expr="//link[last()]" position="after">
+ <link rel="stylesheet" type="text/scss" href="/website_slides_survey/static/src/scss/website_slides_survey.scss"/>
+ </xpath>
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="/website_slides_survey/static/src/js/slides_upload.js"/>
- <link rel="stylesheet" type="text/scss" href="/website_slides_survey/static/src/scss/website_profile.scss"/>
<script type="text/javascript" src="/website_slides_survey/static/src/js/slides_course_fullscreen_player.js"/>
</xpath>
</template>
diff --git a/addons/website_slides_survey/views/survey_templates.xml b/addons/website_slides_survey/views/survey_templates.xml
index deea71a9c99e2abc244f457f0f24efb3149a2622..074784d75b7ee8f692c09d7ab4a6012b0f95a21c 100644
--- a/addons/website_slides_survey/views/survey_templates.xml
+++ b/addons/website_slides_survey/views/survey_templates.xml
@@ -12,5 +12,11 @@
</div>
</xpath>
</template>
+
+ <template id="o_wss_certification_icon">
+ <t t-set="icon_url" t-value="icon_url if icon_url else '/website_slides_survey/static/src/img/certification.svg'"/>
+ <t t-set="icon_classes" t-value="icon_classes if icon_classes else 'o_wss_certification_icon'"/>
+ <img t-att-class="icon_classes" t-att-src="icon_url" alt="Certification icon"/>
+ </template>
</data>
</odoo>
diff --git a/addons/website_slides_survey/views/website_slides_templates_course.xml b/addons/website_slides_survey/views/website_slides_templates_course.xml
index 98aa90c575f3a8285d92d1defd57fbbac53daf88..8e94e1665cab4b1bd6ebbe39b389e482cd60ddd0 100644
--- a/addons/website_slides_survey/views/website_slides_templates_course.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_course.xml
@@ -1,6 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
+ <template id="course_main" inherit_id="website_slides.course_main" name="Certification Course Main">
+ <xpath expr="//div[@id='wrap']" position="attributes">
+ <attribute name="t-attf-class" separator=" " add="#{'o_wss_certification_channel' if channel.nbr_certification > 0 else ''}"/>
+ </xpath>
+
+ <xpath expr="//div[@id='courseMainTabContent']//div[@id='home']/t" position="before">
+ <div t-if="channel.nbr_certification > 0 and channel.is_member" class="alert alert-success d-flex align-items-center justify-content-between flex-wrap">
+ <div>Begin your <b>certification</b> today!</div>
+
+ <t t-set="first_slide" t-value="category_data[0]['slides'][0]"/>
+ <a t-attf-href="/slides/slide/#{slug(first_slide)}?fullscreen=1" class="btn btn-success mt-2 mt-sm-0">
+ <span>Start Now</span><i class="fa fa-chevron-right ml-2 align-middle"/>
+ </a>
+ </div>
+ </xpath>
+ </template>
+
<template id="slide_icon_inherit_survey" inherit_id="website_slides.slide_icon">
<xpath expr="//i[last()]" position="after">
<i t-if="slide.slide_type == 'certification'" t-att-class="'fa fa-trophy %s' % icon_class"></i>
diff --git a/addons/website_slides_survey/views/website_slides_templates_homepage.xml b/addons/website_slides_survey/views/website_slides_templates_homepage.xml
index bc4be6ba9b2519abdfa9f74ee0cf123f8a1ab8a1..eaa1783346b52592562977a76fbf9a77f6ac0713 100644
--- a/addons/website_slides_survey/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_homepage.xml
@@ -3,7 +3,18 @@
<data>
<template id="courses_home_inherit_survey" inherit_id="website_slides.courses_home">
<xpath expr="//a[hasclass('o_wslides_home_all_slides')]" position="after">
- <a class="nav-link nav-link" href="/slides/all?slide_type=certification"><i class="fa fa-trophy mr-1"/>Certifications</a>
+ <a class="nav-link nav-link d-flex" href="/slides/all?slide_type=certification">
+ <t t-call="website_slides_survey.o_wss_certification_icon"/>
+ <span class="ml-1">Certifications</span>
+ </a>
+ </xpath>
+ </template>
+
+ <template id="course_card_inherit_survey" inherit_id="website_slides.course_card">
+ <xpath expr="//div/div" position="after">
+ <div t-if="channel.nbr_certification > 0" class="position-absolute py-1 px-2 h5" style="right:0; top:0">
+ <t t-call="website_slides_survey.o_wss_certification_icon"/>
+ </div>
</xpath>
</template>
</data>