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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Outlet, RouterProvider, createBrowserRouter, useLocation } from 'react-router-dom';
 
+import Footer from '@components/Footer';
 import Nav from '@components/Nav';
 import BorrowPage from '@pages/_borrow/BorrowPage';
 import LandingPage from '@pages/_landing/LandingPage';
@@ -19,6 +20,7 @@ const PageWrapper = () => {
       <main className={`max-w-screen ${isIndex ? 'w-[74rem]' : 'w-256'}`}>
         <Outlet />
       </main>
+      <Footer />
     </body>
   );
 };

src/components/Button.tsx

@@ -6,14 +6,10 @@ export interface ButtonProps {
   className?: string;
 }
 
-const buttonStyle = "bg-black font-semibold text-white rounded-full px-8 py-2 hover:bg-grey-dark transition"
+const buttonStyle = 'bg-black font-semibold text-white rounded-full px-8 py-2 hover:bg-grey-dark transition';
 
 export const Button = ({ onClick, className = '', children }: PropsWithChildren<ButtonProps>) => (
-  <button
-    type="button"
-    onClick={onClick}
-    className={`${buttonStyle} ${className}`}
-  >
+  <button type="button" onClick={onClick} className={`${buttonStyle} ${className}`}>
     {children}
   </button>
 );
@@ -24,11 +20,15 @@ export interface LinkButtonProps {
 }
 
 export const LinkButton = ({ to, className = '', children }: PropsWithChildren<LinkButtonProps>) => (
-  <Link to={to} className={`${buttonStyle} ${className}`}>{children}</Link>
+  <Link to={to} className={`${buttonStyle} ${className}`}>
+    {children}
+  </Link>
 );
 
 export const NativeLinkButton = ({ to, className = '', children }: PropsWithChildren<LinkButtonProps>) => (
-  <a href={to} className={`${buttonStyle} ${className}`}>{children}</a>
+  <a href={to} target="_blank" className={`${buttonStyle} ${className}`} rel="noreferrer">
+    {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,22 +1,23 @@
 import { LinkButton, NativeLinkButton } from '@components/Button';
 import CardsImage from '@images/cards.jpg';
-import Teemu from '@images/teemu.jpg';
 import Konsta from '@images/konsta.jpeg';
+import Teemu from '@images/teemu.jpg';
+import { FaDiscord, FaGithub } from 'react-icons/fa';
 
 const team = [
   {
     image: Teemu.src,
-    name: "Teemu Hynnä",
-    discord: "",
-    github: "https://github.com/teolhyn"
+    name: 'Teemu Hynnä',
+    discord: 'h0suja',
+    github: 'teolhyn',
   },
   {
     image: Konsta.src,
-    name: "Konsta Purtsi",
-    discord: "",
-    github: "https://github.com/kovipu"
-  }
-]
+    name: 'Konsta Purtsi',
+    discord: 'konsta',
+    github: 'kovipu',
+  },
+];
 
 const LandingPage = () => (
   <>
@@ -33,29 +34,40 @@ 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>
+        <p className="text-lg mb-8 leading-relaxed">
+          Laina is a low fee, trustless, and easy-to-use decentralized loan platform.
+        </p>
         <p className="text-lg leading-relaxed">
-          We are focusing on making a simple and efficient DeFi product, where there is minimal need for token swapping or liquidity other than what is used for lending. Our vision is to change DeFi by making it accessible and understandable for everyone, regardless of their technical knowledge or financial status. By providing efficient single-token lending pools, we eliminate the complexities often associated with multi-token systems.
+          We are focusing on making a simple and efficient DeFi product, where there is minimal need for token swapping
+          or liquidity other than what is used for lending. Our vision is to change DeFi by making it accessible and
+          understandable for everyone, regardless of their technical knowledge or financial status. By providing
+          efficient single-token lending pools, we eliminate the complexities often associated with multi-token systems.
         </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">
           {team.map((member) => (
-            <TeamMember {...member} />
+            <TeamMember key={member.name} {...member} />
           ))}
         </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,11 +80,21 @@ 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} alt={name} />
+    </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>
-)
+);
 
 export default LandingPage;