Add some more copy to landing page

2 files changed, 37 insertions, 24 deletions

diff --git a/thallium-frontend/src/components/Card.tsx b/thallium-frontend/src/components/Card.tsx
index 4f967d0..8441386 100644
--- a/thallium-frontend/src/components/Card.tsx
+++ b/thallium-frontend/src/components/Card.tsx
@@ -1,21 +1,23 @@
 import styled from "styled-components";
 
-const CardContainer = styled.div`
+const CardContainer = styled.div<{ $seamless?: boolean; }>`
   border: 3px solid ${({ theme }) => theme.borderColor};
+  border-top: ${({ $seamless }) => $seamless ? "0" : ""};
   padding: 16px;
   position: relative;
   background-color: ${({ theme }) => theme.cardBackgroundColor};
   text-align: left;
-
   box-shadow: 10px 10px 0 ${({ theme }) => theme.cardShadow};
+
+  margin-top: ${({ $seamless }) => $seamless ? "0px" : "30px"};
 `;
 
-const CardTitle = styled.div`
+const CardTitle = styled.div<{ $seamless?: boolean; }>`
   position: absolute;
   top: -16px;
   left: 16px;
   background-color: ${({ theme }) => theme.cardBackgroundColor};
-  background: linear-gradient(0deg, ${({ theme }) => theme.cardBackgroundColor} 0%, ${({ theme }) => theme.cardBackgroundColor} 45%, ${({ theme }) => theme.backgroundColor} 45%);
+  ${({ $seamless, theme }) => $seamless ? "" : `background: linear-gradient(0deg, ${theme.cardBackgroundColor} 0%, ${theme.cardBackgroundColor} 45%, ${theme.backgroundColor} 45%)`};
   padding: 0 8px;
   font-weight: bold;
   z-index: 1;
@@ -23,17 +25,18 @@ const CardTitle = styled.div`
 `;
 
 interface CardProps {
-    title: string;
-    children: React.ReactNode;
+  title: string;
+  children: React.ReactNode;
+  seamless?: boolean;
 }
 
-const Card: React.FC<CardProps> = ({ title, children }: CardProps) => {
-    return (
-        <CardContainer>
-            <CardTitle>{title}</CardTitle>
-            {children}
-        </CardContainer>
-    );
+const Card: React.FC<CardProps> = ({ title, children, seamless }: CardProps) => {
+  return (
+    <CardContainer $seamless={seamless}>
+      <CardTitle $seamless={seamless}>{title}</CardTitle>
+      {children}
+    </CardContainer>
+  );
 };
 
 export default Card;
diff --git a/thallium-frontend/src/pages/LandingPage.tsx b/thallium-frontend/src/pages/LandingPage.tsx
index 526f590..10e6b2f 100644
--- a/thallium-frontend/src/pages/LandingPage.tsx
+++ b/thallium-frontend/src/pages/LandingPage.tsx
@@ -2,17 +2,27 @@ import Card from "../components/Card";
 
 const LandingPage = () => {
     return (
-        <Card title="Welcome to Thallium">
-            <p>
-                Thallium is a project being developed by Owl Corp.
-            </p>
-            <p>
-                Owl Corp team members can track development progress on the <a href="https://github.com/owl-corp/thallium">GitHub repository</a>.
-            </p>
-            <p>
-                LLAP. 🖖
-            </p>
-        </Card>
+        <>
+            <Card title="Welcome to Thallium">
+                <p>
+                    Thallium is a project being developed by Owl Corp.
+                </p>
+                <p>
+                    LLAP. 🖖
+                </p>
+            </Card>
+            <Card title="What is Thallium?" seamless>
+                <p>
+                    Thallium is a giveaway claiming tool for communities backed by Printful.
+                </p>
+            </Card>
+
+            <Card title="More Information">
+                <p>
+                    You can keep track of the development progress on the <a href="https://github.com/owl-corp/thallium">GitHub repository</a>.
+                </p>
+            </Card>
+        </>
     );
 };