Add dynamic screenshot for dotfiles

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:current-alpine AS deps
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+FROM node:alpine AS builder
+WORKDIR /app
+COPY . .
+COPY --from=deps /app/node_modules ./node_modules
+RUN yarn run build
+
+FROM nginx AS runner
+COPY --from=builder /app/out /usr/share/nginx/html
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

components/Avatar.js

@@ -0,0 +1,22 @@
+import React from "react";
+import styles from "./modules/Avatar.module.css";
+import PropTypes from "prop-types";
+
+export default function Avatar(props) {
+  return (
+    <img
+      className={styles[props.size]}
+      src={props.src}
+      alt="The one and only bongo cat!"
+    />
+  );
+}
+
+Avatar.propTypes = {
+  size: PropTypes.string.isRequired,
+  src: PropTypes.string
+};
+
+Avatar.defaultProps = {
+  src: "/images/bongo.png"
+};

components/Button.js

@@ -4,7 +4,7 @@ import styles from "./modules/Button.module.css";
 
 export default function Example(props) {
   return (
-    <button className={styles.example} {...props}>
+    <button className={styles.container} {...props}>
       {props.label}
     </button>
   );

components/CaseCard.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./modules/CaseCard.module.css";
+import Avatar from "./Avatar";
+
+export default function CaseCard(props) {
+  const study = props.study;
+
+  return (
+    <a className={styles.container} href={study.link}>
+      <img
+        className={`${styles.cover}`}
+        src={props.study.cover}
+        alt="The one and only bongo cat!"
+      />
+      <div className={styles.avatarHolder}>
+        <Avatar src={study.icon} size={"small"} />
+      </div>
+
+      <div className={styles.cardInfo}>
+        <b className={styles.title}>{study.title}</b>
+        <p className={styles.description}>{study.short_description}</p>
+        <b>{study.date}</b>
+      </div>
+    </a>
+  );
+}
+
+CaseCard.propTypes = {
+  study: PropTypes.object.isRequired,
+};

components/CaseSection.js

@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import React from "react";
+import styles from "./modules/CaseSection.module.css";
+import Section from "./Section";
+import CaseCard from "./CaseCard";
+
+export default function CaseSection(props) {
+  return (
+    <Section>
+      <div className={styles.bg} />
+      <div className={styles.content}>
+        <h1 className={styles.title}>Case Studies</h1>
+        <div className={styles.cardRow}>
+          {props.caseStudies.map((study) => (
+            <CaseCard key={study.title} study={props.caseStudies[props.caseStudies.indexOf(study)]} />
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+CaseSection.propTypes = {
+  caseStudies: PropTypes.arrayOf(PropTypes.object).isRequired,
+};

components/HomeSection.js

@@ -0,0 +1,45 @@
+import PropTypes from "prop-types";
+import React from "react";
+import Avatar from "../components/Avatar";
+import Infos from "../components/Infos";
+import Presentation from "../components/Presentation";
+import styles from "./modules/HomeSection.module.css";
+import Section from "./Section";
+import Button from "./Button";
+import DownIcon from "../public/icons/arrow-down.svg";
+
+export default function HomeSection(props) {
+  const person = props.person;
+  return (
+    <Section>
+      <div className={styles.bg} />
+
+      <div className={styles.flexCenter}>
+        <div className={styles.container}>
+          <Presentation
+            firstName={person.firstName}
+            lastName={person.lastName}
+            description={person.description}
+          />
+          <Avatar src={person.profilePicture} size={"big"} />
+
+          <div className={styles.infosHolder}>
+            <Infos infos={person.infos} />
+          </div>
+        </div>
+
+        <div className={styles.buttonContainer}>
+          <Button
+            label={"Case Studies"}
+            onClick={() => props.scrollFunction()}
+          />
+          <DownIcon className={styles.icon} />
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+HomeSection.propTypes = {
+  person: PropTypes.object.isRequired,
+};

components/Infos.js

@@ -0,0 +1,54 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./modules/Infos.module.css";
+import LocationIcon from "../public/icons/location.svg";
+import GithubIcon from "../public/icons/github.svg";
+import LinkedinIcon from "../public/icons/linkedin.svg";
+import MailIcon from "../public/icons/mail.svg";
+
+export default function Infos(props) {
+  const infos = props.infos;
+  return (
+    <div className={styles.container}>
+      <b className={styles.bracket}>{"{"}</b>
+      <a
+        className={`${styles.row} ${styles.location}`}
+        href={infos.location.link}
+        target="__blank"
+      >
+        <LocationIcon className={styles.icon} />
+        <b>{infos.location.value}</b>
+      </a>
+      <a
+        className={`${styles.row} ${styles.github}`}
+        href={infos.github.link}
+        target="__blank"
+      >
+        <GithubIcon className={styles.icon} />
+        <b>{infos.github.value}</b>
+      </a>
+      <a
+        className={`${styles.row} ${styles.linkedin}`}
+        href={infos.linkedin.link}
+        target="__blank"
+      >
+        <LinkedinIcon className={styles.icon} />
+        <b>{infos.linkedin.value}</b>
+      </a>
+      <a
+        className={`${styles.row} ${styles.email}`}
+        href={infos.email.link}
+        target="__blank"
+        type="email"
+      >
+        <MailIcon className={styles.icon} />
+        <b>{infos.email.value}</b>
+      </a>
+      <b className={styles.bracket}>{"}"}</b>
+    </div>
+  );
+}
+
+Infos.propTypes = {
+  infos: PropTypes.PropTypes.object.isRequired,
+};

components/Presentation.js

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./modules/Presentation.module.css";
+
+const propTypes = {};
+
+const defaultProps = {};
+
+export default function Presentation(props) {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.firstName}>{props.firstName}</h1>
+      <h1 className={styles.lastName}>{props.lastName}</h1>
+      <h3 className={styles.description}>// {props.description}</h3>
+    </div>
+  );
+}
+
+Presentation.propTypes = {
+  firstName: PropTypes.string.isRequired,
+  lastName: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+};
+Presentation.defaultProps = defaultProps;

components/Section.js

@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+export default function Section(props) {
+  return (
+    <section className="wrapper" {...props}>
+      {props.children}
+    </section>
+  );
+}
+
+Section.propTypes = {
+  children: PropTypes.node.isRequired,
+};

components/modules/Avatar.module.css

@@ -0,0 +1,21 @@
+.big {
+  width: 256px;
+  height: 256px;
+
+  border: 6px solid var(--dark);
+  border-radius: 16px;
+}
+
+.small {
+  width: 64px;
+  height: 64px;
+
+  border: 4px solid var(--lightDark);
+  border-radius: 8px;
+}
+
+@media screen and (max-width: 1440px) {
+  .big {
+    display: none;
+  }
+}

components/modules/Button.module.css

@@ -1,6 +1,32 @@
 .container {
-  background: #fafafa;
+  position: relative;
+  z-index: 1;
+
+  cursor: pointer;
+
+  outline: none;
+  border: none;
+
+  margin: 0 auto;
+
+  width: fit-content;
+
+  background-color: var(--quinary);
   border-radius: 5px;
   padding: 0.75rem;
-  font-size: 1.1rem;
+
+  font-family: var(--fontFamily);
+  font-weight: 900;
+  line-height: 23px;
+
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+
+  transform: translateY(0);
+  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
+}
+
+.container:hover {
+  background-color: var(--quaternary);
+  transform: translateY(-15%);
 }

components/modules/CaseCard.module.css

@@ -0,0 +1,46 @@
+.container {
+  height: 100%;
+
+  border-radius: 16px;
+  background-color: var(--lightDark);
+
+  cursor: pointer;
+  overflow: hidden;
+
+  transform: translateY(0);
+  transition: transform 0.3s ease-out;
+}
+
+.container:hover {
+  transform: translateY(-2%);
+}
+
+.cover {
+  height: 256px;
+  width: 100%;
+}
+
+.avatarHolder {
+  margin: -36px 0 0 2rem;
+}
+
+.cardInfo {
+  padding: 0.5rem 2rem 2rem 2rem;
+}
+
+.title {
+  font-size: 1.25em;
+  color: white;
+}
+
+.description {
+  width: auto;
+  max-width: 320px;
+  margin: 1rem 0;
+}
+
+@media screen and (max-width: 1440px) {
+  .container {
+    margin: 2rem 0;
+  }
+}

components/modules/CaseSection.module.css

@@ -0,0 +1,55 @@
+.content {
+  height: 100%;
+
+  position: relative;
+  z-index: 1;
+
+  padding: 4rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.title {
+  color: var(--primary);
+
+  margin-bottom: 8rem;
+}
+
+.cardRow {
+  width: 100%;
+
+  align-self: center;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+@media screen and (max-width: 1440px) {
+  .content {
+    padding: 2rem;
+  }
+
+  .cardRow {
+    flex-direction: column;
+  }
+
+  .title {
+    margin-bottom: 2rem;
+  }
+}
+
+@media screen and (max-width: 840px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .infosHolder {
+    margin: 2rem auto 8rem auto;
+  }
+}

components/modules/HomeSection.module.css

@@ -0,0 +1,61 @@
+.bg {
+  position: absolute;
+  right: 0%;
+  width: 50%;
+  height: 100%;
+  background-color: var(--lightDark);
+}
+
+.flexCenter {
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
+
+  margin: 1rem auto 0 auto;
+}
+
+.buttonContainer {
+  position: absolute;
+  bottom: 0%;
+
+  padding: 1rem;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+}
+
+@media screen and (max-width: 840px) {
+  .bg {
+    display: none;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .infosHolder {
+    margin: 2rem auto 8rem auto;
+  }
+}

components/modules/Infos.module.css

@@ -0,0 +1,50 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0 1rem 0.75rem;
+
+  transform: translateY(0);
+  transition: transform 0.3s ease;
+}
+
+.row:hover {
+  transform: translateY(-15%);
+}
+
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 1rem;
+}
+
+.row b:hover {
+  transition: color 0.3s ease;
+}
+
+.bracket,
+.email .icon,
+.email b:hover {
+  color: var(--primary);
+}
+
+.github .icon,
+.github b:hover {
+  color: var(--tertiary);
+}
+
+.linkedin .icon,
+.linkedin b:hover {
+  color: var(--quaternary);
+}
+
+.location .icon,
+.location b:hover {
+  color: var(--secondary);
+}

components/modules/Presentation.module.css

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.firstName {
+  color: var(--primary);
+}
+
+.lastName {
+  color: var(--secondary);
+}
+
+.description {
+  color: var(--tertiary);
+}

docker-compose.yml

@@ -0,0 +1,11 @@
+version: "3.2"
+
+services:
+    website:
+        build:
+            context: .
+            dockerfile: Dockerfile
+        container_name: "therbron.com"
+        ports:
+            - 8000:80
+        restart: unless-stopped

next.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  target: 'serverless',
+  target: "serverless",
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,

package.json

@@ -1,19 +1,32 @@
 {
   "name": "therbron.com",
   "version": "0.1.0",
+  "description": "Landing page for therbron.com",
+  "contributors": [
+    {
+        "name": "Romain Rousseau",
+        "email": "romain.rousseau5@gmail.com",
+        "url": "https://github.com/RmnRss"
+    },
+    {
+        "name": "Tanguy Herbron",
+        "email": "tanguy.herbron@outlook.com",
+        "url": "https://therbron.com"
+    }
+  ],
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build && next export",
     "start": "next start"
   },
   "dependencies": {
-    "next": "9.4.4",
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "next": "10.1.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "@svgr/webpack": "^5.4.0"
   },
   "devDependencies": {
-    "@svgr/webpack": "^5.4.0",
     "prettier": "^2.0.5",
     "prop-types": "^15.7.2"
   }

pages/index.js

@@ -1,12 +1,92 @@
 import Head from "next/head";
+import CaseSection from "../components/CaseSection";
+import HomeSection from "../components/HomeSection";
+import React from "react";
+
+export default function Home({ person, caseStudies }) {
+  const caseSectionRef = React.useRef();
+
+  function scrollToRef() {
+    console.log(caseSectionRef.current.offsetTop);
+    if (typeof window !== "undefined") {
+      console.log(caseSectionRef.current.offsetTop);
+      window.scrollTo(0, caseSectionRef.current.offsetTop);
+    }
+  }
 
-export default function Home() {
   return (
     <div className="container">
       <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
+        <title>Tanguy Herbron</title>
+        <link rel="icon" href="/favicon.svg" />
       </Head>
+
+      <HomeSection scrollFunction={scrollToRef.bind(this)} person={person} />
+
+      <div ref={caseSectionRef}>
+        <CaseSection caseStudies={caseStudies} />
+      </div>
     </div>
   );
 }
+
+export async function getStaticProps() {
+  const person = {
+    firstName: "Tanguy",
+    lastName: "Herbron",
+    description: "Full Stack Developer",
+    profilePicture: "/images/profile-picture.png",
+    infos: {
+      location: {
+        value: "Copenhagen, Denmark",
+        link: "https://www.visitcopenhagen.com/",
+      },
+      github: {
+        value: "/TanguyHerbron",
+        link: "https://github.com/TanguyHerbron",
+      },
+      linkedin: {
+        value: "Tanguy Herbron",
+        link: "https://linkedin.com/in/tanguy-herbron-5a3772150",
+      },
+      email: {
+        value: "tanguy.herbron@outlook.com",
+        link: "mailto:tanguy.herbron@outlook.com",
+      },
+    },
+  };
+
+  const caseStudies = [
+    {
+      title: "Dotfiles",
+      short_description:
+        "A set of Linux configuration files (dotfiles) I am using on a daily basis accross all of my machines. This includes configuration for my window manager, text editor and development environment. It also includes a set of custom scripts for various usages.",
+      cover: "https://github.com/TanguyHerbron/dotfiles/raw/master/Images/Screenshots/desktop.png",
+      icon: "/images/dotfiles/icon.svg",
+      link: "https://github.com/TanguyHerbron/dotfiles"
+    },
+    {
+      title: "Halia",
+      short_description:
+        "Personal infrastructure grouping self-hosted production ready services, tinkering environment and more. As of now, it includes Bitwarden, Nextcloud, Jellyfin and Focalboard just to name a few.",
+      cover: "/images/halia/cover.png",
+      icon: "/images/halia/logo.svg",
+      link: "https://wiki.halia.dev"
+    },
+    {
+      title: "Moodl",
+      short_description:
+        "Android application for easy cryptocurrency and ICO portfolio tracking, with additional information such as global market volumes, global market share and more.",
+      cover: "/images/moodl/cover.png",
+      icon: "/images/moodl/icon.png",
+      link: "https://github.com/TanguyHerbron/Moodl"
+    },
+  ];
+
+  return {
+    props: {
+      person: person,
+      caseStudies: caseStudies,
+    },
+  };
+}

public/favicon.svg

@@ -0,0 +1,209 @@
+<svg width="372" height="373" viewBox="0 0 372 373" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M201.5 181.046C234 158.546 268.5 173.546 268.5 173.546L263.5 147.046L193 104.546L138.5 128.546L116.5 190.046L126.5 289.546L261 333.046L275 310.546C275 310.546 236.687 310.789 215 296.546C193.313 282.303 179.332 263.046 177 242.046C174.668 221.046 180.393 195.658 201.5 181.046Z" fill="url(#paint0_linear)"/>
+<g filter="url(#filter0_di)">
+<path d="M221.5 137.046C221.5 137.046 207 123.988 180.5 127.546C150.5 131.574 136.271 156.546 130 175.046C123.729 193.546 130 227.046 150.5 253.546C180.529 292.364 228.5 312.301 262.5 310.546C346.5 306.211 359.5 256.546 359.5 256.546V331.046L262.5 379.546L107.5 355.546L43 262.546L37.5 153.546L77 82.0459L150.5 78.0459L224.5 115.046L221.5 137.046Z" fill="url(#paint1_linear)"/>
+</g>
+<path d="M206.405 199.177H176.998V162.647H224.685L233.428 167.412L235.018 181.706C235.018 181.706 235.018 190.441 221.506 190.441C207.995 190.441 206.405 199.177 206.405 199.177Z" fill="#D8D8D8"/>
+<path d="M147.591 199.177H176.998V162.647H129.311L120.568 167.412L118.978 181.706C118.978 181.706 118.978 190.441 132.49 190.441C146.001 190.441 147.591 199.177 147.591 199.177Z" fill="#D8D8D8"/>
+<path d="M191.304 162.647H176.998V189.647H186.535V179.324C186.535 170.588 191.304 162.647 191.304 162.647Z" fill="white"/>
+<path d="M162.692 162.647H176.998V189.647H167.46V179.324C167.46 170.588 162.692 162.647 162.692 162.647Z" fill="white"/>
+<rect x="122.952" y="154.706" width="108.091" height="7.94118" fill="#C4C4C4"/>
+<g filter="url(#filter1_d)">
+<rect x="115.004" y="142" width="123.987" height="12.7059" rx="2" fill="#C4C4C4"/>
+</g>
+<g filter="url(#filter2_d)">
+<path d="M202.431 179.324C197.662 188.059 197.662 199.177 197.662 199.177H176.998V192.824H192.894C192.894 192.824 192.894 181.309 193.688 177.735C195.278 170.588 197.662 165.824 202.431 162.647H231.838C242.171 162.647 250.118 191.235 227.07 191.235C216.737 191.235 214.353 186.471 214.353 183.294C214.353 183.294 214.353 176.941 219.916 177.735C217.532 181.706 219.122 185.677 224.685 185.677C231.044 185.677 232.633 182.5 232.633 176.941C232.633 172.971 228.659 168.206 219.916 168.206C211.174 168.206 207.2 170.588 202.431 179.324Z" fill="white"/>
+<path d="M151.566 179.324C156.335 188.059 156.335 199.177 156.335 199.177H176.998V192.824H161.103C161.103 192.824 161.103 181.309 160.308 177.735C158.719 170.588 156.335 165.824 151.566 162.647H122.161C111.829 162.647 103.882 191.235 126.929 191.235C137.261 191.235 139.645 186.471 139.645 183.294C139.645 183.294 139.645 176.941 134.082 177.735C136.466 181.706 134.877 185.677 129.313 185.677C122.956 185.677 121.366 182.5 121.366 176.941C121.366 172.971 125.34 168.206 134.082 168.206C142.824 168.206 146.798 170.588 151.566 179.324Z" fill="white"/>
+</g>
+<rect x="148.385" y="208.706" width="57.2249" height="176.294" fill="white"/>
+<path d="M167.46 219.826C167.46 218.07 168.884 216.647 170.64 216.647C172.395 216.647 173.819 218.07 173.819 219.826V385H167.46V219.826Z" fill="#C4C4C4"/>
+<path d="M180.177 219.826C180.177 218.07 181.601 216.647 183.356 216.647C185.112 216.647 186.536 218.07 186.536 219.826V385H180.177V219.826Z" fill="#C4C4C4"/>
+<path d="M192.894 219.826C192.894 218.07 194.317 216.647 196.073 216.647C197.829 216.647 199.252 218.07 199.252 219.826V385H192.894V219.826Z" fill="#C4C4C4"/>
+<path d="M154.744 219.826C154.744 218.07 156.167 216.647 157.923 216.647C159.679 216.647 161.102 218.07 161.102 219.826V385H154.744V219.826Z" fill="#C4C4C4"/>
+<g filter="url(#filter3_d)">
+<rect x="143.617" y="199.177" width="66.7623" height="9.52942" rx="1" fill="#C6C6C6"/>
+</g>
+<g clip-path="url(#clip1)">
+<g filter="url(#filter4_di)">
+<path d="M221.5 137.046C221.5 137.046 207 123.988 180.5 127.546C150.5 131.574 136.271 156.546 130 175.046C123.729 193.546 130 227.046 150.5 253.546C180.529 292.364 228.5 312.301 262.5 310.546C346.5 306.211 359.5 256.546 359.5 256.546V331.046L262.5 379.546L107.5 355.546L43 262.546L37.5 153.546L77 82.0459L150.5 78.0459L224.5 115.046L221.5 137.046Z" fill="url(#paint2_linear)"/>
+</g>
+</g>
+<g filter="url(#filter5_di)">
+<path d="M142.5 106.546C154.992 105.327 174.5 109.546 174.5 109.546L169.5 86.5459L29.5 95.5459L-18 196.046L12.5 320.546L106 380.546H232L241.5 364.046C241.5 364.046 193.237 364.024 165.5 352.546C126.917 336.58 103.175 312.046 86 281.046C68.0892 248.718 60.5 209.546 68 179.046C75.5 148.546 96.5 111.034 142.5 106.546Z" fill="url(#paint3_linear)"/>
+</g>
+<g filter="url(#filter6_di)">
+<path d="M63.5 129.546C35.6842 150.546 -8.51139 212.046 39.5 300.046C15.5663 293.112 -11 261.046 -11 261.046C-11 261.046 -10.9288 191.894 2.5 150.546C16.6545 106.964 60.5 48.5459 60.5 48.5459L272.5 21.0459C272.5 21.0459 317.5 39.0459 339.5 83.5459C355.859 116.635 359.5 153.52 336.5 173.546C318 189.654 285.677 185.046 267.5 173.546C243 158.046 232.163 140.859 205.5 126.046C160.5 101.046 107.771 96.1226 63.5 129.546Z" fill="url(#paint4_linear)"/>
+</g>
+<g filter="url(#filter7_di)">
+<path d="M119 57.0461C46.9196 62.6571 4.9999 140.046 0.999897 166.546C-28.5001 278.5 -29.5001 -1.93968 50.9999 -33.5C103.5 -54.0828 244 -5.12453 294.5 35.0459C316.5 52.5459 329 78.0459 313 94.5461C303.824 105.046 282 104.198 257.5 94.5461C229 83.3188 191.08 51.4351 119 57.0461Z" fill="url(#paint5_linear)"/>
+</g>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="-11" y="21" width="364" height="280">
+<path d="M63.5 129.546C35.6842 150.546 -8.51139 212.046 39.5 300.046C15.5663 293.112 -11 261.046 -11 261.046C-11 261.046 -10.9288 191.894 2.5 150.546C16.6545 106.964 60.5 48.5459 60.5 48.5459L272.5 21.0459C272.5 21.0459 317.5 39.0459 339.5 83.5459C355.859 116.635 359.5 153.52 336.5 173.546C318 189.654 285.677 185.046 267.5 173.546C243 158.046 232.163 140.859 205.5 126.046C160.5 101.046 107.771 96.1226 63.5 129.546Z" fill="url(#paint6_linear)"/>
+</mask>
+<g mask="url(#mask0)">
+<g filter="url(#filter8_di)">
+<path d="M310.5 153C305.016 156.383 297.682 156 294 153C280.5 142 262.024 129 258 135.5C255.524 139.5 277.5 156 243 156C208.5 156 258 177.8 258 179C258 180.2 285.667 188.5 299.5 192.5C299.5 192.5 327.447 184.384 339.5 171.5C354 156 352.5 129.5 352.5 129.5C352.5 129.5 351.962 134.774 349 135.5C344.022 136.721 342.5 125.5 339.5 127.5C335.282 130.312 345.76 140.257 341 142C335.352 144.068 328.164 142.271 324.5 137.5C320.332 132.072 304.5 115.5 296.5 117C288.635 118.475 296.446 123 306 135.5C312.825 144.429 314.553 150.5 310.5 153Z" fill="url(#paint7_linear)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_di" x="35.5" y="76.0459" width="334" height="311.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="8" dy="6"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-10" dy="-4"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter1_d" x="111.004" y="142" width="131.987" height="20.7059" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter2_d" x="108" y="162.647" width="138" height="44.5294" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter3_d" x="139.617" y="199.177" width="74.7623" height="17.5294" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter4_di" x="35.5" y="76.0459" width="334" height="311.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="8" dy="6"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-10" dy="-4"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter5_di" x="-20" y="84.5459" width="271.5" height="304" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="8" dy="6"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-10" dy="-2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter6_di" x="-13" y="19.0459" width="380.76" height="293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="11" dy="8"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-3" dy="-11"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter7_di" x="-17.3762" y="-40.3613" width="343.606" height="244.157" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="4" dy="9"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-12"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.95 0 0 0 0 0.95 0 0 0 0 0.95 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter8_di" x="226.779" y="116.904" width="129.766" height="83.5956" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<linearGradient id="paint0_linear" x1="195.75" y1="104.546" x2="196" y2="289.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#022653"/>
+<stop offset="1" stop-color="#1971A7"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="198.5" y1="78.0459" x2="198.5" y2="379.546" gradientUnits="userSpaceOnUse">
+<stop stop-color="#022457"/>
+<stop offset="1" stop-color="#2D98C6"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="198.5" y1="78.0459" x2="198.5" y2="379.546" gradientUnits="userSpaceOnUse">
+<stop stop-color="#022457"/>
+<stop offset="1" stop-color="#2D98C6"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="1" y1="121.5" x2="92" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#03285B"/>
+<stop offset="1" stop-color="#1878A8"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="9.5" y1="101" x2="341.5" y2="176.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#096181"/>
+<stop offset="1" stop-color="#0E4B7C"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="160.615" y1="-0.999995" x2="287.5" y2="108.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0C6C92"/>
+<stop offset="1" stop-color="#2576A5"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="9.5" y1="101" x2="341.5" y2="176.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#098179"/>
+<stop offset="1" stop-color="#0E6F7C"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="273.5" y1="115" x2="298.5" y2="192.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.0001" stop-color="white" stop-opacity="0.795708"/>
+<stop offset="0.380208" stop-color="white" stop-opacity="0.526042"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="372" height="373" rx="186" fill="white"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="318.95" height="165.546" fill="white" transform="translate(40.5503 214)"/>
+</clipPath>
+</defs>
+</svg>

public/images/halia/logo.svg

@@ -0,0 +1,210 @@
+<svg width="436" height="437" viewBox="0 0 436 437" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="436" height="437" fill="#061520"/>
+<g clip-path="url(#clip0)">
+<path d="M233.5 213.046C266 190.546 300.5 205.546 300.5 205.546L295.5 179.046L225 136.546L170.5 160.546L148.5 222.046L158.5 321.546L293 365.046L307 342.546C307 342.546 268.687 342.789 247 328.546C225.313 314.303 211.332 295.046 209 274.046C206.668 253.046 212.393 227.658 233.5 213.046Z" fill="url(#paint0_linear)"/>
+<g filter="url(#filter0_di)">
+<path d="M253.5 169.046C253.5 169.046 239 155.988 212.5 159.546C182.5 163.574 168.271 188.546 162 207.046C155.729 225.546 162 259.046 182.5 285.546C212.529 324.364 260.5 344.301 294.5 342.546C378.5 338.211 391.5 288.546 391.5 288.546V363.046L294.5 411.546L139.5 387.546L75 294.546L69.5 185.546L109 114.046L182.5 110.046L256.5 147.046L253.5 169.046Z" fill="url(#paint1_linear)"/>
+</g>
+<path d="M238.405 231.176H208.998V194.647H256.685L265.428 199.412L267.018 213.706C267.018 213.706 267.018 222.441 253.506 222.441C239.995 222.441 238.405 231.176 238.405 231.176Z" fill="#D8D8D8"/>
+<path d="M179.591 231.176H208.998V194.647H161.311L152.568 199.412L150.978 213.706C150.978 213.706 150.978 222.441 164.49 222.441C178.001 222.441 179.591 231.176 179.591 231.176Z" fill="#D8D8D8"/>
+<path d="M223.304 194.647H208.998V221.647H218.535V211.324C218.535 202.588 223.304 194.647 223.304 194.647Z" fill="white"/>
+<path d="M194.692 194.647H208.998V221.647H199.46V211.324C199.46 202.588 194.692 194.647 194.692 194.647Z" fill="white"/>
+<rect x="154.952" y="186.706" width="108.091" height="7.94118" fill="#C4C4C4"/>
+<g filter="url(#filter1_d)">
+<rect x="147.004" y="174" width="123.987" height="12.7059" rx="2" fill="#C4C4C4"/>
+</g>
+<g filter="url(#filter2_d)">
+<path d="M234.431 211.324C229.662 220.059 229.662 231.176 229.662 231.176H208.998V224.824H224.894C224.894 224.824 224.894 213.309 225.688 209.735C227.278 202.588 229.662 197.824 234.431 194.647H263.838C274.171 194.647 282.118 223.235 259.07 223.235C248.737 223.235 246.353 218.471 246.353 215.294C246.353 215.294 246.353 208.941 251.916 209.735C249.532 213.706 251.122 217.676 256.685 217.676C263.044 217.676 264.633 214.5 264.633 208.941C264.633 204.971 260.659 200.206 251.916 200.206C243.174 200.206 239.2 202.588 234.431 211.324Z" fill="white"/>
+<path d="M183.566 211.324C188.335 220.059 188.335 231.176 188.335 231.176H208.998V224.824H193.103C193.103 224.824 193.103 213.309 192.308 209.735C190.719 202.588 188.335 197.824 183.566 194.647H154.161C143.829 194.647 135.882 223.235 158.929 223.235C169.261 223.235 171.645 218.471 171.645 215.294C171.645 215.294 171.645 208.941 166.082 209.735C168.466 213.706 166.877 217.676 161.313 217.676C154.956 217.676 153.366 214.5 153.366 208.941C153.366 204.971 157.34 200.206 166.082 200.206C174.824 200.206 178.798 202.588 183.566 211.324Z" fill="white"/>
+</g>
+<rect x="180.385" y="240.706" width="57.2249" height="176.294" fill="white"/>
+<path d="M199.46 251.826C199.46 250.07 200.884 248.647 202.64 248.647V248.647C204.395 248.647 205.819 250.07 205.819 251.826V417H199.46V251.826Z" fill="#C4C4C4"/>
+<path d="M212.177 251.826C212.177 250.07 213.601 248.647 215.356 248.647V248.647C217.112 248.647 218.536 250.07 218.536 251.826V417H212.177V251.826Z" fill="#C4C4C4"/>
+<path d="M224.894 251.826C224.894 250.07 226.317 248.647 228.073 248.647V248.647C229.829 248.647 231.252 250.07 231.252 251.826V417H224.894V251.826Z" fill="#C4C4C4"/>
+<path d="M186.744 251.826C186.744 250.07 188.167 248.647 189.923 248.647V248.647C191.679 248.647 193.102 250.07 193.102 251.826V417H186.744V251.826Z" fill="#C4C4C4"/>
+<g filter="url(#filter3_d)">
+<rect x="175.617" y="231.176" width="66.7623" height="9.52942" rx="1" fill="#C6C6C6"/>
+</g>
+<g clip-path="url(#clip1)">
+<g filter="url(#filter4_di)">
+<path d="M253.5 169.046C253.5 169.046 239 155.988 212.5 159.546C182.5 163.574 168.271 188.546 162 207.046C155.729 225.546 162 259.046 182.5 285.546C212.529 324.364 260.5 344.301 294.5 342.546C378.5 338.211 391.5 288.546 391.5 288.546V363.046L294.5 411.546L139.5 387.546L75 294.546L69.5 185.546L109 114.046L182.5 110.046L256.5 147.046L253.5 169.046Z" fill="url(#paint2_linear)"/>
+</g>
+</g>
+<g filter="url(#filter5_di)">
+<path d="M174.5 138.546C186.992 137.327 206.5 141.546 206.5 141.546L201.5 118.546L61.5 127.546L14 228.046L44.5 352.546L138 412.546H264L273.5 396.046C273.5 396.046 225.237 396.024 197.5 384.546C158.917 368.58 135.175 344.046 118 313.046C100.089 280.718 92.5 241.546 100 211.046C107.5 180.546 128.5 143.034 174.5 138.546Z" fill="url(#paint3_linear)"/>
+</g>
+<g filter="url(#filter6_di)">
+<path d="M95.5 161.546C67.6842 182.546 23.4886 244.046 71.5 332.046C47.5663 325.112 21 293.046 21 293.046C21 293.046 21.0712 223.894 34.5 182.546C48.6545 138.964 92.5 80.5459 92.5 80.5459L304.5 53.0459C304.5 53.0459 349.5 71.0459 371.5 115.546C387.859 148.635 391.5 185.52 368.5 205.546C350 221.654 317.677 217.046 299.5 205.546C275 190.046 264.163 172.859 237.5 158.046C192.5 133.046 139.771 128.123 95.5 161.546Z" fill="url(#paint4_linear)"/>
+</g>
+<g filter="url(#filter7_di)">
+<path d="M151 89.0461C78.9196 94.6571 36.9999 172.046 32.9999 198.546C3.4999 310.5 2.49991 30.0603 82.9999 -1.50002C135.5 -22.0828 276 26.8755 326.5 67.0459C348.5 84.5459 361 110.046 345 126.546C335.824 137.046 314 136.198 289.5 126.546C261 115.319 223.08 83.4351 151 89.0461Z" fill="url(#paint5_linear)"/>
+</g>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="21" y="53" width="364" height="280">
+<path d="M95.5 161.546C67.6842 182.546 23.4886 244.046 71.5 332.046C47.5663 325.112 21 293.046 21 293.046C21 293.046 21.0712 223.894 34.5 182.546C48.6545 138.964 92.5 80.5459 92.5 80.5459L304.5 53.0459C304.5 53.0459 349.5 71.0459 371.5 115.546C387.859 148.635 391.5 185.52 368.5 205.546C350 221.654 317.677 217.046 299.5 205.546C275 190.046 264.163 172.859 237.5 158.046C192.5 133.046 139.771 128.123 95.5 161.546Z" fill="url(#paint6_linear)"/>
+</mask>
+<g mask="url(#mask0)">
+<g filter="url(#filter8_di)">
+<path d="M342.5 185C337.016 188.383 329.682 188 326 185C312.5 174 294.024 161 290 167.5C287.524 171.5 309.5 188 275 188C240.5 188 290 209.8 290 211C290 212.2 317.667 220.5 331.5 224.5C331.5 224.5 359.447 216.384 371.5 203.5C386 188 384.5 161.5 384.5 161.5C384.5 161.5 383.962 166.774 381 167.5C376.022 168.721 374.5 157.5 371.5 159.5C367.282 162.312 377.76 172.257 373 174C367.352 176.068 360.164 174.271 356.5 169.5C352.332 164.072 336.5 147.5 328.5 149C320.635 150.475 328.446 155 338 167.5C344.825 176.429 346.553 182.5 342.5 185Z" fill="url(#paint7_linear)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_di" x="67.5" y="108.046" width="334" height="311.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="8" dy="6"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-10" dy="-4"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter1_d" x="143.004" y="174" width="131.987" height="20.7059" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter2_d" x="140" y="194.647" width="138" height="44.5294" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter3_d" x="171.617" y="231.176" width="74.7623" height="17.5294" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter4_di" x="67.5" y="108.046" width="334" height="311.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="8" dy="6"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-10" dy="-4"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter5_di" x="12" y="116.546" width="271.5" height="304" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="8" dy="6"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-10" dy="-2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter6_di" x="19" y="51.0459" width="380.76" height="293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="11" dy="8"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-3" dy="-11"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter7_di" x="14.6238" y="-8.36133" width="343.606" height="244.157" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="4" dy="9"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-12"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.95 0 0 0 0 0.95 0 0 0 0 0.95 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter8_di" x="258.779" y="148.904" width="129.766" height="83.5956" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<linearGradient id="paint0_linear" x1="227.75" y1="136.546" x2="228" y2="321.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#022653"/>
+<stop offset="1" stop-color="#1971A7"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="230.5" y1="110.046" x2="230.5" y2="411.546" gradientUnits="userSpaceOnUse">
+<stop stop-color="#022457"/>
+<stop offset="1" stop-color="#2D98C6"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="230.5" y1="110.046" x2="230.5" y2="411.546" gradientUnits="userSpaceOnUse">
+<stop stop-color="#022457"/>
+<stop offset="1" stop-color="#2D98C6"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="33" y1="153.5" x2="124" y2="368" gradientUnits="userSpaceOnUse">
+<stop stop-color="#03285B"/>
+<stop offset="1" stop-color="#1878A8"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="41.5" y1="133" x2="373.5" y2="208.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#096181"/>
+<stop offset="1" stop-color="#0E4B7C"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="192.615" y1="31" x2="319.5" y2="140.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0C6C92"/>
+<stop offset="1" stop-color="#2576A5"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="41.5" y1="133" x2="373.5" y2="208.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#098179"/>
+<stop offset="1" stop-color="#0E6F7C"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="305.5" y1="147" x2="330.5" y2="224.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.0001" stop-color="white" stop-opacity="0.795708"/>
+<stop offset="0.380208" stop-color="white" stop-opacity="0.526042"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect x="32" y="32" width="372" height="373" rx="186" fill="white"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="318.95" height="165.546" fill="white" transform="translate(72.5503 246)"/>
+</clipPath>
+</defs>
+</svg>

public/images/moodl.svg

@@ -1,9 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="512px" height="512px" viewBox="0 0 5120 5120" preserveAspectRatio="xMidYMid meet">
-<g id="layer101" fill="#ffffff" stroke="none">
- <path d="M742 4328 c-9 -9 -12 -423 -12 -1800 0 -1775 0 -1788 20 -1808 19 -19 33 -20 524 -20 277 0 512 3 521 6 21 8 37 42 96 197 36 95 49 143 47 172 l-3 40 -115 60 c-151 78 -236 139 -341 246 -244 244 -379 581 -421 1045 -21 232 16 523 97 767 72 218 159 368 299 515 l86 91 0 226 0 226 -25 24 -24 25 -369 0 c-273 0 -371 -3 -380 -12z"/>
- <path d="M3605 4305 l-25 -24 0 -226 0 -226 86 -91 c140 -147 221 -287 296 -508 83 -247 121 -538 100 -774 -42 -464 -177 -801 -421 -1045 -105 -107 -190 -168 -341 -246 l-115 -60 -3 -40 c-2 -30 11 -77 48 -175 62 -160 74 -186 95 -194 9 -3 244 -6 521 -6 491 0 505 1 524 20 20 20 20 33 20 1808 0 1377 -3 1791 -12 1800 -9 9 -107 12 -380 12 l-369 0 -24 -25z"/>
- <path d="M2385 3943 c-332 -39 -558 -144 -752 -347 -146 -152 -238 -322 -293 -541 -41 -163 -54 -304 -47 -533 8 -278 51 -468 148 -657 167 -327 456 -533 844 -601 137 -24 423 -24 560 0 446 78 758 337 903 747 98 279 119 665 52 986 -82 395 -317 701 -650 844 -176 76 -363 110 -591 108 -79 -1 -157 -4 -174 -6z m368 -630 c176 -83 270 -267 299 -585 13 -150 0 -348 -32 -473 -75 -295 -269 -445 -525 -408 -208 30 -338 177 -401 453 -21 93 -30 376 -15 495 37 292 153 475 340 537 43 14 80 17 161 15 94 -2 112 -6 173 -34z"/>
- </g>
-
-</svg>

public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

styles/global.css

@@ -23,23 +23,54 @@
   box-sizing: border-box;
 }
 
+html,
 body {
   background: var(--dark);
   color: var(--light);
   font-family: var(--fontFamily);
+  scroll-behavior: smooth;
 }
 
 .wrapper {
+  position: relative;
+  height: 100vh;
   min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
 
 h1 {
   margin: 0;
-  line-height: 1.15;
+  font-weight: 900;
+  line-height: 1.35;
   font-size: 4rem;
+  letter-spacing: 0.02em;
+}
+
+h3 {
+  margin-top: 1rem;
+  font-weight: 600;
+  line-height: 1.35;
+  font-size: 1.5rem;
+  letter-spacing: 0.02em;
+}
+
+a,
+p {
+  font-style: normal;
+  font-size: 1em;
+  color: var(--light);
+
+  line-height: 1.35;
+}
+
+a,
+a:hover,
+a:visited {
+  text-decoration: none;
+  color: none;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }