Fixing Home Page Design (#1561)
## Description <!-- Insert PR description--> ## Type of change <!--- Please check the type of change your PR introduces: ---> - [x] 🌻 Feature - [ ] 🐛 Bugfix - [ ] 🗺️ Documentation - [ ] 🤖 Test - [ ] 💻 CI/Deployment - [ ] 🐹 Trivial/Minor ## Issue(s) <!-- Can reference multiple issues. Use one of the following "magic words" - "closes, fixes" to auto-close the Github issue. --> * #<issue> ## Test Plan <!-- How will this be tested prior to merging.--> - [ ] 💪 Manual - [ ] ⚡ Unit test - [ ] 💚 E2E
This commit is contained in:
Ahmed Cool Projects
GitHub
parent
02e037eb0e
commit
53a55dc691
@ -10,7 +10,7 @@ export default function Cookies() {
|
||||
return (
|
||||
<div
|
||||
id="cookies"
|
||||
className="cookie-popup fixed max-w-lg bottom-3 right-3 left-3 sm:left-0 sm:right-0 mx-auto bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md pt-6 pb-2 px-6 z-50"
|
||||
className="cookie-popup !tracking-wide fixed max-w-lg bottom-3 right-3 left-3 sm:left-0 sm:right-0 mx-auto bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md pt-6 pb-2 px-6 z-50"
|
||||
>
|
||||
<p className="text-slate-400">
|
||||
This website uses cookies to provide you with a great user experience.
|
||||
|
||||
@ -3,7 +3,7 @@ import "animate.css";
|
||||
|
||||
export default function FirstSection() {
|
||||
return (
|
||||
<section className="relative home-wrapper items-center overflow-hidden">
|
||||
<section className="relative !tracking-wide flex flex-col home-wrapper items-center overflow-hidden">
|
||||
<div
|
||||
className="bg-[#151C3D] absolute"
|
||||
style={{
|
||||
@ -11,7 +11,7 @@ export default function FirstSection() {
|
||||
right: 0,
|
||||
zIndex: 1,
|
||||
top: "-30%",
|
||||
height: "65rem",
|
||||
height: "62rem",
|
||||
width: "140rem",
|
||||
transform: "rotate(-12deg)",
|
||||
}}
|
||||
@ -20,11 +20,11 @@ export default function FirstSection() {
|
||||
style={{
|
||||
zIndex: "1 !important",
|
||||
}}
|
||||
className="container !z-10"
|
||||
className="!container relative !z-10"
|
||||
>
|
||||
<div className="grid !z-10 grid-cols-1 md:mt-44 mt-32 text-center">
|
||||
<div className="grid !z-10 grid-cols-1 mt-28 text-center">
|
||||
<div className="wow !z-10 animate__animated animate__fadeIn">
|
||||
<h4 className="font-bold !z-10 !leading-relaxed text-4xl lg:text-5xl mb-5">
|
||||
<h4 className="font-bold !text-white !z-10 !leading-normal text-4xl lg:text-5xl mb-5">
|
||||
Free, Secure, and Open-Source
|
||||
<br /> Backup for Microsoft 365
|
||||
</h4>
|
||||
@ -51,18 +51,18 @@ export default function FirstSection() {
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="img/cloudbackup.svg"
|
||||
className="w-[80%] inline-block"
|
||||
src="assets/images/cloudbackup.svg"
|
||||
className="w-[70%] inline-block object-contain"
|
||||
alt="Cloud backup and storage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-indigo-600 w-8 h-16 !z-10 absolute left-2 lg:bottom-28 md:bottom-36 sm:bottom-40 bottom-16"></div>
|
||||
<div className="bg-indigo-600/20 w-8 h-16 !z-10 absolute left-12 lg:bottom-32 md:bottom-40 sm:bottom-44 bottom-20"></div>
|
||||
<div className="bg-indigo-600 w-8 h-16 !z-10 absolute left-8 lg:bottom-28 md:bottom-36 sm:bottom-40 bottom-16"></div>
|
||||
<div className="bg-indigo-600/20 w-8 h-16 !z-10 absolute left-20 lg:bottom-32 md:bottom-40 sm:bottom-44 bottom-20"></div>
|
||||
|
||||
<div className="bg-indigo-600/20 !z-10 w-8 h-16 absolute right-12 xl:bottom-[420px] lg:bottom-[315px] md:bottom-[285px] sm:bottom-80 bottom-32"></div>
|
||||
<div className="bg-indigo-600 w-8 h-16 !z-10 absolute right-2 xl:bottom-[440px] lg:bottom-[335px] md:bottom-[305px] sm:bottom-[340px] bottom-36"></div>
|
||||
<div className="bg-indigo-600/20 !z-10 w-8 h-16 absolute right-20 xl:bottom-[420px] lg:bottom-[315px] md:bottom-[285px] sm:bottom-80 bottom-32"></div>
|
||||
<div className="bg-indigo-600 w-8 h-16 !z-10 absolute right-8 xl:bottom-[440px] lg:bottom-[335px] md:bottom-[305px] sm:bottom-[340px] bottom-36"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -4,7 +4,7 @@ import { Icon } from "@iconify/react";
|
||||
|
||||
export default function FourthSection() {
|
||||
return (
|
||||
<section className="relative md:py-16 py-12 md:pt-0 pt-0">
|
||||
<section className="relative !tracking-wide md:py-16 py-12 md:pt-0 pt-0">
|
||||
<div className="absolute bottom-0 left-0 !z-0 right-0 sm:h-2/3 h-4/5 bg-gradient-to-b from-indigo-500 to-indigo-600"></div>
|
||||
|
||||
<div className="container !z-50">
|
||||
|
||||
@ -3,21 +3,21 @@ import "animate.css";
|
||||
|
||||
export default function SecondSection() {
|
||||
return (
|
||||
<section className="relative items-center overflow-hidden">
|
||||
<div className="container relative">
|
||||
<div className="grid content-center relative w-full md:mt-24 mt-16 text-center">
|
||||
<div className="wow animate__animated relative !w-full animate__fadeIn">
|
||||
<div className="flex items-center bg-gray-200 rounded-t-lg h-6">
|
||||
<div className="align-middle">
|
||||
<section className="relative flex !tracking-wide flex-col items-center overflow-hidden">
|
||||
<div className="!container relative">
|
||||
<div className="flex flex-col content-center items-center justify-start relative md:mt-24 mt-16 text-center">
|
||||
<div className="wow w-[95%] sm:w-[80%] animate__animated relative animate__fadeIn">
|
||||
<div className="flex flex-row items-center bg-gray-200 rounded-t-lg h-6">
|
||||
<div className="align-middle flex flex-col items-center justify-center">
|
||||
<img className="h-4 px-2" src="assets/images/powershell.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="!p-2 relative rounded-b-lg overflow-clip"
|
||||
style={{
|
||||
borderLeft: "1px solid #e5e7eb",
|
||||
borderRight: "1px solid #e5e7eb",
|
||||
borderBottom: "1px solid #e5e7eb",
|
||||
borderLeft: "2px solid #e5e7eb",
|
||||
borderRight: "2px solid #e5e7eb",
|
||||
borderBottom: "2px solid #e5e7eb",
|
||||
}}
|
||||
>
|
||||
<video className="w-full" muted loop autoPlay playsInline>
|
||||
|
||||
@ -16,13 +16,13 @@ export default function ThirdSection() {
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="relative md:py-24 py-16 overflow-hidden">
|
||||
<section className="relative md:py-24 !tracking-wide py-16 overflow-hidden">
|
||||
<div className="container">
|
||||
<div
|
||||
className="grid grid-cols-1 pb-8 text-center wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".1s"
|
||||
>
|
||||
<h3 className="mb-6 mt-8 md:text-4xl text-3xl md:leading-normal leading-normal font-bold">
|
||||
<h3 className="mb-6 mt-8 md:text-4xl text-white text-3xl md:leading-normal leading-normal font-bold">
|
||||
Key Features
|
||||
</h3>
|
||||
|
||||
@ -37,7 +37,7 @@ export default function ThirdSection() {
|
||||
className="col-start-1 wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".1s"
|
||||
>
|
||||
<div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
|
||||
<i data-feather="share-2" className="h-5 w-5 rotate-45"></i>
|
||||
</div>
|
||||
@ -53,7 +53,7 @@ export default function ThirdSection() {
|
||||
className="col-start-1 wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".1s"
|
||||
>
|
||||
<div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
|
||||
<i data-feather="zap" className="h-5 w-5 rotate-45"></i>
|
||||
</div>
|
||||
@ -67,7 +67,7 @@ export default function ThirdSection() {
|
||||
className="col-start-1 wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".1s"
|
||||
>
|
||||
<div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
|
||||
<i data-feather="activity" className="h-5 w-5 rotate-45"></i>
|
||||
</div>
|
||||
@ -81,7 +81,7 @@ export default function ThirdSection() {
|
||||
className="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".3s"
|
||||
>
|
||||
<div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
|
||||
<i data-feather="lock" className="h-5 w-5 rotate-45"></i>
|
||||
</div>
|
||||
@ -94,10 +94,10 @@ export default function ThirdSection() {
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="lg:col-start-2 md:col-start-1 wow animate__animated animate__fadeInUp"
|
||||
className="lg:col-start-2 md:col-start-2 md:order-last wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".3s"
|
||||
>
|
||||
<div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
|
||||
<i data-feather="copy" className="h-5 w-5 rotate-45"></i>
|
||||
</div>
|
||||
@ -111,7 +111,7 @@ export default function ThirdSection() {
|
||||
className="lg:col-start-2 md:col-start-2 md:order-last wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".3s"
|
||||
>
|
||||
<div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
|
||||
<i data-feather="minimize-2" className="h-5 w-5 rotate-45"></i>
|
||||
</div>
|
||||
@ -125,7 +125,7 @@ export default function ThirdSection() {
|
||||
className="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".5s"
|
||||
>
|
||||
<div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
|
||||
<i data-feather="code" className="h-5 w-5 rotate-45"></i>
|
||||
</div>
|
||||
@ -139,7 +139,7 @@ export default function ThirdSection() {
|
||||
className="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".5s"
|
||||
>
|
||||
<div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
|
||||
<i
|
||||
data-feather="upload-cloud"
|
||||
@ -158,7 +158,7 @@ export default function ThirdSection() {
|
||||
className="lg:col-start-3 md:col-start-2 wow animate__animated animate__fadeInUp"
|
||||
data-wow-delay=".5s"
|
||||
>
|
||||
<div className="flex transition-all duration-500 hover:scale-105 shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex transition-all duration-500 scale-hover shadow dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 ease-in-out items-center p-3 rounded-md bg-white dark:bg-slate-900">
|
||||
<div className="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full mr-3">
|
||||
<i
|
||||
data-feather="check-circle"
|
||||
@ -439,7 +439,7 @@ export default function ThirdSection() {
|
||||
|
||||
<div className="container md:mb-8 mb-4 md:mt-24 mt-16 wow animate__animated animate__fadeInUp">
|
||||
<div className="grid grid-cols-1 pb-8 text-center">
|
||||
<h3 className="mb-6 mt-8 md:text-4xl text-3xl md:leading-normal leading-normal font-bold">
|
||||
<h3 className="mb-6 mt-8 text-white md:text-4xl text-3xl md:leading-normal leading-normal font-bold">
|
||||
Frequently Asked Questions
|
||||
</h3>
|
||||
</div>
|
||||
@ -458,13 +458,13 @@ export default function ThirdSection() {
|
||||
|
||||
<div className="md:col-span-6">
|
||||
<div className="accordion space-y-3" id="accordionExample">
|
||||
<div className="accordion-item relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<div className="accordion-item !text-white relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<h2
|
||||
className="accordion-header !cursor-pointer font-semibold"
|
||||
className="accordion-header mb-0 !cursor-pointer font-semibold"
|
||||
id="headingOne"
|
||||
>
|
||||
<button
|
||||
className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseOne"
|
||||
@ -488,13 +488,13 @@ export default function ThirdSection() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="accordion-item relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<div className="accordion-item !text-white relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<h2
|
||||
className="accordion-header !cursor-pointer font-semibold"
|
||||
className="accordion-header mb-0 !cursor-pointer font-semibold"
|
||||
id="heading2"
|
||||
>
|
||||
<button
|
||||
className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse2"
|
||||
@ -521,13 +521,13 @@ export default function ThirdSection() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="accordion-item relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<div className="accordion-item !text-white relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<h2
|
||||
className="accordion-header !cursor-pointer font-semibold"
|
||||
className="accordion-header mb-0 !cursor-pointer font-semibold"
|
||||
id="heading3"
|
||||
>
|
||||
<button
|
||||
className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse3"
|
||||
@ -553,13 +553,13 @@ export default function ThirdSection() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="accordion-item relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<div className="accordion-item !text-white relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<h2
|
||||
className="accordion-header !cursor-pointer font-semibold"
|
||||
className="accordion-header mb-0 font-semibold"
|
||||
id="heading4"
|
||||
>
|
||||
<button
|
||||
className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse4"
|
||||
@ -599,13 +599,13 @@ export default function ThirdSection() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="accordion-item relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<div className="accordion-item !text-white relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<h2
|
||||
className="accordion-header !cursor-pointer font-semibold"
|
||||
className="accordion-header mb-0 !cursor-pointer font-semibold"
|
||||
id="heading5"
|
||||
>
|
||||
<button
|
||||
className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse5"
|
||||
@ -629,13 +629,13 @@ export default function ThirdSection() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="accordion-item relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<div className="accordion-item !text-white relative shadow dark:shadow-gray-800 rounded-md overflow-hidden">
|
||||
<h2
|
||||
className="accordion-header !cursor-pointer font-semibold"
|
||||
className="accordion-header mb-0 !cursor-pointer font-semibold"
|
||||
id="heading6"
|
||||
>
|
||||
<button
|
||||
className="transition accordion-button border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
className="transition accordion-button-custom text-white !text-base !cursor-pointer border-none outline-none collapsed focus:outline-none !bg-transparent flex justify-between items-center p-5 w-full font-medium text-left"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#collapse6"
|
||||
|
||||
@ -34,6 +34,12 @@ html{
|
||||
@tailwind utilities;
|
||||
@tailwind components;
|
||||
|
||||
@layer utilities {
|
||||
.scale-hover:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-bg_{
|
||||
background: url("../../static/assets/images/cta.jpg")
|
||||
}
|
||||
|
||||
@ -2,7 +2,63 @@
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
screens: {
|
||||
xs: "540px",
|
||||
sm: "640px",
|
||||
md: "768px",
|
||||
lg: "1024px",
|
||||
xl: "1280px",
|
||||
"2xl": "1536px",
|
||||
},
|
||||
fontFamily: {
|
||||
nunito: ['"Nunito", sans-serif'],
|
||||
},
|
||||
container: {
|
||||
center: true,
|
||||
padding: {
|
||||
DEFAULT: "12px",
|
||||
sm: "1rem",
|
||||
lg: "45px",
|
||||
xl: "5rem",
|
||||
"2xl": "13rem",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
dark: "#3c4858",
|
||||
black: "#161c2d",
|
||||
"dark-footer": "#192132",
|
||||
},
|
||||
|
||||
boxShadow: {
|
||||
sm: "0 2px 4px 0 rgb(60 72 88 / 0.15)",
|
||||
DEFAULT: "0 0 3px rgb(60 72 88 / 0.15)",
|
||||
md: "0 5px 13px rgb(60 72 88 / 0.20)",
|
||||
lg: "0 10px 25px -3px rgb(60 72 88 / 0.15)",
|
||||
xl: "0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)",
|
||||
"2xl": "0 25px 50px -12px rgb(60 72 88 / 0.25)",
|
||||
inner: "inset 0 2px 4px 0 rgb(60 72 88 / 0.05)",
|
||||
testi: "2px 2px 2px -1px rgb(60 72 88 / 0.15)",
|
||||
},
|
||||
|
||||
spacing: {
|
||||
0.75: "0.1875rem",
|
||||
3.25: "0.8125rem",
|
||||
},
|
||||
|
||||
maxWidth: ({ theme, breakpoints }) => ({
|
||||
1200: "71.25rem",
|
||||
992: "60rem",
|
||||
768: "45rem",
|
||||
}),
|
||||
|
||||
zIndex: {
|
||||
1: "1",
|
||||
2: "2",
|
||||
3: "3",
|
||||
999: "999",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tw-elements/dist/plugin")],
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user