ae9141b82b
## 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
70 lines
2.5 KiB
JavaScript
70 lines
2.5 KiB
JavaScript
import React from "react";
|
|
import "animate.css";
|
|
|
|
export default function FirstSection() {
|
|
return (
|
|
<section className="relative home-wrapper items-center overflow-hidden">
|
|
<div
|
|
className="bg-[#151C3D] absolute"
|
|
style={{
|
|
left: "-20rem",
|
|
right: 0,
|
|
zIndex: 1,
|
|
top: "-30%",
|
|
height: "65rem",
|
|
width: "140rem",
|
|
transform: "rotate(-12deg)",
|
|
}}
|
|
></div>
|
|
<div
|
|
style={{
|
|
zIndex: "1 !important",
|
|
}}
|
|
className="container !z-10"
|
|
>
|
|
<div className="grid !z-10 grid-cols-1 md:mt-44 mt-32 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">
|
|
Free, Secure, and Open-Source
|
|
<br /> Backup for Microsoft 365
|
|
</h4>
|
|
<p className="text-slate-300 !z-10 text-xl max-w-xl mx-auto">
|
|
The #1 open-source backup tool for Microsoft 365
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-12 !z-10 mb-6">
|
|
<a
|
|
href="https://docs.corsobackup.io/setup/download"
|
|
target="_blank"
|
|
className="text-2xl !z-10 !no-underline hover:text-white py-2 px-6 font-bold btn bg-indigo-800 hover:bg-indigo-900 border-indigo-800 hover:border-indigo-900 text-white rounded-md"
|
|
>
|
|
Download Now
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
className="home-dashboard mt-8 !z-10 wow animate__ animate__fadeIn animated"
|
|
style={{
|
|
visibility: "visible",
|
|
animationName: "fadeIn",
|
|
}}
|
|
>
|
|
<img
|
|
src="assets/images/cloudbackup.svg"
|
|
className="w-[80%] inline-block"
|
|
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/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>
|
|
</section>
|
|
);
|
|
}
|