Added src files
This commit is contained in:
Emotion
parent
e663dff890
commit
dcd180a65d
18 changed files with 1148 additions and 0 deletions
57
src/components/Brands.jsx
Normal file
57
src/components/Brands.jsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { motion } from "framer-motion";
|
||||
|
||||
import { AmazonLogo } from "../assets/logos/AmazonLogo";
|
||||
import { DropboxLogo } from "../assets/logos/DropboxLogo";
|
||||
import { NetflixLogo } from "../assets/logos/NetflixLogo";
|
||||
import { SlackLogo } from "../assets/logos/SlackLogo";
|
||||
import { SpotifyLogo } from "../assets/logos/SpotifyLogo";
|
||||
import { StripeLogo } from "../assets/logos/StripeLogo";
|
||||
|
||||
export const Brands = () => (
|
||||
<section className="py-12 sm:py-24 bg-customDarkBg1 w-full mt-16 mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<div className="container px-4 mx-auto 2xl:w-[1200px] xl:w-[1100px] lg:w-[1000px] md:w-4/5">
|
||||
<div className="flex lg:flex-row flex-col items-center -mx-4 justify-center lg:text-left text-center">
|
||||
<div className="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
|
||||
<div className="flex flex-col">
|
||||
<h2 className="mb-2 text-4xl sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-white">
|
||||
Trusted by brands
|
||||
</h2>
|
||||
<h2 className=" text-4xl sm:text-5xl 2xl:text-6xl font-bold tracking-normal text-customSecondary">
|
||||
all over the world
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-2/3 sm:w-[620px] lg:w-1/2 mx-auto lg:mx-0 lg:pl-10">
|
||||
<div className="flex flex-wrap -m-4">
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<AmazonLogo />
|
||||
</div>
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<DropboxLogo />
|
||||
</div>
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<NetflixLogo />
|
||||
</div>
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<StripeLogo />
|
||||
</div>
|
||||
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<SpotifyLogo />
|
||||
</div>
|
||||
<div className="w-1/2 sm:w-1/3 py-6 flex justify-center">
|
||||
<SlackLogo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
5
src/components/Divider.jsx
Normal file
5
src/components/Divider.jsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export const Divider = () => (
|
||||
<div className="w-full lg:w-3/5 mx-auto">
|
||||
<div className="border-t border-customGrayBorder"></div>
|
||||
</div>
|
||||
);
|
||||
112
src/components/FAQ.jsx
Normal file
112
src/components/FAQ.jsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export const FAQ = () => (
|
||||
<section className="relative pt-16 pb-16 bg-blueGray-50 overflow-hidden">
|
||||
<div className="absolute -top-10" id="FAQ" />
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<div className="relative z-10 container px-2 sm:px-8 lg:px-4 mx-auto w-11/12 sm:w-full">
|
||||
<div className="md:max-w-4xl mx-auto">
|
||||
<p className="mb-7 custom-block-subtitle text-center">
|
||||
Have any questions?
|
||||
</p>
|
||||
<h2 className="mb-16 custom-block-big-title text-center">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<div className="mb-11 flex flex-wrap -m-1">
|
||||
<div className="w-full p-1">
|
||||
<FAQBox
|
||||
title="Do you provide any free plan?"
|
||||
content="Lorem ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem ipsum
|
||||
dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to
|
||||
the condi mentum vitae vel purus. Lorem ipsum dolor sit amet, to the
|
||||
consectr adipiscing elit. Volutpat tempor to the condi mentum vitae
|
||||
vel purus."
|
||||
defaultOpen
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full p-1">
|
||||
<FAQBox
|
||||
title="How to claim your 25% discount offer?"
|
||||
content="Lorem ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem
|
||||
ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus."
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full p-1">
|
||||
<FAQBox
|
||||
title="What’s your refund policy?"
|
||||
content="Lorem ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus."
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full p-1">
|
||||
<FAQBox
|
||||
title="How to get support for the product?"
|
||||
content=" Lorem ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem
|
||||
ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem
|
||||
ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus. Lorem
|
||||
ipsum dolor sit amet, to the consectr adipiscing elit.
|
||||
Volutpat tempor to the condi mentum vitae vel purus."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
|
||||
const FAQBox = ({ defaultOpen, title, content }) => {
|
||||
const [isOpen, setIsOpen] = useState(defaultOpen);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="pt-2 sm:pt-6 pb-2 px-3 sm:px-8 rounded-3xl bg-customDarkBg3 custom-border-gray-darker mb-4 relative hover:bg-customDarkBg3Hover cursor-pointer"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<div className="flex flex-col p-2 justify-center items-start">
|
||||
<h3 className=" custom-content-title pt-3 sm:pt-0 pr-8 sm:pr-0">
|
||||
{title}
|
||||
</h3>
|
||||
<p
|
||||
className={`text-customGrayText pt-4 transition-all duration-300 overflow-hidden ${
|
||||
isOpen ? "max-h-96" : "max-h-0"
|
||||
}`}
|
||||
>
|
||||
{content}
|
||||
</p>
|
||||
</div>
|
||||
<div className="absolute top-6 right-4 sm:top-8 sm:right-8">
|
||||
<svg
|
||||
width="28px"
|
||||
height="30px"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`transition-all duration-500 ${
|
||||
isOpen ? "rotate-[180deg]" : "rotate-[270deg]"
|
||||
}`}
|
||||
>
|
||||
<path
|
||||
d="M4.16732 12.5L10.0007 6.66667L15.834 12.5"
|
||||
stroke="#4F46E5"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
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">
|
||||
Dragons child hosting
|
||||
</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 Hosting: Providing server hosting 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">Our other 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">
|
||||
Dragons child hosting
|
||||
</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 Hosting</span>{" "}
|
||||
<span className="hidden md:inline">The Hosting</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 ">
|
||||
We are a 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>
|
||||
);
|
||||
};
|
||||
90
src/components/InvitationModal.jsx
Normal file
90
src/components/InvitationModal.jsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
|
||||
import { CloseIcon } from "../assets/icons/CloseIcon";
|
||||
import { DragonsChildLogo } from "../assets/logos/DragonsChild";
|
||||
|
||||
export const InvitationModal = ({ setIsOpen }) => (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, zIndex: 50 }}
|
||||
animate={{ opacity: 1, zIndex: 50 }}
|
||||
transition={{ duration: 0.1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div
|
||||
className="w-full h-full bg-customDarkBgTransparentDarker fixed top-0 left-0 flex z-50 justify-center items-center"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="w-full h-screen sm:h-auto sm:w-3/4 md:w-3/5 lg:w-[1000px] xl:w-[1100px] sm:rounded-2xl bg-customDarkBgTransparentLighter custom-border-gray-darker py-12 px-8 sm:px-16 backdrop-blur-xl fixed sm:mb-8 fixed mx-auto z-50"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex relative">
|
||||
<div className="w-1/2 hidden lg:inline">
|
||||
<h2 className="mt-6 mb-2 text-5xl font-bold tracking-normal text-white">
|
||||
Subscribe Now
|
||||
</h2>
|
||||
<h2 className="text-5xl font-bold tracking-normal text-customSecondary">
|
||||
Winter is coming
|
||||
</h2>
|
||||
|
||||
<ul className="mb-6 text-white mt-12">
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Vestibulum viverra</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Morbi mollis metus pretium</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Etiam lectus nunc, commodo</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/2 flex items-center flex-col justify-center pt-24 sm:pt-0">
|
||||
<div className="flex inline lg:hidden justify-start items-center grow basis-0 mb-8 pr-6">
|
||||
<div className="text-white mr-2 text-8xl">
|
||||
<DragonsChildLogo />
|
||||
</div>
|
||||
<div className="text-white font-['Inter'] font-bold text-3xl">
|
||||
DragonsChild
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="mb-7 text-2xl text-white font-bold leading-snug text-center">
|
||||
Join 3,953 other developers
|
||||
</h3>
|
||||
<div className="flex flex-wrap -m-2">
|
||||
<div className="w-full sm:w-4/5 p-2 mx-auto">
|
||||
<input
|
||||
className="px-4 py-4 w-full text-gray-500 font-medium text-center placeholder-gray-500 outline-none border bg-gray-300 border-gray-300 rounded-lg focus:ring focus:ring-indigo-300"
|
||||
id="newsletterInput3-1"
|
||||
type="text"
|
||||
placeholder="Your email address"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-4/5 p-2 mt-4 mx-auto">
|
||||
<button
|
||||
className="py-4 px-6 w-full text-white font-semibold rounded-xl shadow-4xl focus:ring focus:ring-indigo-300 bg-customPrimary hover:bg-[#7765e6] transition ease-in-out duration-200"
|
||||
type="button"
|
||||
>
|
||||
Join Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="fixed top-4 right-4 z-50 w-4 h-4 cursor-pointer"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<CloseIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
99
src/components/Navbar.jsx
Normal file
99
src/components/Navbar.jsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
import { DragonsChildLogo } from "../assets/logos/DragonsChild";
|
||||
import { GithubIcon } from "../assets/icons/GithubIcon";
|
||||
import { BygulIcon } from "../assets/icons/BygulIcon";
|
||||
import { InstagramIcon } from "../assets/icons/InstagramIcon";
|
||||
import { TwitterIcon } from "../assets/icons/TwitterIcon";
|
||||
|
||||
export const Navbar = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<nav className="w-full h-20 flex flex-col justify-center items-center fixed bg-customDarkBg1 lg:bg-customDarkBgTransparent z-40 lg:backdrop-blur-xl">
|
||||
<div className="2xl:w-[1280px] xl:w-10/12 w-11/12 flex justify-between items-center relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<a className="navbar-link" href="#home" aria-label="Home">
|
||||
<div className="flex justify-start items-center grow basis-0">
|
||||
<div className="text-white mr-1 text-6xl">
|
||||
<DragonsChildLogo />
|
||||
</div>
|
||||
<div className="text-white font-['Inter'] font-bold text-xl">
|
||||
Dragons child hosting
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div className="hidden lg:flex h-full pl-12 pb-2">
|
||||
<a className="navbar-link" href="#home" aria-label="Home">
|
||||
Home
|
||||
</a>
|
||||
<a className="navbar-link" href="https://social.valkyriecoms.com/@Dragonschildhosting" aria-label="Our profile">
|
||||
Our profile
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
</motion.div>
|
||||
<div
|
||||
className="lg:hidden flex flex-col px-2 py-3 border-solid border border-gray-600 rounded-md cursor-pointer hover:bg-customDarkBg2"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
<div className="w-5 h-0.5 bg-gray-500 mb-1"></div>
|
||||
<div className="w-5 h-0.5 bg-gray-500 mb-1"></div>
|
||||
<div className="w-5 h-0.5 bg-gray-500 "></div>
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div
|
||||
className="flex flex-col mt-16 lg:hidden absolute top-4 left-0 bg-customDarkBg1 z-50 w-full
|
||||
items-center gap-10 pb-10 border-y border-solid border-customDarkBg3 pt-10
|
||||
"
|
||||
>
|
||||
<a
|
||||
className="navbar-link"
|
||||
href="#home"
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-label="Home"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
className="navbar-link"
|
||||
href="#profile"
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-label="Our profile"
|
||||
>
|
||||
Our profile
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
205
src/components/Pricing.jsx
Normal file
205
src/components/Pricing.jsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
import { InvitationModal } from "./InvitationModal";
|
||||
import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
|
||||
|
||||
export const Pricing = () => {
|
||||
const [isMonthly, setIsMonthly] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const handleChange = () => {
|
||||
setIsMonthly(!isMonthly);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="w-screen flex justify-center bg-customDarkBg2 relative">
|
||||
<div className="absolute -top-16" id="pricing" />
|
||||
<div className="pb-20 pt-12 bg-customDarkBg2 2xl:w-[1150px] lg:w-[1050px] md:w-4/5 ">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-2xl mx-auto text-center mb-16">
|
||||
<span className="custom-block-subtitle">
|
||||
Dolor sit amet consectutar
|
||||
</span>
|
||||
<h2 className="mt-6 mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
|
||||
Choose your best plan
|
||||
</h2>
|
||||
<p className="mb-6 text-customGrayText">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</p>
|
||||
<label className="mx-auto bg-customDarkBg3 relative flex justify-between items-center group text-xl w-44 h-12 rounded-lg pr-36 pl-1 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="peer appearance-none"
|
||||
checked={!isMonthly}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<span className="h-8 w-[5.5rem] flex items-center pr-2 bg-customDarkBg3 after:rounded-lg duration-300 ease-in-out after:w-[30rem] after:h-10 after:bg-customPrimary after:shadow-md after:duration-300 peer-checked:after:translate-x-[5.5rem] cursor-pointer"></span>
|
||||
<div className="flex absolute text-white text-sm font-bold">
|
||||
<div
|
||||
className={
|
||||
isMonthly ? "mr-9 ml-3" : "mr-9 ml-3 text-gray-400"
|
||||
}
|
||||
>
|
||||
Monthly
|
||||
</div>
|
||||
<div className={isMonthly && "text-gray-400"}>Yearly</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex flex-wrap flex-col lg:flex-row -mx-4 items-center mt-20">
|
||||
<div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
|
||||
<div className="p-8 bg-customDarkBg3 rounded-3xl">
|
||||
<h4 className="mb-2 text-xl font-bold font-heading text-white text-left">
|
||||
Beginner
|
||||
</h4>
|
||||
<div className="flex justify-start items-end">
|
||||
<div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
|
||||
$0
|
||||
</div>
|
||||
<div className="text-gray-500">
|
||||
{isMonthly ? "/ month" : "/ year"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 mb-6 2xl:mb-10 text-gray-500 leading-loose text-left">
|
||||
The perfect way to get started and get used to our tools.
|
||||
</p>
|
||||
<ul className="mb-2 2xl:mb-6 text-white">
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Vestibulum viverra</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Morbi mollis metus pretium</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Etiam lectus nunc, commodo</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Ut quam nisl mollis id pretium</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Suspendisse bibendum</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
className="inline-block text-center py-2 px-4 w-full rounded-xl rounded-t-xl custom-button-colored font-bold leading-loose mt-16"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
>
|
||||
Get Started
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
|
||||
<div className="px-8 py-8 bg-customDarkBg3 rounded-3xl">
|
||||
<h4 className="mb-2 2xl:mb-4 text-2xl font-bold font-heading text-white text-left">
|
||||
Standard
|
||||
</h4>
|
||||
<div className="flex justify-start items-end">
|
||||
<div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
|
||||
{isMonthly ? "$19" : "$180"}
|
||||
</div>
|
||||
<div className="text-gray-500">
|
||||
{isMonthly ? "/ month" : "/ year"}
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-8 mb-8 2xl:mb-12 text-gray-500 leading-loose text-left">
|
||||
The perfect way to get started and get used to our tools.
|
||||
</p>
|
||||
<ul className="mb-14 text-white">
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Vestibulum viverra</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Morbi mollis metus pretium</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Etiam lectus nunc, commodo</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Ut quam nisl mollis id pretium</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Suspendisse bibendum</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
className="inline-block text-center py-2 px-4 w-full custom-button-colored leading-loose transition duration-200 mt-20"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
>
|
||||
Get Started
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[350px] sm:w-[380px] lg:w-1/3 px-4 mb-8 lg:mb-0">
|
||||
<div className="p-8 bg-customDarkBg3 rounded-3xl">
|
||||
<h4 className="mb-2 text-xl font-bold font-heading text-white text-left">
|
||||
Premium
|
||||
</h4>
|
||||
<div className="flex justify-start items-end">
|
||||
<div className="text-4xl sm:text-5xl font-bold text-white text-left mt-4 mr-2">
|
||||
{isMonthly ? "$36" : "$390"}
|
||||
</div>
|
||||
<div className="text-gray-500">
|
||||
{isMonthly ? "/ month" : "/ year"}
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 mb-6 2xl:mb-10 text-gray-500 leading-loose text-left">
|
||||
The perfect way to get started and get used to our tools.
|
||||
</p>
|
||||
<ul className="mb-2 2xl:mb-6 text-white">
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Vestibulum viverra</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Morbi mollis metus pretium</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Etiam lectus nunc, commodo</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Ut quam nisl mollis id pretium</span>
|
||||
</li>
|
||||
<li className="mb-4 flex">
|
||||
<CheckArrowIcon />
|
||||
<span>Suspendisse bibendum</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
className="inline-block text-center py-2 px-4 w-full rounded-xl rounded-t-xl custom-button-colored font-bold leading-loose mt-16"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
>
|
||||
Get Started
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
{isModalOpen && (
|
||||
<InvitationModal isOpen={isModalOpen} setIsOpen={setIsModalOpen} />
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
52
src/components/ScrollUpButton.jsx
Normal file
52
src/components/ScrollUpButton.jsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
export const ScrollUpButton = () => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", toggleVisible);
|
||||
}, []);
|
||||
|
||||
const toggleVisible = () => {
|
||||
const scrolled = document.documentElement.scrollTop;
|
||||
if (scrolled > 300) {
|
||||
setIsVisible(true);
|
||||
} else if (scrolled <= 300) {
|
||||
setIsVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isVisible && (
|
||||
<div
|
||||
className="w-12 h-12 fixed bottom-6 right-6 custom-border-gray rounded-xl bg-customDarkBg2 hover:bg-customDarkBg3 cursor-pointer flex justify-center items-center transition z-50"
|
||||
onClick={scrollToTop}
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="35px"
|
||||
height="35px"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M4.16732 12.5L10.0007 6.66667L15.834 12.5"
|
||||
stroke="#4F46E5"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
82
src/components/Test.jsx
Normal file
82
src/components/Test.jsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { Hero } from "./Hero.jsx";
|
||||
import { Navbar } from "./Navbar.jsx";
|
||||
import { Testimonials } from "./Testimonials.jsx";
|
||||
import { FeaturesDiagonal } from "./FeaturesDiagonal.jsx";
|
||||
import { Pricing } from "./Pricing.jsx";
|
||||
import { FAQ } from "./FAQ.jsx";
|
||||
import { Brands } from "./Brands.jsx";
|
||||
import { Divider } from "./Divider";
|
||||
import { Footer } from "./Footer.jsx";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export const Test = () => {
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
animate={{
|
||||
rotate: [0, 360],
|
||||
}}
|
||||
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||
>
|
||||
<Navbar />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{
|
||||
rotate: [0, 360],
|
||||
}}
|
||||
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||
>
|
||||
<Hero />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{
|
||||
rotate: [0, 360],
|
||||
}}
|
||||
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||
>
|
||||
<Testimonials />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{
|
||||
rotate: [0, 360],
|
||||
}}
|
||||
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||
>
|
||||
<FeaturesDiagonal />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{
|
||||
rotate: [0, 360],
|
||||
}}
|
||||
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||
>
|
||||
<Pricing />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{
|
||||
rotate: [0, 360],
|
||||
}}
|
||||
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||
>
|
||||
<Brands />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{
|
||||
rotate: [0, 360],
|
||||
}}
|
||||
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||
>
|
||||
<FAQ />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{
|
||||
rotate: [0, 360],
|
||||
}}
|
||||
transition={{ duration: 1, repeat: Infinity, delay: 0.5 }}
|
||||
>
|
||||
<Footer />
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
99
src/components/Testimonials.jsx
Normal file
99
src/components/Testimonials.jsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import { QuoteIcon } from "../assets/icons/QuoteIcon";
|
||||
import testimonial1 from "../assets/images/testimonial1.png";
|
||||
import testimonial2 from "../assets/images/testimonial2.png";
|
||||
import testimonial3 from "../assets/images/testimonial3.png";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export const Testimonials = () => (
|
||||
<section className="w-full flex justify-center pt-10 mb-16 lg:mb-32 bg-customDarkBg2 relative">
|
||||
<div className="absolute -top-16" id="feedback" />
|
||||
<div className="flex flex-col w-full lg:w-[1150px] justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: 0.3 }}
|
||||
>
|
||||
<div className="custom-block-subtitle text-center mb-6">
|
||||
Look at those good reviews!
|
||||
</div>
|
||||
<div className="custom-block-big-title text-center mb-16 px-8 sm:px-24 md:px-48">
|
||||
People like you love DragonsChild
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-8 lg:gap-5 xl:gap-10 px-6 xl:px-0 items-center">
|
||||
<div className="w-11/12 sm:w-4/5 md:w-[560px] lg:w-1/3 custom-border-gray-darker rounded-xl bg-customDarkBg3 flex flex-col px-6 py-4">
|
||||
<div className="flex mb-2">
|
||||
<QuoteIcon />
|
||||
</div>
|
||||
<div className="custom-content-text-white">
|
||||
"Lorem ipsum dolor sit amet, consecte adipiscing elit. Phasellus
|
||||
pulvinar urna quis tempor gravida. Sed commodo bibendum orci, sed
|
||||
tincidunt lectus dignissim vel. Sed et maximus odio, eu ultrices
|
||||
magna. Etiam finibus tempor eu nunc vitae tristique. Cras mattis
|
||||
sapien. Etiam finibus gravida."
|
||||
</div>
|
||||
<div className="flex mt-4 mb-2 xl:mt-8 xl:mb-4">
|
||||
<img src={testimonial1} alt="" width="45px" />
|
||||
<div className="flex flex-col ml-4">
|
||||
<div className="custom-content-text-white font-medium">
|
||||
That one guys
|
||||
</div>
|
||||
<div className="custom-content-text-gray">
|
||||
Did a thing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-11/12 sm:w-4/5 md:w-[560px] lg:w-1/3 custom-border-gray-darker rounded-xl bg-customDarkBg3 flex flex-col px-6 py-4">
|
||||
<div className="flex mb-2">
|
||||
<QuoteIcon />
|
||||
</div>
|
||||
<div className="custom-content-text-white">
|
||||
"Lorem ipsum dolor sit amet, consecte adipiscing elit. Phasellus
|
||||
pulvinar urna quis tempor gravida. Sed commodo bibendum orci, sed
|
||||
tincidunt lectus dignissim vel. Sed et maximus odio, eu ultrices
|
||||
magna. Etiam finibus tempor eu nunc vitae tristique. Cras mattis
|
||||
sapien. Etiam finibus gravida."
|
||||
</div>
|
||||
<div className="flex mt-4 mb-2 xl:mt-8 xl:mb-4">
|
||||
<img src={testimonial2} alt="" width="45px" />
|
||||
<div className="flex flex-col ml-4">
|
||||
<div className="custom-content-text-white font-medium">
|
||||
That other guy
|
||||
</div>
|
||||
<div className="custom-content-text-gray">
|
||||
Also probably does something
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-11/12 sm:w-4/5 md:w-[560px] lg:w-1/3 custom-border-gray-darker rounded-xl bg-customDarkBg3 flex flex-col px-6 py-4">
|
||||
<div className="flex mb-2">
|
||||
<QuoteIcon />
|
||||
</div>
|
||||
<div className="custom-content-text-white">
|
||||
"Lorem ipsum dolor sit amet, consecte adipiscing elit. Phasellus
|
||||
pulvinar urna quis tempor gravida. Sed commodo bibendum orci, sed
|
||||
tincidunt lectus dignissim vel. Sed et maximus odio, eu ultrices
|
||||
magna. Etiam finibus tempor eu nunc vitae tristique. Cras mattis
|
||||
sapien. Etiam finibus gravida."
|
||||
</div>
|
||||
<div className="flex mt-4 mb-2 xl:mt-8 xl:mb-4">
|
||||
<img src={testimonial3} alt="" width="45px" />
|
||||
<div className="flex flex-col ml-4">
|
||||
<div className="custom-content-text-white font-medium">
|
||||
Craig
|
||||
</div>
|
||||
<div className="custom-content-text-gray">
|
||||
Is cool
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
48
src/layouts/Layout.astro
Normal file
48
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
import "@fontsource/inter";
|
||||
import "@fontsource/inter/500.css";
|
||||
import "@fontsource/inter/600.css";
|
||||
import "@fontsource/inter/700.css";
|
||||
import "@fontsource/inter/800.css";
|
||||
import "@fontsource/inter/900.css";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta
|
||||
name="description"
|
||||
content="The site for Dragons child studios."
|
||||
/>
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<style is:global>
|
||||
:root {
|
||||
--accent: 124, 58, 237;
|
||||
--accent-gradient: linear-gradient(
|
||||
45deg,
|
||||
rgb(var(--accent)),
|
||||
#da62c4 30%,
|
||||
white 60%
|
||||
);
|
||||
}
|
||||
html {
|
||||
font-family: Inter;
|
||||
background-color: #26272b;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
24
src/pages/index.astro
Normal file
24
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import { Hero } from "../components/Hero.jsx";
|
||||
import { Navbar } from "../components/Navbar.jsx";
|
||||
import { Testimonials } from "../components/Testimonials.jsx";
|
||||
import { Pricing } from "../components/Pricing.jsx";
|
||||
import { FAQ } from "../components/FAQ.jsx";
|
||||
import { Brands } from "../components/Brands.jsx";
|
||||
import {Divider} from "../components/Divider"
|
||||
import { Footer } from "../components/Footer.jsx";
|
||||
import "../styles/Navbar.styles.css";
|
||||
import "../styles/Hero.styles.css";
|
||||
import "../styles/Utils.styles.css";
|
||||
import "../styles/FeaturesDiagonal.styles.css";
|
||||
import { ScrollUpButton } from "../components/ScrollUpButton";
|
||||
|
||||
---
|
||||
<Layout title="DragonsChild">
|
||||
<Navbar client:load />
|
||||
<Hero client:load />
|
||||
<Divider />
|
||||
<Footer />
|
||||
<ScrollUpButton client:load />
|
||||
</Layout>
|
||||
32
src/styles/FeaturesDiagonal.styles.css
Normal file
32
src/styles/FeaturesDiagonal.styles.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/* Top */
|
||||
|
||||
.custom-shape-divider-bottom-1665696614 {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.custom-shape-divider-bottom-1665696614 svg {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: calc(100% + 1.3px);
|
||||
height: 127px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
/* Bottom */
|
||||
|
||||
.custom-shape-divider-top-1665696661 {
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.custom-shape-divider-top-1665696661 svg {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: calc(100% + 1.3px);
|
||||
height: 127px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
16
src/styles/Hero.styles.css
Normal file
16
src/styles/Hero.styles.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.custom-shape-divider-bottom-1665343298 {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
}
|
||||
.custom-shape-divider-bottom-1665343298 svg {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: calc(100% + 1.3px);
|
||||
height: 200px;
|
||||
}
|
||||
.hero-title-gradient {
|
||||
background: -webkit-linear-gradient(white, #b4add1);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
3
src/styles/Navbar.styles.css
Normal file
3
src/styles/Navbar.styles.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.navbar-link {
|
||||
@apply text-white lg:text-base text-2xl leading-6 mr-4 ml-4 2xl:mr-6 2xl:ml-6 cursor-pointer font-normal lg:font-medium hover:scale-125 transition duration-300 h-full pt-2
|
||||
}
|
||||
66
src/styles/Utils.styles.css
Normal file
66
src/styles/Utils.styles.css
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/* Typography */
|
||||
|
||||
.custom-block-title {
|
||||
@apply text-white text-3xl font-bold tracking-normal;
|
||||
}
|
||||
.custom-block-big-title {
|
||||
@apply text-white text-4xl xl:text-5xl font-bold tracking-normal;
|
||||
}
|
||||
.custom-block-subtitle {
|
||||
@apply text-xs text-customSecondary tracking-wider font-bold uppercase;
|
||||
}
|
||||
.custom-content-title {
|
||||
@apply text-white text-lg font-bold tracking-normal;
|
||||
}
|
||||
.custom-content-text-white {
|
||||
@apply text-white text-base leading-relaxed
|
||||
}
|
||||
.custom-content-text-gray {
|
||||
@apply text-gray-400 text-base
|
||||
}
|
||||
|
||||
/* Backgrounds */
|
||||
|
||||
.custom-bg-dark1 {
|
||||
@apply bg-customDarkBg1 fill-customDarkBg1
|
||||
}
|
||||
.custom-bg-dark2 {
|
||||
@apply bg-customDarkBg2 fill-customDarkBg2
|
||||
}
|
||||
.custom-bg-dark3 {
|
||||
@apply bg-customDarkBg3 fill-customDarkBg3
|
||||
}
|
||||
body, html {
|
||||
@apply bg-customDarkBg2
|
||||
}
|
||||
|
||||
/* Borders */
|
||||
|
||||
.custom-border-gray {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: rgb(255, 255, 255, 0.15);
|
||||
}
|
||||
.custom-border-gray-darker {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: rgb(255, 255, 255, 0.07);
|
||||
|
||||
}
|
||||
.custom-border-gray-nobottom {
|
||||
border-style: solid;
|
||||
border-width: 1px 1px 0 1px;
|
||||
border-color: rgb(255, 255, 255, 0.1);
|
||||
border-radius: "10px";
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.custom-button-colored {
|
||||
@apply rounded-lg font-bold bg-customPrimary text-white flex justify-center items-center hover:bg-[#7765e6] cursor-pointer transition
|
||||
}
|
||||
|
||||
/* Preventing FOUC */
|
||||
@font-face {
|
||||
font-display: var(--fontsource-Inter-font-display, optional);
|
||||
}
|
||||
Loading…
Reference in a new issue