From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 10 Mar 2021 17:44:04 +0000 (+0100)
Subject: Wait #4244 @8
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a27a59d66e241902f6fe9e4fcc7c0e2de159ea05;p=ccv-email.git

Wait #4244 @8
---

diff --git a/.gitignore b/.gitignore
index ddb9e55..1559cc6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 /public/storage
 /storage/*.key
 /vendor
+.DS_Store
 .idea
 .env
 .env.backup
diff --git a/app/Http/Controllers/EmailController.php b/app/Http/Controllers/EmailController.php
index 54ef515..5bba605 100644
--- a/app/Http/Controllers/EmailController.php
+++ b/app/Http/Controllers/EmailController.php
@@ -63,8 +63,16 @@ class EmailController extends Controller
             $data = compact('dr', 'pathology', 'name', 'email', 'surgeons', 'pathologies');
 
             if ($action === 'send') {
-                Mail::to($email)->send(new Diagnosis($data));
-                return redirect('/diagnosis')->with('message', 'Message envoyé avec succès !');
+
+                try {
+                    Mail::to($email)->send(new Diagnosis($data));
+                    return redirect('/diagnosis')->with('message', 'Message envoyé avec succès !');
+
+                } catch (\Swift_TransportException $STe) {
+                    $title = "Erreur lors de l'envoi de l'e-mail";
+                    $details = $STe->getMessage();
+                    return view('error', compact('title', 'details'));
+                }
             }
 
             return view('diagnosis.email', ['layout' => 'layouts.preview', 'post_data' => $request->post()] + $data);
diff --git a/public/assets/CCV_logo.png b/public/assets/CCV_logo.png
new file mode 100644
index 0000000..faddce8
Binary files /dev/null and b/public/assets/CCV_logo.png differ
diff --git a/public/assets/CCV_slogan.png b/public/assets/CCV_slogan.png
new file mode 100644
index 0000000..811bbdb
Binary files /dev/null and b/public/assets/CCV_slogan.png differ
diff --git a/public/assets/SOS_DOS.png b/public/assets/SOS_DOS.png
new file mode 100644
index 0000000..f94e6ea
Binary files /dev/null and b/public/assets/SOS_DOS.png differ
diff --git a/public/assets/_READ_ME.txt b/public/assets/_READ_ME.txt
new file mode 100644
index 0000000..798224f
--- /dev/null
+++ b/public/assets/_READ_ME.txt
@@ -0,0 +1,4 @@
+This folder contains assets referenced in HTML e-mails sent by CCV via this app.
+
+Files here should never be removed or replaced without careful consideration of the consequences
+(ie. broken images in e-mails already sent or unexpected results in the event an image is replaced).
diff --git a/public/assets/instagram.png b/public/assets/instagram.png
new file mode 100644
index 0000000..e91d6c4
Binary files /dev/null and b/public/assets/instagram.png differ
diff --git a/public/assets/rendez-vous.jpg b/public/assets/rendez-vous.jpg
new file mode 100644
index 0000000..2923e0f
Binary files /dev/null and b/public/assets/rendez-vous.jpg differ
diff --git a/public/assets/teleconsultation.jpg b/public/assets/teleconsultation.jpg
new file mode 100644
index 0000000..a59edcf
Binary files /dev/null and b/public/assets/teleconsultation.jpg differ
diff --git a/public/assets/youtube.png b/public/assets/youtube.png
new file mode 100644
index 0000000..2eadd0d
Binary files /dev/null and b/public/assets/youtube.png differ
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
new file mode 100644
index 0000000..98cb7fd
--- /dev/null
+++ b/resources/views/components/button.blade.php
@@ -0,0 +1,27 @@
+{{-- HTML E-mail button (https://buttons.cm) --}}
+
+@props([
+    'label',
+    'href',
+    'bg' => '#ff078b',
+    'color' => '#ffffff',
+    'fontSize' => '13px',
+    'width' => '210px',
+    'height' => '35px'
+])
+
+<div {{ $attributes }}>
+    <!--[if mso]>
+    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $href }}" style="height:{{ $height }};v-text-anchor:middle;width:{{ $width }};" stroke="f" fillcolor="{{ $bg }}">
+        <w:anchorlock/>
+        <center>
+    <![endif]-->
+    <a href="{{ $href }}"
+       style="background-color:{{ $bg }};color:{{ $color }};display:inline-block;font-family:sans-serif;font-size:{{ $fontSize }};font-weight:bold;line-height:{{ $height }};text-align:center;text-decoration:none;width:{{ $width }};-webkit-text-size-adjust:none;">
+        {{ $label }} {{ $slot }}
+    </a>
+    <!--[if mso]>
+    </center>
+    </v:rect>
+    <![endif]-->
+</div>
diff --git a/resources/views/components/columns.blade.php b/resources/views/components/columns.blade.php
new file mode 100644
index 0000000..84663c8
--- /dev/null
+++ b/resources/views/components/columns.blade.php
@@ -0,0 +1,40 @@
+{{-- Responsive 2-column block --}}
+
+@props([
+    'cols' => 2,
+    'colMaxWidth' => '350px',
+    'column1',
+    'column2',
+    'column3',
+    'column4'
+])
+
+<div class="two-col" style="text-align:center;font-size:0;">
+    <!--[if mso]>
+    <table role="presentation" width="100%">
+        <tr>
+            <td style="width:{{ 100 / $cols }}%;padding:10px;" valign="top">
+    <![endif]-->
+
+    @for ($i = 1; $i <= $cols; $i++)
+        @php($col = "column$i")
+
+        <div class="column" style="width:100%;max-width:{{ $colMaxWidth }};display:inline-block;vertical-align:top;font-size:13px;">
+            <div style="padding: 0 20px;">
+                {{ $$col }}
+            </div>
+        </div>
+
+        @if ($i < $cols)
+            <!--[if mso]>
+            </td>
+            <td style="width:{{ 100 / $cols }}%;padding:10px;" valign="top">
+            <![endif]-->
+        @endif
+    @endfor
+    <!--[if mso]>
+            </td>
+        </tr>
+    </table>
+    <![endif]-->
+</div>
diff --git a/resources/views/components/divider.blade.php b/resources/views/components/divider.blade.php
new file mode 100644
index 0000000..36b48a7
--- /dev/null
+++ b/resources/views/components/divider.blade.php
@@ -0,0 +1,10 @@
+{{-- Divider Line --}}
+
+@props([
+    'color' => '#999',
+    'width' => '100%',
+    'maxWidth' => 'none',
+    'height' => '1px'
+])
+
+<hr style="border-width:0;background:{{ $color }};color:{{ $color }};height:{{ $height }};width:{{ $width }};max-width:{{ $maxWidth }};" {{ $attributes }}>
diff --git a/resources/views/components/spacer.blade.php b/resources/views/components/spacer.blade.php
new file mode 100644
index 0000000..2a861d0
--- /dev/null
+++ b/resources/views/components/spacer.blade.php
@@ -0,0 +1,3 @@
+@props(['height' => '24px'])
+
+<div class="spacer" style="line-height:{{ $height }};height:{{ $height }};mso-line-height-rule:exactly;">&nbsp;</div>
diff --git a/resources/views/diagnosis/email.blade.php b/resources/views/diagnosis/email.blade.php
index 6d21338..782229e 100644
--- a/resources/views/diagnosis/email.blade.php
+++ b/resources/views/diagnosis/email.blade.php
@@ -10,14 +10,8 @@
             text-decoration: underline;
         }
 
-        .cta-button, .cta-button a {
-            color: #fff !important;
-            text-decoration: none !important;
-        }
-
-        .ccv-contacts a {
-            color: #2e2c40;
-            font-size: 13px;
+        img {
+            display: inline;
         }
 
         .text-sm {
@@ -34,204 +28,183 @@
 
     @parent
 
-    <div class="moz-forward-container">
-        <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
-            <tbody>
-            <tr>
-                <td valign="top">
-                    <table width="700" cellspacing="0" cellpadding="20" border="0" align="center" bgcolor="#ffffff" class="text-sm">
-                        <tbody>
-                        <tr>
-                            <td valign="middle" align="center">
-                                <a href="https://www.ccv-montpellier.fr/"><img src="https://email.ccv-montpellier.fr/CCV_logo.png" alt="CCV Montpellier" moz-do-not-send="true" width="200" vspace="0" height="87" border="0"></a>
-                                <br><br><br>
-                                <a href="https://www.ccv-montpellier.fr/"><img src="https://email.ccv-montpellier.fr/CCV_slogan.png" alt="Trouvons ensemble la solution chirurgicale à votre problème de dos" moz-do-not-send="true" width="540" vspace="0" height="20" border="0"></a>
-                                <br><br>
-                                <hr width="100%" size="1" noshade="noshade">
-                            </td>
-                        </tr>
-                        <tr>
-                            <td valign="top">Bonjour {{ $name }},<br>
-                                <br>
-                                Merci d’avoir sollicité le CCV Montpellier pour obtenir votre E-Diagnostic sur vos problèmes de dos.<br>
-                                <br>
-                                Vous exprimez ainsi votre confiance dans l’avis de nos spécialistes, et nous vous en sommes reconnaissants.<br>
-                                <br>
-                                L’étude préliminaire de vos informations médicales par l’équipe du CCV Montpellier, a permis de diagnostiquer une pathologie de&nbsp;<b><?= $pathology ?></b>&nbsp;qui pourrait être prise en charge par un de nos spécialistes.<br>
-                                <br>
-                                Vous trouverez&nbsp;<a href="<?= $pathologies[$pathology] ?>">ici</a>, une fiche résumant cette pathologie et les possibilités de traitements.<br>
-                                <br>
-                                Le Docteur&nbsp;<a href="<?= $surgeons[$dr]['profile'] ?>"><?= $dr ?></a>&nbsp;chirurgien spécialisé dans la pathologie vertébrale, pourra vous recevoir en consultation pour une étude complète de votre dossier.<br>
-                                <br>
-                                Pour prendre rendez-vous, veuillez choisir votre mode de consultation :<br></td>
-                        </tr>
-                        <tr>
-                            <td valign="top">
-                                <table width="100%" height="173" cellspacing="0" cellpadding="0" border="0">
-                                    <tbody>
-                                    <tr>
-                                        <td width="47%" valign="middle" align="center"><a href="<?= $surgeons[$dr]['e-consultation'] ?>" moz-do-not-send="true"><img src="https://email.ccv-montpellier.fr/teleconsultation.jpg" alt="Téléconsultation" moz-do-not-send="true" width="170" vspace="10" height="170" border="0" align="middle"></a><br></td>
-                                        <td width="6%" valign="top"><br></td>
-                                        <td width="47%" valign="middle" align="center"><a href="<?= $surgeons[$dr]['bookings'] ?>" moz-do-not-send="true"><img src="https://email.ccv-montpellier.fr/rendez-vous.jpg" alt="Rendez-vous" moz-do-not-send="true" title="Clinique" width="170" vspace="10" height="170" border="0" align="middle"></a><br></td>
-                                    </tr>
-                                    <tr>
-                                        <td width="47%" valign="top" align="center">
-                                            <table width="100%" cellspacing="0" cellpadding="0" border="0" class="text-sm">
-                                                <tbody>
-                                                <tr>
-                                                    <td valign="middle" align="center">
-                                                        <h3>EN TÉLÉCONSULTATION</h3>
-                                                        Ce nouveau service vous permet de rencontrer votre chirurgien sans vous déplacer.<br>
-                                                    </td>
-                                                </tr>
-                                                </tbody>
-                                            </table>
-                                        </td>
-                                        <td width="6%" valign="top"><br></td>
-                                        <td width="47%" valign="top" align="center">
-                                            <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" class="text-sm">
-                                                <tbody>
-                                                <tr>
-                                                    <td valign="top" align="center">
-                                                        <h3>À LA CLINIQUE</h3>
-                                                        Le CCV Montpellier vous accueille du lundi au vendredi de 9h00 à 12h30 et de 14h00 à 18h00.<br>
-                                                    </td>
-                                                </tr>
-                                                </tbody>
-                                            </table>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td width="47%" valign="top"><br></td>
-                                        <td width="6%" valign="top"><br></td>
-                                        <td width="47%" valign="top"><br></td>
-                                    </tr>
-                                    <tr>
-                                        <td width="47%" valign="middle" align="center">
-                                            <table width="210" cellspacing="0" cellpadding="10" border="0">
-                                                <tbody>
-                                                <tr>
-                                                    <td valign="middle" bgcolor="#ff078b" align="center" class="cta-button"><a href="<?= $surgeons[$dr]['e-consultation'] ?>"><span>MA E-CONSULTATION</span></a></td>
-                                                </tr>
-                                                </tbody>
-                                            </table>
-                                        </td>
-                                        <td width="6%" valign="top"><br></td>
-                                        <td width="47%" valign="middle" align="center">
-                                            <table width="210" cellspacing="0" cellpadding="10" border="0">
-                                                <tbody>
-                                                <tr>
-                                                    <td valign="middle" bgcolor="#71d3df" align="center" class="cta-button"><a href="<?= $surgeons[$dr]['bookings'] ?>"><span>RENDEZ-VOUS AU CCV</span></a></td>
-                                                </tr>
-                                                </tbody>
-                                            </table>
-                                        </td>
-                                    </tr>
-                                    </tbody>
-                                </table>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td valign="top">
-                                Bien cordialement,<br><br><b>L’équipe du CCV MONTPELLIER<br></b><br><b><font size="-2"><br></font></b>
-                                <div class="moz-forward-container">
-                                    <hr width="100%" size="1" noshade="noshade">
-                                </div>
-                                <b></b>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td valign="middle" align="center">
-                                <table width="100%" cellspacing="0" cellpadding="0" border="0">
-                                    <tbody>
-                                    <tr>
-                                        <td width="15%" valign="middle" align="center"><br></td>
-                                        <td width="20%" valign="middle" align="center"><a href="https://www.instagram.com/ccv_montpellier/"><img src="https://email.ccv-montpellier.fr/instagram.png" alt="Instagram CCV" moz-do-not-send="true" width="27" vspace="0" hspace="0" height="27" border="0" align="middle"></a></td>
-                                        <td valign="middle" align="center"><a href="https://www.youtube.com/channel/UC3DJtYRhJ-WJo165H3TyjKQ"><img src="https://email.ccv-montpellier.fr/youtube.png" alt="YouTube CCV" moz-do-not-send="true" width="37" vspace="0" hspace="0" height="26" border="0" align="middle"></a></td>
-                                        <td width="20%" valign="middle" align="center"><a href="http://www.sosdos-montpellier.fr/"><img src="https://email.ccv-montpellier.fr/SOS_DOS.png" alt="SOS DOS" moz-do-not-send="true" width="47" vspace="0" hspace="0" height="28" border="0" align="middle"></a></td>
-                                        <td width="15%" valign="middle" align="center"><br></td>
-                                    </tr>
-                                    </tbody>
-                                </table>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td valign="middle" align="center" class="ccv-contacts">
-                                <hr width="100%" size="1" noshade="noshade">
-                                <br>
-                                <a href="https://goo.gl/maps/xsQwUZt35rPTtqaFA">
-                                    Clinique du Parc<br>
-                                    50 Rue Emile Combes<br>
-                                    34170 Castelnau-le-Lez
-                                </a><br><br><a href="tel:0467331363">04 67 33 13 63</a><br>
-                                <br>
-                                <a href="mailto:ccv@ccv-montpellier.fr">ccv@ccv-montpellier.fr</a><br>
-                                <br>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="moz-forward-container">
-        <hr width="658" size="1" noshade="noshade">
-    </div>
-    <div class="moz-forward-container">
-        <table width="700" cellspacing="0" cellpadding="20" border="0" bgcolor="#f4f5f6" align="center">
-            <tbody>
-            <tr>
-                <td valign="top" bgcolor="#ffffff"><br></td>
-            </tr>
-            <tr>
-                <td valign="top" bgcolor="#f6f5f5">
-                    <h3>Tarifs des consultations du CCV MONTPELLIER</h3>
-                    <table width="100%" cellspacing="0" cellpadding="15" border="0" align="center" class="text-sm">
-                        <tbody>
-                        <tr>
-                            <td width="85%" valign="middle" bgcolor="#ffffff"><b>Étude préliminaire de votre dossier</b>&nbsp;(Demande d'avis médical en ligne) :<br></td>
-                            <td valign="middle" bgcolor="#ffffff" align="right"><b>Gratuit</b><br></td>
-                        </tr>
-                        <tr>
-                            <td width="85%" valign="middle" align="left"><b>Consultation médicale au CCV (Clinique du Parc) :</b><br><span class="text-xs">(Base de Remboursement SS : 50€ pour un avis spécialiste ponctuel , 23€ pour une consultation de suivi. Prise en charge mutuelle pour le reste à charge).</span><br></td>
-                            <td valign="middle" align="right"><b>80€</b><br></td>
-                        </tr>
-                        <tr>
-                            <td width="85%" valign="middle" bgcolor="#ffffff" align="left"><b>Téléconsultation médicale en ligne (Vidéo consultation) :</b><br><span class="text-xs">Incluant une étude approfondie de votre dossier et la rédaction d’un rapport médical (Base de Remboursement SS : 50€ pour un avis spécialiste ponctuel. Prise en charge mutuelle pour le reste à charge).</span><br></td>
-                            <td valign="middle" bgcolor="#ffffff" align="right"><b>100€</b><br></td>
-                        </tr>
-                        <tr>
-                            <td width="85%" valign="middle"><b>Séjour médical personnalisé :</b><br><span class="text-xs">Incluant frais d’hospitalisation, transport, hébergement et prestations personnalisées à la clinique.</span><br></td>
-                            <td valign="middle" align="right"><b>Sur devis</b><br></td>
-                        </tr>
-                        <tr>
-                            <td width="85%" valign="middle" bgcolor="#ffffff"><b>Interventions pour patients français</b><br><span class="text-xs">Pour les patients français affiliés à la Sécurité Sociale, seuls les dépassements d’honoraires seront à régler. Leurs montants vous seront communiqués sur simple demande.</span><br></td>
-                            <td valign="middle" bgcolor="#ffffff" align="right"><b>Sur devis</b><br></td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </td>
-            </tr>
-            <tr>
-                <td valign="top">
-                    <h3><b>Vous ne connaissez pas encore le service ma E-Consultation du CCV MONTPELLIER ?</b></h3>
-                    <div class="text-sm">
-                        La téléconsultation vidéo vous permet d’expliquer en détail votre histoire médicale, de préciser vos symptômes et vos attentes dans la prise en charge de votre pathologie. Toutes vos questions pourront être abordées pendant cet entretien.<br>Les échanges avec votre chirurgien lui permettront de préciser son diagnostic, de vous expliquer l’origine de vos douleurs et de vous détailler un programme de soins, avec ses bénéfices, ses risques, ses taux de réussite et ses échecs.&nbsp;
-                        <br>
-                        <br>
-                        Ce programme de soins ne conduira pas systématiquement à une proposition de chirurgie, puisque l’intervention reste le dernier recours dans la plupart des pathologies du dos.
-                        <br>
-                        <br>Si toutefois, une chirurgie devait être réalisée au CCV MONTPELLIER, notre plateforme e-medecine pourra se charger de l’organisation complète de votre voyage médical.&nbsp;<a href="https://www.ccv-montpellier.fr/notre-offre-de-voyage-medical/">En savoir plus</a>&nbsp;<br>
-                        <br>
-                        Besoin d’aide ? D’information complémentaire ? Nos secrétaires médicales se feront un plaisir d’échanger avec vous du lundi au vendredi de 9h00 à 18h00.&nbsp;<a moz-do-not-send="true" href="https://www.ccv-montpellier.fr/contact/">Pour être rappelé par le secrétariat médical du CCV Montpellier, cliquez-ici.</a>
-                    </div>
-                </td>
-            </tr>
-            </tbody>
-        </table>
+    {{-- HEADER --}}
+    <table role="presentation" width="100%">
+        <tr>
+            <td style="padding:10px 10px 20px 10px;text-align:center;">
+                <a href="https://www.ccv-montpellier.fr/">
+                    <img src="{{ url('assets/CCV_logo.png') }}" alt="CCV Montpellier" width="200" style="max-width:200px;width:100%;height:auto;" />
+                </a>
+                <x-spacer height="32px" />
+                <img src="{{ url('assets/CCV_slogan.png') }}" alt="Trouvons ensemble la solution chirurgicale à votre problème de dos" width="540" style="max-width:540px;width:100%;height:auto;" />
+                <br><br>
+
+                <x-divider />
+            </td>
+        </tr>
+    </table>
+
+    {{-- Body Intro --}}
+    <table role="presentation" width="100%">
+        <tr>
+            <td class="text-sm" style="padding:10px 10px 20px 10px;">
+                Bonjour {{ $name }},<br>
+                <br>
+                Merci d’avoir sollicité le CCV Montpellier pour obtenir votre E-Diagnostic sur vos problèmes de dos.<br>
+                <br>
+                Vous exprimez ainsi votre confiance dans l’avis de nos spécialistes, et nous vous en sommes reconnaissants.<br>
+                <br>
+                L’étude préliminaire de vos informations médicales par l’équipe du CCV Montpellier, a permis de diagnostiquer une pathologie
+                de&nbsp;<b>{{ $pathology }}</b>&nbsp;qui pourrait être prise en charge par un de nos spécialistes.<br>
+                <br>
+                Vous trouverez&nbsp;<a href="{{ $pathologies[$pathology] }}">ici</a>, une fiche résumant cette pathologie et les possibilités de traitements.<br>
+                <br>
+                Le Docteur&nbsp;<a href="{{ $surgeons[$dr]['profile'] }}">{{ $dr }}</a>&nbsp;chirurgien spécialisé dans la pathologie vertébrale, pourra vous recevoir en consultation pour une étude complète de votre dossier.<br>
+                <br>
+                Pour prendre rendez-vous, veuillez choisir votre mode de consultation :
+            </td>
+        </tr>
+    </table>
+
+    <x-spacer height="30px" />
+
+    {{-- 2-col RDV block --}}
+    <x-columns cols="2">
+
+        {{-- Téléconsultation --}}
+        <x-slot name="column1">
+            <a href="{{ $surgeons[$dr]['e-consultation'] }}">
+                <img src="{{ url('assets/teleconsultation.jpg') }}" alt="Téléconsultation" width="170" height="170" />
+            </a>
+
+            <h3 style="margin:20px 0 16px;font-weight:bold;font-size:15px;">EN TÉLÉCONSULTATION</h3>
+            Ce nouveau service vous permet de rencontrer votre chirurgien sans vous déplacer.
+
+            <x-spacer />
+
+            <x-button label="MA E-CONSULTATION" :href="$surgeons[$dr]['e-consultation']" bg="#ff078b" />
+
+            <x-spacer height="30px" />
+
+        </x-slot>
+
+        {{-- RDV à la clinique --}}
+        <x-slot name="column2">
+            <a href="{{ $surgeons[$dr]['bookings'] }}">
+                <img src="{{ url('assets/rendez-vous.jpg') }}" alt="Rendez-vous à la clinique" width="170" height="170">
+            </a>
+
+            <h3 style="margin:20px 0 16px;font-weight:bold;font-size:15px;">À LA CLINIQUE</h3>
+            Le CCV Montpellier vous accueille du lundi au vendredi de 9h00 à 12h30 et de 14h00 à 18h00.
+
+            <x-spacer />
+
+            <x-button label="RENDEZ-VOUS AU CCV" :href="$surgeons[$dr]['bookings']" bg="#71d3df" />
+
+            <x-spacer height="30px" />
+
+        </x-slot>
+
+    </x-columns>
+
+    <table role="presentation" width="100%">
+        <tr>
+            <td class="text-sm" style="padding:10px 10px 20px 10px;">
+                Bien cordialement,
+                <br><br>
+                <b>L’équipe du CCV MONTPELLIER</b>
+            </td>
+        </tr>
+    </table>
+
+    <x-divider />
+    <x-spacer height="30px" />
+
+    {{-- Social icons --}}
+    <table role="presentation" width="100%">
+        <tr>
+            <td align="center">
+                <table width="100%" border="0" style="max-width:490px">
+                    <tr>
+                        <td width="33%" valign="middle" align="center"><a href="https://www.instagram.com/ccv_montpellier/"><img src="{{ url('assets/instagram.png') }}" alt="Instagram CCV" moz-do-not-send="true" width="27" vspace="0" hspace="0" height="27" border="0" align="middle"></a></td>
+                        <td width="33%" valign="middle" align="center"><a href="https://www.youtube.com/channel/UC3DJtYRhJ-WJo165H3TyjKQ"><img src="{{ url('assets/youtube.png') }}" alt="YouTube CCV" moz-do-not-send="true" width="37" vspace="0" hspace="0" height="26" border="0" align="middle"></a></td>
+                        <td width="33%" valign="middle" align="center"><a href="http://www.sosdos-montpellier.fr/"><img src="{{ url('assets/SOS_DOS.png') }}" alt="SOS DOS" moz-do-not-send="true" width="47" vspace="0" hspace="0" height="28" border="0" align="middle"></a></td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+
+    <x-spacer height="30px" />
+    <x-divider />
+    <x-spacer height="20px" />
+
+    <div style="font-size:13px;text-align:center;">
+        <a href="https://goo.gl/maps/xsQwUZt35rPTtqaFA" style="color:#2e2c40;text-decoration: underline;">
+            Clinique du Parc<br>
+            50 Rue Emile Combes<br>
+            34170 Castelnau-le-Lez
+        </a>
+        <br><br>
+        <a href="tel:0467331363" style="color:#2e2c40;text-decoration: underline;">
+            04 67 33 13 63
+        </a>
+        <br><br>
+        <a href="mailto:ccv@ccv-montpellier.fr" style="color:#2e2c40;text-decoration: underline;">
+            ccv@ccv-montpellier.fr
+        </a>
     </div>
-    <div><br></div>
+
+    <x-spacer height="20px" />
+    <x-divider />
+    <x-spacer height="40px" />
+
+    {{-- Tarifs --}}
+    <table width="100%" cellspacing="0" cellpadding="20" border="0" bgcolor="#f6f5f5" align="center">
+        <tr>
+            <td>
+                <h3 style="font-size: 19px;margin: 0 0 1em 0;">Tarifs des consultations du CCV MONTPELLIER</h3>
+                <table width="100%" cellspacing="0" cellpadding="15" border="0" align="center" class="text-sm">
+                    <tbody>
+                    <tr>
+                        <td width="85%" valign="middle" bgcolor="#ffffff"><b>Étude préliminaire de votre dossier</b>&nbsp;(Demande d'avis médical en ligne) :<br></td>
+                        <td valign="middle" bgcolor="#ffffff" align="right"><b>Gratuit</b><br></td>
+                    </tr>
+                    <tr>
+                        <td width="85%" valign="middle" align="left"><b>Consultation médicale au CCV (Clinique du Parc) :</b><br><span class="text-xs">(Base de Remboursement SS : 50€ pour un avis spécialiste ponctuel , 23€ pour une consultation de suivi. Prise en charge mutuelle pour le reste à charge).</span><br></td>
+                        <td valign="middle" align="right"><b>80€</b><br></td>
+                    </tr>
+                    <tr>
+                        <td width="85%" valign="middle" bgcolor="#ffffff" align="left"><b>Téléconsultation médicale en ligne (Vidéo consultation) :</b><br><span class="text-xs">Incluant une étude approfondie de votre dossier et la rédaction d’un rapport médical (Base de Remboursement SS : 50€ pour un avis spécialiste ponctuel. Prise en charge mutuelle pour le reste à charge).</span><br></td>
+                        <td valign="middle" bgcolor="#ffffff" align="right"><b>100€</b><br></td>
+                    </tr>
+                    <tr>
+                        <td width="85%" valign="middle"><b>Séjour médical personnalisé :</b><br><span class="text-xs">Incluant frais d’hospitalisation, transport, hébergement et prestations personnalisées à la clinique.</span><br></td>
+                        <td valign="middle" align="right"><b>Sur devis</b><br></td>
+                    </tr>
+                    <tr>
+                        <td width="85%" valign="middle" bgcolor="#ffffff"><b>Interventions pour patients français</b><br><span class="text-xs">Pour les patients français affiliés à la Sécurité Sociale, seuls les dépassements d’honoraires seront à régler. Leurs montants vous seront communiqués sur simple demande.</span><br></td>
+                        <td valign="middle" bgcolor="#ffffff" align="right"><b>Sur devis</b><br></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <h3 style="font-size: 19px;margin: 0 0 1em 0;"><b>Vous ne connaissez pas encore le service ma E-Consultation du CCV MONTPELLIER ?</b></h3>
+                <div class="text-sm">
+                    La téléconsultation vidéo vous permet d’expliquer en détail votre histoire médicale, de préciser vos symptômes et vos attentes dans la prise en charge de votre pathologie. Toutes vos questions pourront être abordées pendant cet entretien.<br>Les échanges avec votre chirurgien lui permettront de préciser son diagnostic, de vous expliquer l’origine de vos douleurs et de vous détailler un programme de soins, avec ses bénéfices, ses risques, ses taux de réussite et ses échecs.&nbsp;
+                    <br>
+                    <br>
+                    Ce programme de soins ne conduira pas systématiquement à une proposition de chirurgie, puisque l’intervention reste le dernier recours dans la plupart des pathologies du dos.
+                    <br>
+                    <br>Si toutefois, une chirurgie devait être réalisée au CCV MONTPELLIER, notre plateforme e-medecine pourra se charger de l’organisation complète de votre voyage médical.&nbsp;<a href="https://www.ccv-montpellier.fr/notre-offre-de-voyage-medical/">En savoir plus</a>&nbsp;<br>
+                    <br>
+                    Besoin d’aide ? D’information complémentaire ? Nos secrétaires médicales se feront un plaisir d’échanger avec vous du lundi au vendredi de 9h00 à 18h00.&nbsp;<a moz-do-not-send="true" href="https://www.ccv-montpellier.fr/contact/">Pour être rappelé par le secrétariat médical du CCV Montpellier, cliquez-ici.</a>
+                </div>
+            </td>
+        </tr>
+    </table>
 
 @endsection
diff --git a/resources/views/error.blade.php b/resources/views/error.blade.php
new file mode 100644
index 0000000..4b6befa
--- /dev/null
+++ b/resources/views/error.blade.php
@@ -0,0 +1,10 @@
+@extends('layouts.app')
+
+@section('content')
+
+    <div class="max-w-3xl mx-6">
+        <h1 class="font-bold text-3xl text-red-600 text-center mb-6">{{ $title }}</h1>
+        <div class="py-4 px-6 border bg-red-100 border-red-400 rounded">{{ $details }}</div>
+    </div>
+
+@endsection
diff --git a/resources/views/layouts/email-wrapper.blade.php b/resources/views/layouts/email-wrapper.blade.php
index 6550ccb..d6c6245 100644
--- a/resources/views/layouts/email-wrapper.blade.php
+++ b/resources/views/layouts/email-wrapper.blade.php
@@ -1,13 +1,59 @@
-{{-- Email wrapper --}}
+{{-- Email Wrapper --}}
+{{-- Ref: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 --}}
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="{{ $lang ?? 'fr' }}" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
-    <title>CCV Montpellier</title>
-    <meta name="x-apple-disable-message-reformatting" />
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="x-apple-disable-message-reformatting">
+    <!--[if !mso]><!-->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <!--<![endif]-->
+    <title></title>
+    <!--[if mso]>
+    <style type="text/css">
+        table {border-collapse:collapse;border-spacing:0;margin:0;}
+        div, td {padding:0;}
+        div {margin:0 !important;}
+    </style>
+    <noscript>
+        <xml>
+            <o:OfficeDocumentSettings>
+                <o:PixelsPerInch>96</o:PixelsPerInch>
+            </o:OfficeDocumentSettings>
+        </xml>
+    </noscript>
+    <![endif]-->
     @stack('head')
 </head>
-<body style="word-wrap: break-word; -webkit-nbsp-mode: space; line-break: after-white-space;">
-    @yield('content')
+<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;">
+
+@yield('pre-content') {{-- Used for injecting preview bar --}}
+
+<div role="article" aria-roledescription="email" lang="{{ $lang ?? 'fr' }}" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
+    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+            <td align="center">
+
+                <!--[if mso]>
+                <table role="presentation" align="center" style="width:660px;">
+                    <tr>
+                        <td style="padding:20px 0;">
+                <![endif]-->
+
+                <div class="outer" style="width:96%;max-width:700px;margin:20px auto;">
+                    @yield('content')
+                </div>
+
+                <!--[if mso]>
+                </td>
+                </tr>
+                </table>
+                <![endif]-->
+
+            </td>
+        </tr>
+    </table>
+</div>
 </body>
 </html>
diff --git a/resources/views/layouts/preview.blade.php b/resources/views/layouts/preview.blade.php
index db8bcee..7087d2c 100644
--- a/resources/views/layouts/preview.blade.php
+++ b/resources/views/layouts/preview.blade.php
@@ -1,7 +1,12 @@
 {{-- Preview e-mail before sending --}}
-@extends('layouts.app')
+@extends('layouts.email-wrapper')
 
-@section('content')
+@prepend('head')
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://unpkg.com/@tailwindcss/forms/dist/forms.min.css" rel="stylesheet">
+@endprepend
+
+@section('pre-content')
 
     <form action="{{ $_SERVER['REQUEST_URI'] }}" method="post"
           class="sticky top-0 left-0 z-10 w-full bg-gray-200 p-4 sm:flex items-center justify-between border-b border-gray-400 shadow-lg mb-6">