style: complete redo of the email layouts (#20)

components/email/Newsletter.tsx

@@ -1,13 +1,15 @@
-import { getSayings } from '@utils/getSayings';
+import React from 'react';
 import { summirize } from '@utils/summarize';
 import { NewsType } from '@utils/validationSchemas';
 import createDOMPurify from 'isomorphic-dompurify';
 import Template from './Template';
+import extractMainTopic from '@utils/extractMainTopic';
 
 export default async function NewsletterTemplate(stories: NewsType[]) {
   const summary = await summirize(stories);
   const sanitizedSummary = createDOMPurify.sanitize(summary, {
-    USE_PROFILES: { html: true }
+    USE_PROFILES: { html: true },
+    ADD_ATTR: ['target', 'rel', 'style']
   });
 
   if (!sanitizedSummary) {
@@ -15,17 +17,51 @@ export default async function NewsletterTemplate(stories: NewsType[]) {
     throw new Error('Failed to sanitize summary');
   }
 
+  const topic = extractMainTopic(sanitizedSummary);
+
   return {
-    subject: `What's new from the Hackernews forum?`,
+    subject: topic,
     template: (
       <Template
-        title={`Here is something 
-              ${getSayings[Math.floor(Math.random() * getSayings.length)]}!`}
+        variant='newsletter'
+        title='Your Daily Tech Updates'
         body={
           <div
-            style={{ fontSize: '1rem', color: '#4a5568' }}
-            dangerouslySetInnerHTML={{ __html: sanitizedSummary }}
-          />
+            style={{
+              color: '#374151',
+              fontSize: '16px',
+              lineHeight: 1.6
+            }}
+          >
+            <style>
+              {`
+                .what-to-watch {
+                  margin-top: 32px;
+                  padding: 24px;
+                  background: linear-gradient(135deg, rgba(186,27,88,0.03) 0%, rgba(245,161,98,0.03) 100%);
+                  border-left: 3px solid #BA1B58;
+                  border-radius: 4px;
+                }
+                .what-to-watch h3 {
+                  margin: 0 0 16px 0;
+                  color: #BA1B58;
+                  font-size: 18px;
+                  font-weight: 600;
+                  letter-spacing: -0.02em;
+                }
+                .what-to-watch p {
+                  margin: 0;
+                  color: #4A5568;
+                }
+                .what-to-watch a {
+                  color: #9333EA !important;
+                  text-decoration: none;
+                  font-weight: 500;
+                }
+              `}
+            </style>
+            <div dangerouslySetInnerHTML={{ __html: sanitizedSummary }} />
+          </div>
         }
       />
     )