From e9ee968289f680dc1cb9995d4f62b2d613781a9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= Date: Tue, 5 Dec 2023 18:41:45 +0100 Subject: [PATCH] Sync 12 Re7 prize ok avec Roulette --- assets/images/{ => animations}/br-spin.png | Bin .../{ => animations}/wb-famille-spin.png | Bin .../images/{ => animations}/wb-happy-spin.png | Bin sass/fo.scss | 1 + sass/pages/_won.scss | 9 + sass/partials/.gitkeep | 0 sass/partials/_spin_wheel.scss | 168 +++++++++++++++ ts/fo.ts | 1 + ts/pages/won.ts | 94 ++++++++ views/layouts/head.blade.php | 46 ++-- views/layouts/header-logo.blade.php | 2 +- views/pages/home.blade.php | 3 - views/pages/participation/loose.blade.php | 18 +- .../participation/parts/animation.blade.php | 62 ++++++ .../participation/parts/discount.blade.php | 40 ++++ .../pages/participation/parts/prize.blade.php | 45 ++++ .../parts/winning-proof.blade.php | 95 +++++++++ views/pages/participation/won.blade.php | 44 ++++ .../participation/won_discount.blade.php | 86 -------- views/pages/participation/won_prize.blade.php | 200 ------------------ views/pages/products.blade.php | 2 +- views/pages/teaser.blade.php | 1 - 22 files changed, 603 insertions(+), 314 deletions(-) rename assets/images/{ => animations}/br-spin.png (100%) rename assets/images/{ => animations}/wb-famille-spin.png (100%) rename assets/images/{ => animations}/wb-happy-spin.png (100%) create mode 100644 sass/pages/_won.scss delete mode 100644 sass/partials/.gitkeep create mode 100644 sass/partials/_spin_wheel.scss create mode 100644 ts/pages/won.ts create mode 100644 views/pages/participation/parts/animation.blade.php create mode 100644 views/pages/participation/parts/discount.blade.php create mode 100644 views/pages/participation/parts/prize.blade.php create mode 100644 views/pages/participation/parts/winning-proof.blade.php create mode 100644 views/pages/participation/won.blade.php delete mode 100644 views/pages/participation/won_discount.blade.php delete mode 100644 views/pages/participation/won_prize.blade.php diff --git a/assets/images/br-spin.png b/assets/images/animations/br-spin.png similarity index 100% rename from assets/images/br-spin.png rename to assets/images/animations/br-spin.png diff --git a/assets/images/wb-famille-spin.png b/assets/images/animations/wb-famille-spin.png similarity index 100% rename from assets/images/wb-famille-spin.png rename to assets/images/animations/wb-famille-spin.png diff --git a/assets/images/wb-happy-spin.png b/assets/images/animations/wb-happy-spin.png similarity index 100% rename from assets/images/wb-happy-spin.png rename to assets/images/animations/wb-happy-spin.png diff --git a/sass/fo.scss b/sass/fo.scss index ad8c217..35342d1 100644 --- a/sass/fo.scss +++ b/sass/fo.scss @@ -19,3 +19,4 @@ @import "./pages/home"; @import "./pages/static_page"; @import "./pages/products"; +@import "./pages/won"; diff --git a/sass/pages/_won.scss b/sass/pages/_won.scss new file mode 100644 index 0000000..3e263f6 --- /dev/null +++ b/sass/pages/_won.scss @@ -0,0 +1,9 @@ +@import "./../partials/spin_wheel"; + +.won-page { + #wheel-wrapper { + position: relative; + width: 16rem; + margin: 0 auto; + } +} diff --git a/sass/partials/.gitkeep b/sass/partials/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/sass/partials/_spin_wheel.scss b/sass/partials/_spin_wheel.scss new file mode 100644 index 0000000..7bad90e --- /dev/null +++ b/sass/partials/_spin_wheel.scss @@ -0,0 +1,168 @@ +#wheel-wrapper { + * { + padding: 0; + margin: 0; + } + + .wheel { + position: relative; + overflow: hidden; + width: 16rem; + height: 16rem; + border: 0.4rem solid #{$color-white}; + border-radius: 50%; + margin: 0; + box-shadow: rgb(0 0 0 / 20%) 0 0 10px, rgb(0 0 0 / 5%) 0 3px 0; + transform: rotate(0deg); + + &::before { + position: absolute; + z-index: 1000; + left: 0; + width: calc(16rem - 0.2rem * 2); + height: calc(16rem - 0.2rem * 2); + border: 0.2rem solid rgb(0 0 0 / 10%); + border-radius: 50%; + content: ""; + } + + .wheel-inner { + width: 100%; + height: 100%; + transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99); + } + + .wheel-sec { + position: absolute; + top: -.1rem; + left: -.1rem; + width: 16rem; + height: calc(16rem / 2); + background-origin: border-box; + background-position: center; + background-repeat: no-repeat; + background-size: auto; + opacity: 1; + transform-origin: calc(16rem / 2) calc(16rem / 2); + } + + .wheel-spin { + position: absolute; + z-index: 1000; + top: 50%; + left: 50%; + width: 4.2rem; + height: 4.2rem; + border-radius: 50%; + margin: -34px 0 0 -34px; + background: #{$color-white}; + box-shadow: rgb(0 0 0 / 10%) 0 3px 0; + cursor: pointer; + font-family: "Exo 2", sans-serif; + user-select: none; + + &::before { + position: absolute; + top: -12px; + left: 14px; + width: 0; + height: 0; + border-width: 0 20px 28px; + border-style: solid; + border-color: transparent transparent #{$color-white}; + content: ""; + } + + &::after { + position: relative; + z-index: 100000; + display: block; + width: 4.2rem; + height: 4.2rem; + color: $color-dark; + content: "LANCER"; + font-size: .7rem; + line-height: 4.2rem; + text-align: center; + text-shadow: 0 2px 0 #{$color-white}, 0 -1px 0 rgb(0 0 0 / 30%); + } + + .wheel-spin-inner { + position: absolute; + z-index: 999; + top: 50%; + left: 50%; + width: 54px; + height: 54px; + border-radius: 50%; + margin: -27px 0 0 -27px; + background: $color-white; + + /* Old browsers */ + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* FF3.6+ */ + background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, rgb(255 255 255 / 100%)), color-stop(100%, rgb(234 234 234 / 100%)) ); /* Chrome,Safari4+ */ + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* Chrome10+,Safari5.1+ */ + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* Opera 12+ */ + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* IE10+ */ + background: radial-gradient(ellipse at center, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* W3C */ + box-shadow: rgb(255 255 255 / 100%) 0 -2px 0 inset, rgb(255 255 255 / 100%) 0 2px 0 inset, rgb(0 0 0 / 40%) 0 0 5px; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + } + + &:active,&.active { + &::after { + font-size: .8rem; + } + + .wheel-spin-inner { + box-shadow: rgb(0 0 0 / 40%) 0 0 5px inset; + } + } + } + + .wheel-shine { + position: absolute; + top: 0; + left: 0; + width: 16rem; + height: 16rem; /* FF3.6+ */ + background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, rgb(255 255 255 / 100%)), color-stop(1%, rgb(255 255 255 / 99%)), color-stop(9%, rgb(255 255 255 / 91%)), color-stop(100%, rgb(255 255 255 / 0%)) ); /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 12+ */ + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 99%) 1%, rgb(255 255 255 / 91%) 9%, rgb(255 255 255 / 0%) 100% ); /* IE10+ */ + background: radial-gradient(ellipse at center, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 99%) 1%, rgb(255 255 255 / 91%) 9%, rgb(255 255 255 / 0%) 100% ); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + opacity: 0.1; + } + } + + /* ANIMATION */ + @keyframes hh { + 0%, + 100% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(7deg); + } + } + + @keyframes hh { + 0%, + 100% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(7deg); + } + } + + .spin { /* Chrome, Safari, Opera */ + animation: hh 0.1s; + } +} diff --git a/ts/fo.ts b/ts/fo.ts index f39e211..1b50d30 100644 --- a/ts/fo.ts +++ b/ts/fo.ts @@ -13,6 +13,7 @@ import "./base/common"; // PAGES import "./pages/home"; import "./pages/products"; +import "./pages/won"; // Cookies import CookieNotice from "@ldc-web/cookie-notice"; diff --git a/ts/pages/won.ts b/ts/pages/won.ts new file mode 100644 index 0000000..6b2bd32 --- /dev/null +++ b/ts/pages/won.ts @@ -0,0 +1,94 @@ +document.addEventListener("DOMContentLoaded", function () { + if (!document.querySelector("main.won-page")) { + return; + } + + const wheelWrapper = document.getElementById("wheel-wrapper"), + spinWheelInner = wheelWrapper?.querySelector(".wheel-inner") as HTMLElement | null | undefined, + spinWheelBtnList = wheelWrapper?.querySelectorAll(".wheel-spin") as NodeListOf | undefined, + prizeSection = document.getElementById("prize-section"), + discountSection = document.getElementById("discount-section"); + + /** Hide animation and show win sections */ + const toggleAnimationPhase = () => { + if (wheelWrapper) { + wheelWrapper.classList.add("d-none"); + } + if (prizeSection) { + prizeSection.classList.remove("d-none"); + }else if (discountSection) { + discountSection.classList.remove("d-none"); + } else { + throw new Error("No section to toggle"); + } + }; + + if (wheelWrapper && spinWheelInner && spinWheelBtnList && spinWheelBtnList.length) { + let clicks: number = 0; + // * Set default degree (360*5) soit 5 tours + const degree: number = (360 * 5), + wheelPartsDeg: number = 360 / spinWheelInner.children.length, + thisWinAngle: number = (Number.parseInt( + String(wheelWrapper.dataset["winChild"]) + // On s'aligne sur la tranche on on ajoute entre 10% et 90% d'une part + )) * wheelPartsDeg - 45 + (wheelPartsDeg * (Math.random() * (0.9 - 0.1) + 0.1)); + let timeout: NodeJS.Timeout | null = null; + + const spinTheWheel = () => { + // * Add 1 every click + + /** + * Multiply the degree by number of clicks + * generate random number between 1 - 85, + * then add to the new degree + */ + const newDegree = degree * ++clicks; + const totalDegree = newDegree + thisWinAngle; + + /** + * Let's make the spin btn to tilt every + * time the edge of the section hits + * the indicator + */ + spinWheelInner.style["transform"] = `rotate(${totalDegree}deg)`; + if (timeout) { + clearTimeout(timeout); + } + timeout = setTimeout(toggleAnimationPhase, 7000); + }; + /** ! Même Algo que sur GGW legacy */ + spinWheelBtnList.forEach((spinBtn) => { + spinBtn.addEventListener("click", spinTheWheel); + spinBtn.addEventListener("keydown", (kbdEvt: KeyboardEvent) => { + if ( + kbdEvt.key == " " || + kbdEvt.code == "Space" || + kbdEvt.keyCode == 32 || + kbdEvt.key == "Enter" || + kbdEvt.code == "Enter" || + kbdEvt.keyCode == 13 + ) { + spinBtn.classList.add("active"); + spinTheWheel(); + kbdEvt.preventDefault(); + } + }); + spinBtn.addEventListener("keyup", (kbdEvt: KeyboardEvent) => { + if ( + kbdEvt.key == " " || + kbdEvt.code == "Space" || + kbdEvt.keyCode == 32 || + kbdEvt.key == "Enter" || + kbdEvt.code == "Enter" || + kbdEvt.keyCode == 13 + ) { + spinBtn.classList.remove("active"); + kbdEvt.preventDefault(); + } + }); + }); + } else { + toggleAnimationPhase(); + } +}); + diff --git a/views/layouts/head.blade.php b/views/layouts/head.blade.php index 33aea4c..2636687 100644 --- a/views/layouts/head.blade.php +++ b/views/layouts/head.blade.php @@ -1,24 +1,27 @@ - +{{-- Meta --}} +{{-- blade-formatter-disable --}} @hasSection('metaIndex') - + @else - + @endif +{{-- blade-formatter-enable --}} - - +{{-- Open Graph --}} +{{-- blade-formatter-disable-next-line --}} + - +{{-- Favicon --}} {{-- GENERER favicon avec un outil https://realfavicongenerator.net/ --}} @@ -28,22 +31,25 @@ - -{{ $settingsGlobal->name ?? config('app.name') }} - @yield('title') +{{-- Others --}} +{{-- blade-formatter-disable-next-line --}} +{{ $settingsGlobal->name ?? config('app.name') }}@hasSection('title') - @yield('title')@endif + +{{-- blade-formatter-disable --}} +@hasSection('canonical') + +@else + +@endif +{{-- blade-formatter-enable --}} + +{{-- STYLES --}} +@vite(['resources/theme/mounted/sass/fo.scss']) +@stack('styles') + +{{-- DEBUG --}} @if (config('app.debug')) @endif -@hasSection('canonical') - -@else - -@endif - - -@vite(['resources/theme/mounted/sass/fo.scss']) -@stack('styles') - - - diff --git a/views/layouts/header-logo.blade.php b/views/layouts/header-logo.blade.php index 9c39e85..68b93b3 100644 --- a/views/layouts/header-logo.blade.php +++ b/views/layouts/header-logo.blade.php @@ -1,6 +1,6 @@
- $settingsGlobal->name])) -@section('description', __('Jeu :site_name', ['site_name' => $settingsGlobal->name])) - @section('main-class', 'home-page') @section('content') {{-- 1st row lots --}} diff --git a/views/pages/participation/loose.blade.php b/views/pages/participation/loose.blade.php index baa2317..6ffedb9 100644 --- a/views/pages/participation/loose.blade.php +++ b/views/pages/participation/loose.blade.php @@ -1,6 +1,20 @@ @extends('theme::layout') +@section('title', __('Perdu')) +@section('description', __('Vous avez perdu, retentez votre chance')) + +@section('main-class', 'loose-page') @section('content') -

C'est perdu

-

Rejouer !

+
+
+
+

{{ __('C\'est perdu') }}

+
+
+
+
+ {{ __('Rejouer !') }} +
+
+
@endsection diff --git a/views/pages/participation/parts/animation.blade.php b/views/pages/participation/parts/animation.blade.php new file mode 100644 index 0000000..ac90751 --- /dev/null +++ b/views/pages/participation/parts/animation.blade.php @@ -0,0 +1,62 @@ +
+
+
+

{{ __('Lancez la roue et découvrez votre gain') }}

+
+
+
+
+ {{-- SPIN WHEEL --}} + {{-- blade-formatter-disable --}} + @php + $prizesIdList = \App\Models\Prize::query()->pluck('id'); + $brPicture = Vite::asset('resources/theme/mounted/assets/images/animations/br-spin.png'); + $lotWbHappy = Vite::asset('resources/theme/mounted/assets/images/animations/wb-happy-spin.png'); + $lotWbFamilly = Vite::asset('resources/theme/mounted/assets/images/animations/wb-famille-spin.png'); + /** ID => picture */ + $wheelParts = collect([ + [$brPicture, 'br'], + [$lotWbHappy, $prizesIdList->get(0)], + [$brPicture, 'br'], + [$lotWbFamilly, $prizesIdList->get(1)], + ]); + // * Quel fragment va tomber + $spinChild = !empty($prizeModel) ? $wheelParts->search(fn($wheelPart) => Arr::get($wheelPart, 1) === $prizeModel->id) : null; + $spinChild = (is_null($spinChild) and $winDiscount) ? $wheelParts->search(fn($wheelPart) => Arr::get($wheelPart, 1) === 'br') : $spinChild; + @endphp + {{-- blade-formatter-enable --}} +
+ +
+
+ @foreach ($wheelParts as $wheelPartIndex => $wheelPart) +
+ @endforeach + @push('styles') + @foreach ($wheelParts as $wheelPartIndex => $wheelPart) + + @endforeach + @endpush +
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+
diff --git a/views/pages/participation/parts/discount.blade.php b/views/pages/participation/parts/discount.blade.php new file mode 100644 index 0000000..296f3c0 --- /dev/null +++ b/views/pages/participation/parts/discount.blade.php @@ -0,0 +1,40 @@ +
+ +
+
+
+

Félicitations !

+ +

Vous avez gagné un bon d'achat de {{ number_format($coupon->face_value, 2) }}€
{{ $coupon->valid_on }}

+
+ Imprimer ma réduction +
+
+
+
+
+

Vous possédez un autre code ?

+
+ Je rejoue +
+
+
+ +
+
+
+
+

Félicitations !

+

Vous avez gagné un bon d'achat de {{ number_format($coupon->face_value, 2) }}€
{{ $coupon->valid_on }}

+
+ Imprimer ma réduction +
+

Vous possédez un autre code ?

+
+ Je rejoue +
+
+
+
+ +
diff --git a/views/pages/participation/parts/prize.blade.php b/views/pages/participation/parts/prize.blade.php new file mode 100644 index 0000000..6164906 --- /dev/null +++ b/views/pages/participation/parts/prize.blade.php @@ -0,0 +1,45 @@ +
+
+
+
+

Félicitations !

+

Vous avez gagné un {{ $prizeModel->label_one }} !
+ Pour recevoir votre cadeau, vous devez envoyer vos preuves d'achat. + Voir modalités ci dessous. +

+
+
+
+
+
+ >> +
+
+ {{--
+

Vous possédez un autre code ?

+
+ Je rejoue +
+
--}} +
+ +
+
+
+
+

Félicitations !

+

Vous avez gagné un {{ $prizeModel->label_one }} !
+ Pour recevoir votre cadeau, vous devez envoyer vos preuves d'achat. + Voir modalités ci dessous. +

+
+ >> +
+ {{--

Vous possédez un autre code ?

+
+ Je rejoue +
--}} +
+
+
+
diff --git a/views/pages/participation/parts/winning-proof.blade.php b/views/pages/participation/parts/winning-proof.blade.php new file mode 100644 index 0000000..52f1859 --- /dev/null +++ b/views/pages/participation/parts/winning-proof.blade.php @@ -0,0 +1,95 @@ +
+
+ + + +
diff --git a/views/pages/participation/won.blade.php b/views/pages/participation/won.blade.php new file mode 100644 index 0000000..8ea2efd --- /dev/null +++ b/views/pages/participation/won.blade.php @@ -0,0 +1,44 @@ +@extends('theme::layout') + +@section('title', __('Vous avez gagné !')) +@section('description', __('Vous avez gagné un Lot cliquez sur la roue pour découvrir lequel')) + +@section('main-class', 'won-page') +@section('content') + + {{-- SPIN WHEEL --}} + @include('theme::pages.participation.parts.animation', [ + 'sectionId' => 'spin-animation', + 'winDiscount' => !empty($prizeModel) ? false : true, + 'prizeModel' => $prizeModel ?? null, + ]) + + @if (!empty($prizeModel)) + {{-- LOT --}} + @include('theme::pages.participation.parts.prize', [ + 'sectionId' => 'prize-section', + 'prizeModel' => $prizeModel, + ]) + @elseif (!empty($discount)) + {{-- COUPON --}} + @include('theme::pages.participation.parts.discount', [ + 'sectionId' => 'discount-section', + 'discount' => $discount, + ]) + @else + @php + throw new \RuntimeException('Unhandled win case'); + @endphp + @endif +@endsection + +@push('scripts') + +@endpush diff --git a/views/pages/participation/won_discount.blade.php b/views/pages/participation/won_discount.blade.php deleted file mode 100644 index 9b7a313..0000000 --- a/views/pages/participation/won_discount.blade.php +++ /dev/null @@ -1,86 +0,0 @@ -@extends('theme::layout') - -@section('title', 'Réduction') - -@section('content') -
-
- -
-

Lancez la roue et
découvrez votre gain

- -
- -
-
-
-
-
-
-
- -
-
-
- -
-
- -
-
-
- -
- -
-
-
-

Félicitations !

- -

Vous avez gagné un bon d'achat de {{ number_format($coupon->face_value, 2) }}€
{{ $coupon->valid_on }}

-
- Imprimer ma réduction -
-
-
-
-
-

Vous possédez un autre code ?

-
- Je rejoue -
-
-
- -
-
-
-
-

Félicitations !

-

Vous avez gagné un bon d'achat de {{ number_format($coupon->face_value, 2) }}€
{{ $coupon->valid_on }}

-
- Imprimer ma réduction -
-

Vous possédez un autre code ?

-
- Je rejoue -
-
-
-
- -
- -
-@endsection - -@push('scripts') - -@endpush diff --git a/views/pages/participation/won_prize.blade.php b/views/pages/participation/won_prize.blade.php deleted file mode 100644 index 8c2c902..0000000 --- a/views/pages/participation/won_prize.blade.php +++ /dev/null @@ -1,200 +0,0 @@ -@extends('theme::layout') - -@section('title') - {{ $prizesGlobal[0]->gain_view->name }} -@endsection - -@section('content') -
-
-
-

Lancez la roue et
découvrez votre gain

- -
- -
-
-
-
-
-
-
- -
-
-
- -
-
- -
-
-
- -
- -
-
-
-

Félicitations !

-

Vous avez gagné un {{ $prizesGlobal[0]->label_one }} !
- Pour recevoir votre cadeau, vous devez envoyer vos preuves d'achat. - Voir modalités ci dessous. -

-
-
-
-
-
- >> -
-
- {{--
-

Vous possédez un autre code ?

-
- Je rejoue -
-
--}} -
- -
-
-
-
-

Félicitations !

-

Vous avez gagné un {{ $prizesGlobal[0]->label_one }} !
- Pour recevoir votre cadeau, vous devez envoyer vos preuves d'achat. - Voir modalités ci dessous. -

-
- >> -
- {{--

Vous possédez un autre code ?

-
- Je rejoue -
--}} -
-
-
-
- -
-
-
-
- - - -
-@endsection - -@push('scripts') - -@endpush diff --git a/views/pages/products.blade.php b/views/pages/products.blade.php index 7d0ed71..58912c2 100644 --- a/views/pages/products.blade.php +++ b/views/pages/products.blade.php @@ -1,7 +1,7 @@ @extends('theme::layout') @section('title', __('Produits porteurs')) -@section('description', __('Les produits porteurs')) +@section('description', __('Les produits porteurs de l\'offre du jeu')) @section('main-class', 'product-page') diff --git a/views/pages/teaser.blade.php b/views/pages/teaser.blade.php index f0311bf..8ff918d 100644 --- a/views/pages/teaser.blade.php +++ b/views/pages/teaser.blade.php @@ -1,6 +1,5 @@ @extends('theme::layout-teaser') -@section('title', __('Jeu :site_name', ['site_name' => $settingsGlobal->name])) @section('description', __('Le jeu :site_name vas bientôt ouvrir', ['site_name' => $settingsGlobal->name])) @section('main-class', 'teaser-page')