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