feat: landing page stuff

package.json

@@ -12,6 +12,7 @@
     "framer-motion": "^11.3.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.1",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.3.3"

src/App.tsx

@@ -7,6 +7,7 @@ import LandingPage from '@pages/_landing/LandingPage';
 import LendPage from '@pages/_lend/LendPage';
 import LiquidatePage from '@pages/_liquidate/LiquidatePage';
 import { WalletProvider } from './stellar-wallet';
+import Footer from '@components/Footer';
 
 const PageWrapper = () => {
   const { pathname } = useLocation();
@@ -19,6 +20,7 @@ const PageWrapper = () => {
       <main className={`max-w-screen ${isIndex ? 'w-[74rem]' : 'w-256'}`}>
         <Outlet />
       </main>
+      <Footer />
     </body>
   );
 };

src/components/Button.tsx

@@ -28,7 +28,7 @@ export const LinkButton = ({ to, className = '', children }: PropsWithChildren<L
 );
 
 export const NativeLinkButton = ({ to, className = '', children }: PropsWithChildren<LinkButtonProps>) => (
-  <a href={to} className={`${buttonStyle} ${className}`}>{children}</a>
+  <a href={to} target="_blank" className={`${buttonStyle} ${className}`}>{children}</a>
 );
 
 export const SelectButtonWrapper = ({ children }: PropsWithChildren) => (

src/components/Footer.tsx

@@ -0,0 +1,10 @@
+import logo from '/public/laina_v3_shrinked.png';
+
+export default function Footer() {
+  return (
+    <footer className="bg-black h-40 flex flex-col items-center justify-center">
+      <p className="text-white w-[72rem] max-w-screen text-lg">This website does not use cookies.</p>
+      <p className="text-white w-[72rem] max-w-screen text-sm">&copy; Copyright 2024, Laina Protocol</p>
+    </footer>
+  )
+}

src/pages/_landing/LandingPage.tsx

@@ -1,3 +1,4 @@
+import { FaDiscord, FaGithub } from "react-icons/fa";
 import { LinkButton, NativeLinkButton } from '@components/Button';
 import CardsImage from '@images/cards.jpg';
 import Teemu from '@images/teemu.jpg';
@@ -7,14 +8,14 @@ const team = [
   {
     image: Teemu.src,
     name: "Teemu Hynnä",
-    discord: "",
-    github: "https://github.com/teolhyn"
+    discord: "h0suja",
+    github: "teolhyn"
   },
   {
     image: Konsta.src,
     name: "Konsta Purtsi",
-    discord: "",
-    github: "https://github.com/kovipu"
+    discord: "konsta",
+    github: "kovipu"
   }
 ]
 
@@ -33,9 +34,9 @@ const LandingPage = () => (
     </section>
     <section className="border-t-4 flex flex-row my-14">
       <div className="w-1/2 pt-14 pr-14 border-r-4">
-        <p className="text-2xl leading-relaxed mb-14">Laina is currently in the early development stage and is only operating on the Stellar Testnet.</p>
-        <p className="text-2xl leading-relaxed mb-14">Now that you're here, take a peek.</p>
-        <LinkButton to="/lend">Open the app</LinkButton>
+        <p className="text-2xl leading-relaxed mb-8">Laina is currently in the early development stage and is only operating on the Stellar Testnet.</p>
+        <p className="text-2xl leading-relaxed mb-8">Now that you're here, take a peek.</p>
+        <LinkButton to="/lend" className="text-lg">Open the app</LinkButton>
       </div>
       <div className="w-1/2 pt-14 pl-14">
         <p className="text-lg mb-8 leading-relaxed">Laina is a low fee, trustless, and easy-to-use decentralized loan platform.</p>
@@ -44,7 +45,7 @@ const LandingPage = () => (
         </p>
       </div>
     </section>
-    <section className="flex flex-row my-14">
+    <section className="flex flex-row my-20">
       <div className="w-1/2">
         <h3 className="text-[42px] font-bold mb-14">The Team</h3>
         <div className="flex flex-row">
@@ -54,8 +55,8 @@ const LandingPage = () => (
         </div>
       </div>
       <div className="w-1/2 p-14 my-auto">
-        <p className="text-xl mb-14">Got a question? Ask us in the Stellar Dev Discord!</p>
-        <NativeLinkButton to="https://discord.com/invite/stellardev">Join Stellar Disord</NativeLinkButton>
+        <p className="text-xl mb-8 leading-relaxed">Got a question? Ask us in the Stellar Dev Discord!</p>
+        <NativeLinkButton to="https://discord.com/invite/stellardev" className="text-lg">Join Stellar Discord</NativeLinkButton>
       </div>
     </section>
   </>
@@ -68,10 +69,20 @@ interface TeamMemberProps {
   github: string;
 }
 
-const TeamMember = ({ image, name }: TeamMemberProps) => (
+const TeamMember = ({ image, name, discord, github }: TeamMemberProps) => (
   <div className="mr-14">
-    <img src={image} className="aspect-square rounded grayscale mb-8" />
+    <div className="aspect-square rounded mb-8 overflow-hidden">
+      <img src={image} className="" />
+    </div>
     <p className="text-xl font-semibold">{name}</p>
+    <span className="flex flex-row items-center text-lg my-2">
+      <FaDiscord size="2rem" className="mr-2" />
+      {discord}
+    </span>
+    <span className="flex flex-row items-center text-lg my-2">
+      <FaGithub size="2rem" className="mr-2" />
+      {github}
+    </span>
   </div>
 )