Upload files to "src/components"
This commit is contained in:
Toastie
parent
b36a9499fb
commit
e16647b736
2 changed files with 157 additions and 0 deletions
66
src/components/Footer.jsx
Normal file
66
src/components/Footer.jsx
Normal file
|
|
@ -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">
|
||||
© 2023 Dragons child studios.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
91
src/components/Hero.jsx
Normal file
91
src/components/Hero.jsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in a new issue