styles: article content

src/pages/paywall/article/[id]/index.tsx

@@ -69,9 +69,11 @@ export default function Article({ embed }: CustomPageProps) {
             <div>{calculateReadingTime(article.content)}</div>
           </div>
           <h2 className={styles.articleTitle}>{article.title}</h2>
-          {article.content.map((paragraph, index) => (
-            <p key={index}>{paragraph}</p>
-          ))}
+          <div className={styles.articleContent}>
+            {article.content.map((paragraph, index) => (
+              <p key={index}>{paragraph}</p>
+            ))}
+          </div>
         </div>
       )}
     </UseCaseWrapper>

src/pages/paywall/paywall.module.scss

@@ -196,5 +196,31 @@
 }
 
 .articleTitle {
+  color: v('dark-black');
+  font-family: Inter;
+  font-size: 48px;
+  font-weight: 600;
+  line-height: 130%;
   margin-bottom: rem(16px);
 }
+
+.articleContent {
+  p {
+    margin-top: 32px;
+    margin-bottom: rem(32px);
+    line-height: 160%;
+    letter-spacing: 0.16px;
+    color: v('dark-gray');
+  }
+
+  p:first-of-type {
+    margin-top: rem(16px);
+    font-size: rem(20px);
+    font-weight: 500;
+    line-height: 140%;
+  }
+
+  p:last-of-type {
+    margin-bottom: rem(16px);
+  }
+}

src/server/paywall/articles.ts

@@ -22,10 +22,10 @@ export const ARTICLES: ArticleData[] = [
   {
     id: '1',
     date: '1 hour ago',
-    title: 'How to defend your site from common cyberattacks',
+    title: 'How to defend your site from common cyber attacks',
     content: [
       "Websites are an integral part of our lives, but that also makes them a prime target for cyberattacks — malicious attempts to exploit vulnerabilities in your website's security to steal sensitive information, disrupt services, or cause other types of damage.",
-      'Depending on the nature of your website and services, successful cyberattacks can have severe consequences such Depending on the nature of your website and services, successful cyberattacks can have severe consequences such as financial loss, reputational damage, and legal liabilities.',
+      'Depending on the nature of your website and services, successful cyberattacks can have severe consequences such as financial loss, reputational damage, and legal liabilities.',
       "According to cybersecurity statistics compiled by Zippia, the cost of cybercrime is increasing significantly and is expected to grow by as much as 15% over the next five years. It's estimated that by 2025, cybercrime will cost the world roughly $10.5 trillion every year. Zippia estimates that 30,000 websites are hacked each day globally, with one happening every 39 seconds.",
       'The good news is that 95% of cyberattacks are due to human error, which means that something can be done to prevent them. To help track and prevent common cyberattacks, the Open Web Application Security Project (OWASP), a nonprofit organization, maintains a list of the most prevalent security risks affecting websites, including injection attacks, security misconfigurations, and broken authentication. The project is a community-driven initiative that aims to improve the security of software and web applications.',
       'By understanding these attacks and implementing appropriate security measures, you can better protect your websites from potential threats. In this article, you will learn about some of the common cyberattacks and how to implement defenses to ensure that your site is secure.',