Style NewsCard + index.mdx

components/NewsCard.tsx

@@ -17,14 +17,10 @@ const NewsCard: React.FC<NewsCardProps> = ({date,author,content}) => {
                 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
             </style>
             <div className={styles.date}>
-                <p>
                     {date.toLocaleDateString('en-US', options)}
-                </p>
             </div>
             <div className={styles.author}>
-                <p>
                     {author}
-                </p>
             </div>
             <div className={styles.content}>
                 <p>

components/newscard.module.css

@@ -1,20 +1,27 @@
 .card{
     background-color: white;
     font-family: 'Poppins', sans-serif;
+    /* border: 1px solid #000000; */
+    padding: 27px 39px;
 }
 
 .date{
     color: var(--purple-2);
     font-size: 18px;
     font-weight: bold;
+    line-height: 27px;
 }
 
 .author{
     color: var(--purple-1);
+    line-height: 21px;
     font-size: 14px;
+    margin: 5px 0px 7px 0px;
 }
 
 .content{
+    white-space: pre-line;
+    line-height: 21px;
     color: var(--purple-2);
     font-size: 14px;
 }

pages/index.module.css

@@ -1,3 +1,33 @@
-.Foo {
-  background-color: red;
-}
+.component {
+  padding: 50px;
+  background-color: var(--off-white);
+  /* position: absolute; */
+}
+
+.title {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  color: var(--purple-2);
+  font-size: 24px;
+  line-height: 36px;
+  margin-bottom: 14px;
+}
+
+.desc {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 21px;
+  white-space: pre-line;
+  color: var(--purple-2);
+  vertical-align: baseline;
+}
+
+.hr {
+  border: none;
+  height: 1px;
+  background-color: var(--purple-2);
+  margin: 0 0 13px 0;
+}