From e16647b736cd55d226319dd6bf033e578cb71be1 Mon Sep 17 00:00:00 2001
From: Toastie <toastie@toastielab.xyz>
Date: Wed, 18 Oct 2023 05:17:33 -0700
Subject: [PATCH] Upload files to "src/components"

---
 src/components/Footer.jsx | 66 ++++++++++++++++++++++++++++
 src/components/Hero.jsx   | 91 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 157 insertions(+)
 create mode 100644 src/components/Footer.jsx
 create mode 100644 src/components/Hero.jsx

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..5b4f28e
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,66 @@
+import { BygulIcon } from "../assets/icons/BygulIcon";
+import { DragonsChildLogo } from "../assets/logos/DragonsChild";
+
+export const Footer = () => {
+  return (
+    <footer>
+      <div className="pt-10  lg:pt-20 lg:pb-12 bg-customDarkBg1 radius-for-skewed ">
+        <div className="container mx-auto px-4 w-4/5 md:w-11/12 lg:w-10/12 xl:w-4/5 2xl:w-2/3">
+          <div className="flex flex-wrap">
+            <div className="w-full lg:w-1/3 mb-16 lg:mb-0">
+              <div className="flex justify-center lg:justify-start items-center grow basis-0">
+                <div className="text-white mr-2 text-6xl">
+                  <DragonsChildLogo />
+                </div>
+                <div className="text-white font-['Inter'] font-bold text-xl">
+                  DragonsChild
+                </div>
+              </div>
+              <p className="mb-10 mt-4 sm:w-[22rem] lg:w-[20rem] xl:w-[24rem] text-gray-400 leading-loose text-center lg:text-left mx-auto lg:mx-0">
+              Dragons Child Studios: Creating fun stuff since 2023!
+              </p>
+              <div className="w-36 mx-auto lg:mx-0">
+                <a
+                  className="inline-block w-10  h-10 mr-2 p-2 bg-customDarkBg2 custom-border-gray  hover:bg-gray-700 rounded-xl"
+                  href="https://social.valkyriecoms.com/@Dragonschildhosting"
+                >
+                  <BygulIcon />
+                </a>
+              </div>
+            </div>
+            <div className="w-full lg:w-1/2  lg:pl-16 hidden lg:flex flex-wrap justify-between">
+              <div className="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
+                <h3 className="mb-6 text-2xl font-bold text-white">Other Dragons child projects</h3>
+                <ul>
+                  <li className="mb-4">
+                    <a className="text-gray-400 hover:text-gray-300" href="https://toastielab.dev" aria-label="" >
+                      Toastielab
+                    </a>
+                  </li>
+                  <li className="mb-4">
+                    <a className="text-gray-400 hover:text-gray-300" href="https://social.valkyriecoms.com/" aria-label="" >
+                      Valkyriecoms
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <div className="w-full md:w-1/2 lg:w-auto">
+                <h3 className="mb-6 text-2xl font-bold text-white">Company</h3>
+                <ul>
+                  <li>
+                    <a className="text-gray-400 hover:text-gray-300" href="mailto:support@dragonschildstudios.com" aria-label="" >
+                      Contact Us
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <p className="lg:text-center text-sm text-gray-400 border-t border-[rgb(255,255,255,0.2)] pt-12 mt-16 hidden lg:block">
+            &copy; 2023 Dragons child studios.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
\ No newline at end of file
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
new file mode 100644
index 0000000..ba85189
--- /dev/null
+++ b/src/components/Hero.jsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+import { InvitationModal } from "./InvitationModal";
+import dashboard from "../assets/images/dashboard.png";
+
+export const Hero = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <section
+      className="w-screen  flex justify-center items-center bg-customDarkBg1 mb-[28vw] md:mb-[18vw] lg:mb-[10vw] xl:mb-[13vw] 2xl:mb-60 hero-bg-gradient pb-24 sm:pb-32 md:pb-44 lg:pb-0"
+      id="home"
+    >
+      <div className="w-full md:w-[800px] xl:w-[900px] flex flex-col justify-center items-center pt-10 md:pt-12 lg:pt-16 text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="text-customSecondary text-sm sm:text-base  mb-6 sm:mt-32 mt-16  font-bold">
+            DragonsChild
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.05 }}
+        >
+          <div className="text-5xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide  text-white  px-8 sm:px-8 md:px-20 lg:px-4">
+            <span className="inline md:hidden">The Fun</span>{" "}
+            <span className="hidden md:inline">The Fun</span>
+          </div>
+          <div className="mt-2 sm:mt-2 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl font-bold tracking-wide  text-white  px-8 sm:px-20 md:px-24 lg:px-24">
+            Company
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+        >
+          <div className="text-customGrayText text-sm lg:text-base xl:text-lg sm:text-base mt-10 px-12 sm:px-48 ">
+            The company that likes to have fun
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.15 }}
+        >
+          <div className="flex flex-col gap-2 sm:flex-row mt-14 mb-24 sm:mb-40 justify-center">
+      
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 10, zIndex: 20 }}
+          animate={{ opacity: 1, y: 0, zIndex: 20 }}
+          transition={{ duration: 0.5, delay: 0.15 }}
+        >
+          <div className="relative w-screen flex justify-center ">
+            <img
+              src={dashboard}
+              alt="123"
+              className="w-4/5 2xl:w-[1200px] mx-auto absolute z-10 rounded-xl  custom-border-gray hero-dashboard-border-gradient lg:top-6 xl:top-0"
+            />
+          </div>
+        </motion.div>
+        <div className="relative w-screen flex justify-center ">
+          <div className="custom-shape-divider-bottom-1665343298 mt-4 sm:mt-16 md:mt-52 hidden lg:block">
+            <svg
+              data-name="Layer 1"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 1200 120"
+              preserveAspectRatio="none"
+              className=" bg-customDarkBg2"
+            >
+              <path
+                d="M1200 0L0 0 598.97 114.72 1200 0z"
+                className="shape-fill custom-bg-dark1"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+      {isModalOpen && (
+        <InvitationModal isOpen={isModalOpen} setIsOpen={setIsModalOpen} />
+      )}
+    </section>
+  );
+};
\ No newline at end of file