Add user testimonials framework (#2619)
## Description Add a template for adding user testimonials. Currently broken. ## Does this PR need a docs update or release note? - [x] ⛔ No ## Type of change <!--- Please check the type of change your PR introduces: ---> - [x] 🗺️ Documentation
This commit is contained in:
Niraj Tolia
GitHub
parent
5c6a3fb48d
commit
fce846a069
11
website/package-lock.json
generated
11
website/package-lock.json
generated
@ -25,6 +25,7 @@
|
|||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"sass": "^1.58.3",
|
"sass": "^1.58.3",
|
||||||
|
"tiny-slider": "^2.9.4",
|
||||||
"tw-elements": "^1.0.0-alpha13",
|
"tw-elements": "^1.0.0-alpha13",
|
||||||
"wow.js": "^1.2.2"
|
"wow.js": "^1.2.2"
|
||||||
},
|
},
|
||||||
@ -12898,6 +12899,11 @@
|
|||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/tiny-slider": {
|
||||||
|
"version": "2.9.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/tiny-slider/-/tiny-slider-2.9.4.tgz",
|
||||||
|
"integrity": "sha512-LAs2kldWcY+BqCKw4kxd4CMx2RhWrHyEePEsymlOIISTlOVkjfK40sSD7ay73eKXBLg/UkluAZpcfCstimHXew=="
|
||||||
|
},
|
||||||
"node_modules/tiny-warning": {
|
"node_modules/tiny-warning": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||||
@ -23271,6 +23277,11 @@
|
|||||||
"tiny-invariant": {
|
"tiny-invariant": {
|
||||||
"version": "1.2.0"
|
"version": "1.2.0"
|
||||||
},
|
},
|
||||||
|
"tiny-slider": {
|
||||||
|
"version": "2.9.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/tiny-slider/-/tiny-slider-2.9.4.tgz",
|
||||||
|
"integrity": "sha512-LAs2kldWcY+BqCKw4kxd4CMx2RhWrHyEePEsymlOIISTlOVkjfK40sSD7ay73eKXBLg/UkluAZpcfCstimHXew=="
|
||||||
|
},
|
||||||
"tiny-warning": {
|
"tiny-warning": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||||
|
|||||||
@ -31,6 +31,7 @@
|
|||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"sass": "^1.58.3",
|
"sass": "^1.58.3",
|
||||||
|
"tiny-slider": "^2.9.4",
|
||||||
"tw-elements": "^1.0.0-alpha13",
|
"tw-elements": "^1.0.0-alpha13",
|
||||||
"wow.js": "^1.2.2"
|
"wow.js": "^1.2.2"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -10,9 +10,9 @@ export default function Hero() {
|
|||||||
left: "-20rem",
|
left: "-20rem",
|
||||||
right: 0,
|
right: 0,
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
top: "-30%",
|
top: "-45%",
|
||||||
height: "62rem",
|
height: "62rem",
|
||||||
width: "140rem",
|
width: "calculate(200%)",
|
||||||
transform: "rotate(-12deg)",
|
transform: "rotate(-12deg)",
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
@ -22,7 +22,7 @@ export default function Hero() {
|
|||||||
}}
|
}}
|
||||||
className="!container relative !z-10"
|
className="!container relative !z-10"
|
||||||
>
|
>
|
||||||
<div className="grid !z-10 grid-cols-1 mt-28 text-center">
|
<div className="grid !z-10 grid-cols-1 mt-24 text-center">
|
||||||
<div className="wow !z-10 animate__animated animate__fadeIn">
|
<div className="wow !z-10 animate__animated animate__fadeIn">
|
||||||
<h4 className="font-bold !text-white !z-10 !leading-normal 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
|
Free, Secure, and Open-Source
|
||||||
@ -38,28 +38,42 @@ export default function Hero() {
|
|||||||
href="../docs/quickstart/"
|
href="../docs/quickstart/"
|
||||||
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"
|
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"
|
||||||
>
|
>
|
||||||
Quickstart
|
Quick Start
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="../docs/setup/download/"
|
|
||||||
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
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div className="flex flex-col content-center items-center justify-start relative md:mt-16 mt-8 text-center">
|
||||||
className="home-dashboard mt-8 !z-10 wow animate__ animate__fadeIn animated"
|
<div className="wow w-[95%] sm:w-[80%] animate__animated relative animate__fadeIn">
|
||||||
style={{
|
<div className="flex flex-row items-center bg-gray-200 rounded-t-lg h-6">
|
||||||
visibility: "visible",
|
<div className="align-middle flex flex-col items-center justify-center">
|
||||||
animationName: "fadeIn",
|
<img
|
||||||
}}
|
className="h-4 px-2"
|
||||||
>
|
src="assets/images/powershell.svg"
|
||||||
<img
|
alt="Powershell logo"
|
||||||
src="img/cloudbackup.svg"
|
/>
|
||||||
className="w-[70%] inline-block object-contain"
|
</div>
|
||||||
alt="Cloud backup and storage"
|
</div>
|
||||||
/>
|
<div
|
||||||
|
className="!p-2 relative rounded-b-lg overflow-clip"
|
||||||
|
style={{
|
||||||
|
borderLeft: "2px solid #e5e7eb",
|
||||||
|
borderRight: "2px solid #e5e7eb",
|
||||||
|
borderBottom: "2px solid #e5e7eb",
|
||||||
|
backgroundColor: "#121831",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
className="w-full"
|
||||||
|
poster="assets/images/corso_demo_thumbnail.png"
|
||||||
|
muted
|
||||||
|
loop
|
||||||
|
autoPlay
|
||||||
|
playsInline
|
||||||
|
>
|
||||||
|
<source src="assets/images/corso_demo.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import loadable from "@loadable/component";
|
|||||||
import Hero from "./Hero";
|
import Hero from "./Hero";
|
||||||
import Demo from "./Demo";
|
import Demo from "./Demo";
|
||||||
import CTA from "./CTA";
|
import CTA from "./CTA";
|
||||||
|
import Users from "./Users";
|
||||||
import Cookies from "./Cookies";
|
import Cookies from "./Cookies";
|
||||||
import KeyLoveFAQ from "./KeyLoveFAQ";
|
import KeyLoveFAQ from "./KeyLoveFAQ";
|
||||||
|
|
||||||
@ -13,7 +14,7 @@ export function MainComp() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Hero />
|
<Hero />
|
||||||
<Demo />
|
<Users />
|
||||||
<KeyLoveFAQ />
|
<KeyLoveFAQ />
|
||||||
<CTA />
|
<CTA />
|
||||||
<BackToTopComp />
|
<BackToTopComp />
|
||||||
|
|||||||
318
website/src/components/parts/Users.js
Normal file
318
website/src/components/parts/Users.js
Normal file
@ -0,0 +1,318 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
import "animate.css";
|
||||||
|
import BrowserOnly from "@docusaurus/BrowserOnly";
|
||||||
|
|
||||||
|
export default function Users() {
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
const tns = require("tiny-slider").tns;
|
||||||
|
|
||||||
|
if (document.getElementsByClassName("tiny-single-item").length > 0) {
|
||||||
|
var slider = tns({
|
||||||
|
container: ".tiny-single-item",
|
||||||
|
items: 1,
|
||||||
|
controls: false,
|
||||||
|
mouseDrag: true,
|
||||||
|
loop: true,
|
||||||
|
rewind: true,
|
||||||
|
autoplay: true,
|
||||||
|
autoplayButtonOutput: false,
|
||||||
|
autoplayTimeout: 3000,
|
||||||
|
navPosition: "bottom",
|
||||||
|
speed: 400,
|
||||||
|
gutter: 16,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementsByClassName("tiny-one-item").length > 0) {
|
||||||
|
var slider = tns({
|
||||||
|
container: ".tiny-one-item",
|
||||||
|
items: 1,
|
||||||
|
controls: true,
|
||||||
|
mouseDrag: true,
|
||||||
|
loop: true,
|
||||||
|
rewind: true,
|
||||||
|
autoplay: true,
|
||||||
|
autoplayButtonOutput: false,
|
||||||
|
autoplayTimeout: 3000,
|
||||||
|
navPosition: "bottom",
|
||||||
|
controlsText: [
|
||||||
|
'<i class="mdi mdi-chevron-left "></i>',
|
||||||
|
'<i class="mdi mdi-chevron-right"></i>',
|
||||||
|
],
|
||||||
|
nav: false,
|
||||||
|
speed: 400,
|
||||||
|
gutter: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementsByClassName("tiny-two-item").length > 0) {
|
||||||
|
var slider = tns({
|
||||||
|
container: ".tiny-two-item",
|
||||||
|
controls: true,
|
||||||
|
mouseDrag: true,
|
||||||
|
loop: true,
|
||||||
|
rewind: true,
|
||||||
|
autoplay: true,
|
||||||
|
autoplayButtonOutput: false,
|
||||||
|
autoplayTimeout: 3000,
|
||||||
|
navPosition: "bottom",
|
||||||
|
controlsText: [
|
||||||
|
'<i class="mdi mdi-chevron-left "></i>',
|
||||||
|
'<i class="mdi mdi-chevron-right"></i>',
|
||||||
|
],
|
||||||
|
nav: false,
|
||||||
|
speed: 400,
|
||||||
|
gutter: 0,
|
||||||
|
responsive: {
|
||||||
|
768: {
|
||||||
|
items: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementsByClassName("tiny-three-item").length > 0) {
|
||||||
|
var slider = tns({
|
||||||
|
container: ".tiny-three-item",
|
||||||
|
controls: false,
|
||||||
|
mouseDrag: true,
|
||||||
|
loop: true,
|
||||||
|
rewind: true,
|
||||||
|
autoplay: true,
|
||||||
|
autoplayButtonOutput: false,
|
||||||
|
autoplayTimeout: 3000,
|
||||||
|
navPosition: "bottom",
|
||||||
|
speed: 400,
|
||||||
|
gutter: 12,
|
||||||
|
responsive: {
|
||||||
|
992: {
|
||||||
|
items: 3,
|
||||||
|
},
|
||||||
|
|
||||||
|
767: {
|
||||||
|
items: 2,
|
||||||
|
},
|
||||||
|
|
||||||
|
320: {
|
||||||
|
items: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementsByClassName("tiny-six-item").length > 0) {
|
||||||
|
var slider = tns({
|
||||||
|
container: ".tiny-six-item",
|
||||||
|
controls: true,
|
||||||
|
mouseDrag: true,
|
||||||
|
loop: true,
|
||||||
|
rewind: true,
|
||||||
|
autoplay: true,
|
||||||
|
autoplayButtonOutput: false,
|
||||||
|
autoplayTimeout: 3000,
|
||||||
|
navPosition: "bottom",
|
||||||
|
controlsText: [
|
||||||
|
'<i class="mdi mdi-chevron-left "></i>',
|
||||||
|
'<i class="mdi mdi-chevron-right"></i>',
|
||||||
|
],
|
||||||
|
nav: false,
|
||||||
|
speed: 400,
|
||||||
|
gutter: 0,
|
||||||
|
responsive: {
|
||||||
|
1025: {
|
||||||
|
items: 6,
|
||||||
|
},
|
||||||
|
|
||||||
|
992: {
|
||||||
|
items: 4,
|
||||||
|
},
|
||||||
|
|
||||||
|
767: {
|
||||||
|
items: 3,
|
||||||
|
},
|
||||||
|
|
||||||
|
320: {
|
||||||
|
items: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementsByClassName("tiny-twelve-item").length > 0) {
|
||||||
|
var slider = tns({
|
||||||
|
container: ".tiny-twelve-item",
|
||||||
|
controls: true,
|
||||||
|
mouseDrag: true,
|
||||||
|
loop: true,
|
||||||
|
rewind: true,
|
||||||
|
autoplay: true,
|
||||||
|
autoplayButtonOutput: false,
|
||||||
|
autoplayTimeout: 3000,
|
||||||
|
navPosition: "bottom",
|
||||||
|
controlsText: [
|
||||||
|
'<i class="mdi mdi-chevron-left "></i>',
|
||||||
|
'<i class="mdi mdi-chevron-right"></i>',
|
||||||
|
],
|
||||||
|
nav: false,
|
||||||
|
speed: 400,
|
||||||
|
gutter: 0,
|
||||||
|
responsive: {
|
||||||
|
1025: {
|
||||||
|
items: 12,
|
||||||
|
},
|
||||||
|
|
||||||
|
992: {
|
||||||
|
items: 8,
|
||||||
|
},
|
||||||
|
|
||||||
|
767: {
|
||||||
|
items: 6,
|
||||||
|
},
|
||||||
|
|
||||||
|
320: {
|
||||||
|
items: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementsByClassName("tiny-five-item").length > 0) {
|
||||||
|
var slider = tns({
|
||||||
|
container: ".tiny-five-item",
|
||||||
|
controls: true,
|
||||||
|
mouseDrag: true,
|
||||||
|
loop: true,
|
||||||
|
rewind: true,
|
||||||
|
autoplay: true,
|
||||||
|
autoplayButtonOutput: false,
|
||||||
|
autoplayTimeout: 3000,
|
||||||
|
navPosition: "bottom",
|
||||||
|
controlsText: [
|
||||||
|
'<i class="mdi mdi-chevron-left "></i>',
|
||||||
|
'<i class="mdi mdi-chevron-right"></i>',
|
||||||
|
],
|
||||||
|
nav: false,
|
||||||
|
speed: 400,
|
||||||
|
gutter: 0,
|
||||||
|
responsive: {
|
||||||
|
1025: {
|
||||||
|
items: 5,
|
||||||
|
},
|
||||||
|
|
||||||
|
992: {
|
||||||
|
items: 4,
|
||||||
|
},
|
||||||
|
|
||||||
|
767: {
|
||||||
|
items: 3,
|
||||||
|
},
|
||||||
|
|
||||||
|
425: {
|
||||||
|
items: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementsByClassName("tiny-home-slide-four").length > 0) {
|
||||||
|
var slider = tns({
|
||||||
|
container: ".tiny-home-slide-four",
|
||||||
|
controls: true,
|
||||||
|
mouseDrag: true,
|
||||||
|
loop: true,
|
||||||
|
rewind: true,
|
||||||
|
autoplay: true,
|
||||||
|
autoplayButtonOutput: false,
|
||||||
|
autoplayTimeout: 3000,
|
||||||
|
navPosition: "bottom",
|
||||||
|
controlsText: [
|
||||||
|
'<i class="mdi mdi-chevron-left "></i>',
|
||||||
|
'<i class="mdi mdi-chevron-right"></i>',
|
||||||
|
],
|
||||||
|
nav: false,
|
||||||
|
speed: 400,
|
||||||
|
gutter: 0,
|
||||||
|
responsive: {
|
||||||
|
1025: {
|
||||||
|
items: 4,
|
||||||
|
},
|
||||||
|
|
||||||
|
992: {
|
||||||
|
items: 3,
|
||||||
|
},
|
||||||
|
|
||||||
|
767: {
|
||||||
|
items: 2,
|
||||||
|
},
|
||||||
|
|
||||||
|
320: {
|
||||||
|
items: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="relative !tracking-wide flex flex-col items-center overflow-hidden">
|
||||||
|
<div className="container md:mt-24 mt-16">
|
||||||
|
<div className="grid grid-cols-1 mt-2">
|
||||||
|
<h3 className="mb-6 mt-2 md:text-4xl text-white text-3xl md:leading-normal leading-normal font-bold text-center">
|
||||||
|
What Corso Users Say
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
className="tiny-three-item wow animate__animated animate__fadeInUp"
|
||||||
|
data-wow-delay=".3s"
|
||||||
|
>
|
||||||
|
<div className="tiny-slide text-center">
|
||||||
|
<div className="customer-testi">
|
||||||
|
<div className="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900">
|
||||||
|
<i className="mdi mdi-format-quote-open mdi-48px text-indigo-600"></i>
|
||||||
|
<p className="text-slate-400">
|
||||||
|
“Documentation is great... initial steps for setup are
|
||||||
|
really useful.”
|
||||||
|
</p>
|
||||||
|
<h6 className="mt-2 font-semibold">
|
||||||
|
Microsoft 365 Administrator
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="tiny-slide text-center">
|
||||||
|
<div className="customer-testi">
|
||||||
|
<div className="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900">
|
||||||
|
<i className="mdi mdi-format-quote-open mdi-48px text-indigo-600"></i>
|
||||||
|
<p className="text-slate-400">
|
||||||
|
"I liked the tool a lot. But once I connected with the team
|
||||||
|
on Discord, I could see that this team really knows what
|
||||||
|
they're doing. That made me a lot more confident."
|
||||||
|
</p>
|
||||||
|
<h6 className="mt-2 font-semibold">
|
||||||
|
Kias Hanifa, CTO, Fonicom
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="tiny-slide text-center">
|
||||||
|
<div className="customer-testi">
|
||||||
|
<div className="content relative rounded shadow dark:shadow-gray-800 m-2 p-6 bg-white dark:bg-slate-900">
|
||||||
|
<i className="mdi mdi-format-quote-open mdi-48px text-indigo-600"></i>
|
||||||
|
<p className="text-slate-400">
|
||||||
|
"Corso is a fantastic tool, especially the backend logic
|
||||||
|
with Kopia that lets me run incremental backups"
|
||||||
|
</p>
|
||||||
|
<h6 className="mt-2 font-semibold">Backup Administrator</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
18
website/src/css/components/_breadcrumb.scss
Executable file
18
website/src/css/components/_breadcrumb.scss
Executable file
@ -0,0 +1,18 @@
|
|||||||
|
/********************/
|
||||||
|
/* Breadcrumb */
|
||||||
|
/*==================*/
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
.breadcrumb-item {
|
||||||
|
@apply before:content-[''] after:text-sm after:text-black after:dark:text-white after:pl-[5px] last:after:hidden;
|
||||||
|
&:after {
|
||||||
|
content: "\F0142" !important;
|
||||||
|
font-family: 'Material Design Icons';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.breadcrumb-light {
|
||||||
|
.breadcrumb-item {
|
||||||
|
@apply after:text-white/50;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
34
website/src/css/components/_buttons.scss
Executable file
34
website/src/css/components/_buttons.scss
Executable file
@ -0,0 +1,34 @@
|
|||||||
|
|
||||||
|
|
||||||
|
/********************/
|
||||||
|
/* Buttons */
|
||||||
|
/*==================*/
|
||||||
|
/* Note: If you want to add your own colors, you can do so by going to this tailwind.config.js file */
|
||||||
|
.btn {
|
||||||
|
@apply py-2 px-5 inline-block font-semibold tracking-wide border align-middle transition duration-500 ease-in-out text-base text-center;
|
||||||
|
&.btn-lg{
|
||||||
|
@apply py-2.5 px-6 text-lg;
|
||||||
|
}
|
||||||
|
&.btn-sm{
|
||||||
|
@apply py-[5px] px-4 text-sm;
|
||||||
|
}
|
||||||
|
/* Button icons */
|
||||||
|
&.btn-icon {
|
||||||
|
@apply p-0 h-9 w-9 inline-flex items-center text-center justify-center text-base;
|
||||||
|
&.btn-lg {
|
||||||
|
@apply h-12 w-12;
|
||||||
|
}
|
||||||
|
&.btn-sm {
|
||||||
|
@apply h-8 w-8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button Link */
|
||||||
|
&.btn-link {
|
||||||
|
@apply relative p-0 border-none after:content-[''] after:absolute after:h-px after:w-0 after:right-0 after:bottom-0 after:left-0 after:transition-all after:duration-500;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@apply after:w-full after:right-auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2,6 +2,8 @@
|
|||||||
CUSTOM TO THE NEW HOME PAGE
|
CUSTOM TO THE NEW HOME PAGE
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@import "tailwind.scss";
|
||||||
|
@import "icons.scss";
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -339,4 +341,176 @@ html[class*='docs-doc-id-cli'] .markdown table thead tr {
|
|||||||
:nth-of-type(4) {
|
:nth-of-type(4) {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Tiny-Slider CSS */
|
||||||
|
|
||||||
|
.tns-outer {
|
||||||
|
padding: 0 !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-outer [hidden] {
|
||||||
|
display: none !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-outer [aria-controls],
|
||||||
|
.tns-outer [data-action] {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-slider {
|
||||||
|
-webkit-transition: all 0s;
|
||||||
|
-moz-transition: all 0s;
|
||||||
|
transition: all 0s
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-slider>.tns-item {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-horizontal.tns-subpixel {
|
||||||
|
white-space: nowrap
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-horizontal.tns-subpixel>.tns-item {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
white-space: normal
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-horizontal.tns-no-subpixel:after {
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-horizontal.tns-no-subpixel>.tns-item {
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item {
|
||||||
|
margin-right: -100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-no-calc {
|
||||||
|
position: relative;
|
||||||
|
left: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-gallery {
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
min-height: 1px
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-gallery>.tns-item {
|
||||||
|
position: absolute;
|
||||||
|
left: -100%;
|
||||||
|
-webkit-transition: transform 0s, opacity 0s;
|
||||||
|
-moz-transition: transform 0s, opacity 0s;
|
||||||
|
transition: transform 0s, opacity 0s
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-gallery>.tns-slide-active {
|
||||||
|
position: relative;
|
||||||
|
left: auto !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-gallery>.tns-moving {
|
||||||
|
-webkit-transition: all 0.25s;
|
||||||
|
-moz-transition: all 0.25s;
|
||||||
|
transition: all 0.25s
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-autowidth {
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-lazy-img {
|
||||||
|
-webkit-transition: opacity 0.6s;
|
||||||
|
-moz-transition: opacity 0.6s;
|
||||||
|
transition: opacity 0.6s;
|
||||||
|
opacity: 0.6
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-lazy-img.tns-complete {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-ah {
|
||||||
|
-webkit-transition: height 0s;
|
||||||
|
-moz-transition: height 0s;
|
||||||
|
transition: height 0s
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-ovh {
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-visually-hidden {
|
||||||
|
position: absolute;
|
||||||
|
left: -10000em
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-transparent {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-fadeIn {
|
||||||
|
opacity: 1;
|
||||||
|
filter: alpha(opacity=100);
|
||||||
|
z-index: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-normal,
|
||||||
|
.tns-fadeOut {
|
||||||
|
opacity: 0;
|
||||||
|
filter: alpha(opacity=0);
|
||||||
|
z-index: -1
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-vpfix {
|
||||||
|
white-space: nowrap
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-vpfix>div,
|
||||||
|
.tns-vpfix>li {
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-t-subp2 {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 310px;
|
||||||
|
position: relative;
|
||||||
|
height: 10px;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-t-ct {
|
||||||
|
width: 2333.3333333%;
|
||||||
|
width: -webkit-calc(100% * 70 / 3);
|
||||||
|
width: -moz-calc(100% * 70 / 3);
|
||||||
|
width: calc(100% * 70 / 3);
|
||||||
|
position: absolute;
|
||||||
|
right: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-t-ct:after {
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-t-ct>div {
|
||||||
|
width: 1.4285714%;
|
||||||
|
width: -webkit-calc(100% / 70);
|
||||||
|
width: -moz-calc(100% / 70);
|
||||||
|
width: calc(100% / 70);
|
||||||
|
height: 10px;
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tiny-slider CSS end */
|
||||||
7
website/src/css/custom/_fonts.scss
Executable file
7
website/src/css/custom/_fonts.scss
Executable file
@ -0,0 +1,7 @@
|
|||||||
|
//
|
||||||
|
// _fonts.scss
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,500,600,700&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@200;300;400;500&display=swap');
|
||||||
16
website/src/css/custom/_general.scss
Executable file
16
website/src/css/custom/_general.scss
Executable file
@ -0,0 +1,16 @@
|
|||||||
|
/* // _general.scss */
|
||||||
|
|
||||||
|
/*********************************/
|
||||||
|
/* General */
|
||||||
|
/*===============================*/
|
||||||
|
p {
|
||||||
|
@apply leading-relaxed;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
|
@apply leading-normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
@apply bg-indigo-600/90 text-white;
|
||||||
|
}
|
||||||
35
website/src/css/custom/pages/_contact.scss
Executable file
35
website/src/css/custom/pages/_contact.scss
Executable file
@ -0,0 +1,35 @@
|
|||||||
|
/*********************************/
|
||||||
|
/* Contact */
|
||||||
|
/*===============================*/
|
||||||
|
.form-input {
|
||||||
|
@apply w-full py-2 px-3 border border-inherit dark:border-gray-800 dark:bg-slate-900 dark:text-slate-200 rounded h-10 outline-none bg-transparent;
|
||||||
|
&:focus {
|
||||||
|
@apply border-indigo-600 shadow-none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Validation */
|
||||||
|
.error {
|
||||||
|
@apply my-2 mx-0 hidden text-red-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ajaxsuccess {
|
||||||
|
@apply text-base w-full hidden clear-both my-2 mx-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error_message,
|
||||||
|
#success_page {
|
||||||
|
@apply p-2.5 mb-5 text-center rounded-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error_message {
|
||||||
|
@apply bg-red-600/5 text-red-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-loader {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#success_page {
|
||||||
|
@apply bg-emerald-600/5 text-emerald-600;
|
||||||
|
}
|
||||||
25
website/src/css/custom/pages/_countdown.scss
Executable file
25
website/src/css/custom/pages/_countdown.scss
Executable file
@ -0,0 +1,25 @@
|
|||||||
|
|
||||||
|
/*********************************/
|
||||||
|
/* Countdown */
|
||||||
|
/*===============================*/
|
||||||
|
#token-sale .count-number .count-head {
|
||||||
|
@apply relative block uppercase md:-mt-5 md:text-base text-sm leading-[1px] font-bold;
|
||||||
|
}
|
||||||
|
#countdown {
|
||||||
|
.count-down {
|
||||||
|
.count-number {
|
||||||
|
@apply text-[40px] leading-[110px] h-[130px] w-[130px] rounded-full shadow-md bg-white/10;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
.count-head {
|
||||||
|
@apply relative block -translate-y-[25px] uppercase text-sm tracking-[1px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* //maintenance */
|
||||||
|
#maintenance {
|
||||||
|
.indicator {
|
||||||
|
@apply text-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
92
website/src/css/custom/pages/_helper.scss
Executable file
92
website/src/css/custom/pages/_helper.scss
Executable file
@ -0,0 +1,92 @@
|
|||||||
|
/*********************************/
|
||||||
|
/* Helper */
|
||||||
|
/*===============================*/
|
||||||
|
.container {
|
||||||
|
@apply relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cookies */
|
||||||
|
.cookie-popup-not-accepted {
|
||||||
|
@apply block;
|
||||||
|
animation: cookie-popup-in .5s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-popup-accepted {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cookie-popup-in {
|
||||||
|
from {
|
||||||
|
bottom: -6.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shapes */
|
||||||
|
.shape {
|
||||||
|
&>svg {
|
||||||
|
transform: scale(2);
|
||||||
|
transform-origin: theme('transformOrigin.top') theme('transformOrigin.center');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.marketing-hero {
|
||||||
|
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Preloader */
|
||||||
|
#preloader {
|
||||||
|
background-image: linear-gradient(45deg, #ffffff, #ffffff);
|
||||||
|
z-index: 99999;
|
||||||
|
@apply fixed inset-0;
|
||||||
|
#status {
|
||||||
|
@apply absolute left-0 right-0 top-1/2 -translate-y-1/2;
|
||||||
|
.spinner {
|
||||||
|
@apply w-10 h-10 relative my-[100px] mx-auto;
|
||||||
|
.double-bounce1, .double-bounce2 {
|
||||||
|
@apply w-full h-full rounded-full bg-indigo-600/60 absolute top-0 left-0;
|
||||||
|
animation: sk-bounce 2.0s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
.double-bounce2 {
|
||||||
|
animation-delay: -1.0s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sk-bounce {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(0.0);
|
||||||
|
} 50% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Switcher */
|
||||||
|
.label {
|
||||||
|
.ball {
|
||||||
|
transition: transform 0.2s linear;
|
||||||
|
@apply translate-x-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox:checked + .label .ball {
|
||||||
|
@apply translate-x-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Mover
|
||||||
|
.mover {
|
||||||
|
animation: mover 1.5s infinite alternate;
|
||||||
|
}
|
||||||
|
@keyframes mover {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
209
website/src/css/custom/pages/_hero.scss
Executable file
209
website/src/css/custom/pages/_hero.scss
Executable file
@ -0,0 +1,209 @@
|
|||||||
|
/*********************************/
|
||||||
|
/* Home */
|
||||||
|
/*===============================*/
|
||||||
|
/* background-effect For Job Hero */
|
||||||
|
.background-effect {
|
||||||
|
.circles {
|
||||||
|
@apply absolute inset-0 h-full w-full overflow-hidden;
|
||||||
|
li {
|
||||||
|
@apply absolute block -bottom-[150px] bg-indigo-600/30;
|
||||||
|
animation: animate 25s linear infinite;
|
||||||
|
|
||||||
|
&.brand-img {
|
||||||
|
&:nth-child(1),
|
||||||
|
&:nth-child(2),
|
||||||
|
&:nth-child(3),
|
||||||
|
&:nth-child(4),
|
||||||
|
&:nth-child(5),
|
||||||
|
&:nth-child(6),
|
||||||
|
&:nth-child(7),
|
||||||
|
&:nth-child(8),
|
||||||
|
&:nth-child(9),
|
||||||
|
&:nth-child(10) {
|
||||||
|
@apply bg-transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(1),
|
||||||
|
&:nth-child(2),
|
||||||
|
&:nth-child(3),
|
||||||
|
&:nth-child(4),
|
||||||
|
&:nth-child(5),
|
||||||
|
&:nth-child(6),
|
||||||
|
&:nth-child(7),
|
||||||
|
&:nth-child(8),
|
||||||
|
&:nth-child(9),
|
||||||
|
&:nth-child(10) {
|
||||||
|
@apply w-12 h-12;
|
||||||
|
}
|
||||||
|
&:nth-child(1) {
|
||||||
|
@apply left-1/4;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
@apply left-[10%];
|
||||||
|
animation-delay: 2s;
|
||||||
|
animation-duration: 12s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
@apply left-[70%];
|
||||||
|
animation-delay: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4) {
|
||||||
|
@apply left-[40%];
|
||||||
|
animation-delay: 0s;
|
||||||
|
animation-duration: 18s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(5) {
|
||||||
|
@apply left-[65%];
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(6) {
|
||||||
|
@apply left-3/4;
|
||||||
|
animation-delay: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(7) {
|
||||||
|
@apply left-[35%];
|
||||||
|
animation-delay: 7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(8) {
|
||||||
|
@apply left-1/2;
|
||||||
|
animation-delay: 15s;
|
||||||
|
animation-duration: 45s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(9) {
|
||||||
|
@apply left-[20%];
|
||||||
|
animation-delay: 2s;
|
||||||
|
animation-duration: 35s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(10) {
|
||||||
|
@apply left-[85%];
|
||||||
|
animation-delay: 0s;
|
||||||
|
animation-duration: 11s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animate {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0) rotate(0deg);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(-1000px) rotate(720deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* studio home */
|
||||||
|
.studio-wrapper {
|
||||||
|
@apply before:content-[''] before:absolute before:bottom-[14rem] before:left-[50rem] before:w-[60rem] before:h-[30rem] before:rounded-[18rem] before:rotate-[135deg] before:bg-indigo-600/5 dark:before:bg-indigo-600/10;
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) and (max-width: 1140px) {
|
||||||
|
.studio-wrapper {
|
||||||
|
@apply before:bottom-[10rem] before:left-[30rem] before:w-[40rem] before:h-[20rem];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.studio-wrapper {
|
||||||
|
@apply before:left-[12rem];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.studio-wrapper {
|
||||||
|
@apply before:left-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Startup Hero */
|
||||||
|
.startup-wrapper {
|
||||||
|
@apply before:content-[''] before:absolute before:bottom-40 before:left-[45rem] before:w-[90rem] before:h-[35rem] before:rotate-[115deg] before:bg-indigo-600;
|
||||||
|
|
||||||
|
@apply after:content-[''] after:absolute after:bottom-96 after:left-[30rem] after:w-[75rem] after:h-40 after:rotate-[115deg] after:bg-indigo-600/10 after:-z-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) and (max-width: 1140px) {
|
||||||
|
.startup-wrapper {
|
||||||
|
@apply before:left-40 before:w-[75rem] before:h-[30rem] after:left-0 after:bottom-80 after:w-[75rem] after:h-60;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.startup-wrapper {
|
||||||
|
@apply before:left-40 after:left-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.startup-wrapper {
|
||||||
|
@apply before:left-0 after:-left-40;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Kenburn Effect for Business Demo */
|
||||||
|
.image-wrap {
|
||||||
|
animation: 100s ppb_kenburns linear infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move {
|
||||||
|
0% {
|
||||||
|
transform-origin: bottom;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ppb_kenburns {
|
||||||
|
0% {
|
||||||
|
transform: scale(1.3) translate(-10%, 10%);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: scale(1) translate(0, 0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.3) translate(10%, 10%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(1) translate(0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1.3) translate(-10%, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Saas */
|
||||||
|
.home-wrapper {
|
||||||
|
@apply before:content-[''] before:absolute before:-top-[30%] before:-left-80 before:right-0 before:w-[140rem] before:h-[65rem] before:-rotate-12 before:z-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) and (max-width: 1024px) {
|
||||||
|
.home-wrapper {
|
||||||
|
@apply before:-top-[50%];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 426px) and (max-width: 768px) {
|
||||||
|
.home-wrapper {
|
||||||
|
@apply before:-top-[80%];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 425px) {
|
||||||
|
.home-wrapper {
|
||||||
|
@apply before:-top-[90%];
|
||||||
|
}
|
||||||
|
}
|
||||||
76
website/src/css/custom/pages/_portfolio.scss
Executable file
76
website/src/css/custom/pages/_portfolio.scss
Executable file
@ -0,0 +1,76 @@
|
|||||||
|
/*********************************/
|
||||||
|
/* Portfolio */
|
||||||
|
/*===============================*/
|
||||||
|
.container-filter {
|
||||||
|
li {
|
||||||
|
&.active,
|
||||||
|
&:hover {
|
||||||
|
@apply text-slate-900 dark:text-white #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.container-filter-box {
|
||||||
|
li {
|
||||||
|
&.active,
|
||||||
|
&:hover {
|
||||||
|
@apply text-indigo-600 border-indigo-600 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-filter-border-bottom {
|
||||||
|
li {
|
||||||
|
&.active,
|
||||||
|
&:hover {
|
||||||
|
@apply text-slate-900 dark:text-white border-b-slate-900 dark:border-b-white #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-filter-white {
|
||||||
|
li {
|
||||||
|
&.active,
|
||||||
|
&:hover {
|
||||||
|
@apply text-white border-b-white #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-creative {
|
||||||
|
li {
|
||||||
|
@apply after:content-[''] after:absolute after:h-0 after:w-0 after:bg-indigo-600/40 after:right-0 after:left-0 after:bottom-[5px] after:rounded-md after:transition-all after:duration-500 after:ease-in-out;
|
||||||
|
&:hover,
|
||||||
|
&.active {
|
||||||
|
@apply after:w-full after:right-auto after:left-0 after:h-[5px] after:top-[60%] text-black dark:text-white #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************/
|
||||||
|
/* Tobii Lightbox */
|
||||||
|
/*===============================*/
|
||||||
|
/* Tobii Lighbox */
|
||||||
|
.tobii>button.tobii__close svg,
|
||||||
|
.tobii>button.tobii__prev svg,
|
||||||
|
.tobii>button.tobii__next svg {
|
||||||
|
@apply h-9 w-auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tobii__counter {
|
||||||
|
@apply text-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tobii-zoom {
|
||||||
|
@apply block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tobii-zoom__icon {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grid {
|
||||||
|
@apply p-0;
|
||||||
|
}
|
||||||
65
website/src/css/custom/plugins/_choices.scss
Executable file
65
website/src/css/custom/plugins/_choices.scss
Executable file
@ -0,0 +1,65 @@
|
|||||||
|
/*********************************/
|
||||||
|
/* Choices */
|
||||||
|
/*===============================*/
|
||||||
|
.filter-search-form {
|
||||||
|
.icons {
|
||||||
|
@apply absolute top-[48%] -translate-y-1/2 left-3 z-1 text-indigo-600 text-[20px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.registration-form {
|
||||||
|
@apply relative;
|
||||||
|
.submit-btn {
|
||||||
|
@apply rounded-lg;
|
||||||
|
}
|
||||||
|
.form-input,
|
||||||
|
.choices[data-type*=select-one] .choices__inner {
|
||||||
|
@apply rounded-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width:992px) {
|
||||||
|
.filter-border {
|
||||||
|
@apply before:content-[''] before:absolute before:top-[10px] before:right-0 before:h-10 before:z-1 before:border-r before:border-inherit before:rounded-md before:outline-0 dark:before:border-gray-700;
|
||||||
|
}
|
||||||
|
.registration-form {
|
||||||
|
@apply relative;
|
||||||
|
.submit-btn {
|
||||||
|
@apply rounded-t-none rounded-r-sm rounded-b-sm rounded-l-none;
|
||||||
|
}
|
||||||
|
.form-input {
|
||||||
|
@apply rounded-t-sm rounded-r-none rounded-b-none rounded-l-sm outline-0;
|
||||||
|
}
|
||||||
|
.choices[data-type*=select-one] .choices__inner {
|
||||||
|
@apply rounded-none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-input-box,
|
||||||
|
.filter-input-box.form-select,
|
||||||
|
.filter-search-form .choices__inner {
|
||||||
|
@apply shadow-none border-0 rounded-none text-[15px] h-[60px] pt-[13px] pr-[6px] pb-[15px] pl-[45px];
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__inner {
|
||||||
|
@apply bg-gray-50 dark:bg-slate-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list--dropdown,
|
||||||
|
.choices[data-type*=select-one] .choices__input {
|
||||||
|
@apply bg-white dark:bg-slate-900 border-0 rounded-[5px] shadow dark:shadow-gray-800 z-999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||||
|
@apply bg-gray-50 dark:bg-slate-800 text-black dark:text-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list,
|
||||||
|
.choices__list--dropdown .choices__item--selectable {
|
||||||
|
@apply text-slate-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list--dropdown,
|
||||||
|
.choices__list[aria-expanded] {
|
||||||
|
@apply border-0 z-2;
|
||||||
|
}
|
||||||
27
website/src/css/custom/plugins/_datepicker.scss
Executable file
27
website/src/css/custom/plugins/_datepicker.scss
Executable file
@ -0,0 +1,27 @@
|
|||||||
|
/*********************************/
|
||||||
|
/* Datepicker */
|
||||||
|
/*===============================*/
|
||||||
|
.qs-datepicker-container {
|
||||||
|
@apply bg-white dark:bg-slate-900 border-inherit dark:border-gray-800;
|
||||||
|
}
|
||||||
|
.qs-datepicker-container .qs-controls {
|
||||||
|
@apply bg-gray-50 dark:bg-slate-800;
|
||||||
|
}
|
||||||
|
.qs-datepicker-container .qs-controls .qs-month-year {
|
||||||
|
@apply font-semibold text-[15px] dark:text-white;
|
||||||
|
}
|
||||||
|
.qs-datepicker-container .qs-controls .qs-month-year:hover {
|
||||||
|
@apply border-b rounded-md outline-inherit border-inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qs-squares .qs-square {
|
||||||
|
@apply text-[15px] h-[34px] w-[34px] text-slate-400;
|
||||||
|
}
|
||||||
|
.qs-squares .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover,
|
||||||
|
.qs-squares .qs-square.qs-current {
|
||||||
|
text-decoration: none;
|
||||||
|
@apply bg-indigo-600 text-white rounded-[30px] font-semibold;
|
||||||
|
}
|
||||||
|
.qs-squares .qs-day {
|
||||||
|
@apply font-normal text-slate-900 dark:text-white;
|
||||||
|
}
|
||||||
52
website/src/css/custom/plugins/_swiper-slider.scss
Executable file
52
website/src/css/custom/plugins/_swiper-slider.scss
Executable file
@ -0,0 +1,52 @@
|
|||||||
|
|
||||||
|
/*****************/
|
||||||
|
/* Swiper Slider */
|
||||||
|
/*****************/
|
||||||
|
.swiper-slider-hero {
|
||||||
|
.swiper-container,
|
||||||
|
.swiper-slide .slide-inner {
|
||||||
|
@apply absolute right-0 top-0 w-full h-full;
|
||||||
|
}
|
||||||
|
.swiper-container {
|
||||||
|
.swiper-button-prev,
|
||||||
|
.swiper-button-next {
|
||||||
|
@apply bg-transparent w-[35px] h-[35px] leading-[35px] -mt-[30px] bg-none border border-solid border-white/50;
|
||||||
|
&:before {
|
||||||
|
@apply font-bold text-white;
|
||||||
|
font-family: "Material Design Icons";
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
@apply bg-indigo-600 border-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-button-prev {
|
||||||
|
&:before {
|
||||||
|
content: "\f0141";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-next {
|
||||||
|
&:before {
|
||||||
|
content: "\f0142";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
@apply text-gray-50 bg-transparent;
|
||||||
|
}
|
||||||
|
.swiper-pagination-bullet-active {
|
||||||
|
@apply text-white;
|
||||||
|
}
|
||||||
|
.swiper-container-horizontal > .swiper-pagination-bullets,
|
||||||
|
.swiper-pagination-custom,
|
||||||
|
.swiper-pagination-fraction {
|
||||||
|
@apply bottom-[45px];
|
||||||
|
}
|
||||||
|
.swiper-container-horizontal {
|
||||||
|
> .swiper-pagination-bullets {
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
@apply my-0 mx-[13px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
66
website/src/css/custom/plugins/_testi.scss
Executable file
66
website/src/css/custom/plugins/_testi.scss
Executable file
@ -0,0 +1,66 @@
|
|||||||
|
/*********************************/
|
||||||
|
/* Testimonial */
|
||||||
|
/*===============================*/
|
||||||
|
.client-testi {
|
||||||
|
@apply cursor-e-resize;
|
||||||
|
.content {
|
||||||
|
@apply before:content-[''] before:absolute before:top-8 before:left-0 before:ml-3 before:box-border before:border-8 before:border-solid before:origin-[0] before:rotate-[135deg] before:shadow before:border-t-transparent before:border-r-white dark:before:border-r-slate-900 before:border-b-white dark:before:border-b-slate-900 before:border-l-transparent;
|
||||||
|
/* border-color: transparent theme('colors.white') theme('colors.white') transparent; */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-testi {
|
||||||
|
@apply cursor-e-resize;
|
||||||
|
.content {
|
||||||
|
&:before {
|
||||||
|
transform-origin: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@apply before:content-[''] before:absolute before:left-1/2 before:-bottom-[4px] before:box-border before:border-8 before:rotate-[45deg] before:border-t-transparent before:border-r-white dark:before:border-r-slate-900 before:border-b-white dark:before:border-b-slate-900 before:border-l-transparent before:shadow-testi dark:before:shadow-gray-700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tns-nav {
|
||||||
|
@apply text-center mt-3;
|
||||||
|
button {
|
||||||
|
@apply rounded-[3px] bg-indigo-600/30 transition-all duration-500 ease-in-out border-0 m-1 p-[5px];
|
||||||
|
&.tns-nav-active {
|
||||||
|
@apply bg-indigo-600 rotate-[45deg];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tns control */
|
||||||
|
.tns-controls {
|
||||||
|
button[data-controls="prev"],
|
||||||
|
button[data-controls="next"] {
|
||||||
|
@apply absolute top-2/4 -translate-y-2/4 text-base w-8 h-8 rounded-full bg-white dark:bg-slate-900 text-dark dark:text-white border-0 transition-all duration-500 ease-in-out z-10 shadow-md dark:shadow-gray-800;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@apply bg-indigo-600 text-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-controls="prev"] {
|
||||||
|
@apply left-0;
|
||||||
|
}
|
||||||
|
button[data-controls="next"] {
|
||||||
|
@apply right-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//Smoth Slider
|
||||||
|
$animationSpeed: 120s;
|
||||||
|
@keyframes scroll {
|
||||||
|
0% { transform: translateX(0); }
|
||||||
|
100% { transform: translateX(calc(-360px * 6))}
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
&:after {
|
||||||
|
transform: rotateZ(360deg);
|
||||||
|
}
|
||||||
|
.slide-track {
|
||||||
|
animation: scroll $animationSpeed linear infinite;
|
||||||
|
width: calc(360px * 20);
|
||||||
|
}
|
||||||
|
}
|
||||||
14
website/src/css/custom/structure/_footer.scss
Executable file
14
website/src/css/custom/structure/_footer.scss
Executable file
@ -0,0 +1,14 @@
|
|||||||
|
/* // _footer.scss */
|
||||||
|
|
||||||
|
/*********************************/
|
||||||
|
/* Footer */
|
||||||
|
/*===============================*/
|
||||||
|
.footer {
|
||||||
|
.foot-subscribe {
|
||||||
|
input{
|
||||||
|
&::placeholder{
|
||||||
|
@apply text-gray-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
651
website/src/css/custom/structure/_topnav.scss
Executable file
651
website/src/css/custom/structure/_topnav.scss
Executable file
@ -0,0 +1,651 @@
|
|||||||
|
/*********************************/
|
||||||
|
/* Menu */
|
||||||
|
/*===============================*/
|
||||||
|
#topnav {
|
||||||
|
@apply fixed right-0 left-0 top-0 z-999 bg-transparent border-0 transition-all duration-500 ease-in-out;
|
||||||
|
.logo {
|
||||||
|
@apply float-left text-black dark:text-white #{!important};
|
||||||
|
.l-dark {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
.l-light {
|
||||||
|
@apply inline-block;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
@apply outline-none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.has-submenu{
|
||||||
|
@apply relative;
|
||||||
|
&.active {
|
||||||
|
a {
|
||||||
|
@apply text-white dark:text-slate-900;
|
||||||
|
}
|
||||||
|
.submenu {
|
||||||
|
li{
|
||||||
|
&.active {
|
||||||
|
> a {
|
||||||
|
@apply text-indigo-600 dark:text-indigo-600 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.menu-arrow {
|
||||||
|
@apply border-indigo-600 dark:border-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submenu {
|
||||||
|
.submenu-arrow {
|
||||||
|
border-width: 0px 0.125rem 0.125rem 0px;
|
||||||
|
@apply absolute right-[1.25rem] top-[0.8125rem] border-black dark:border-white rounded-[0.5px] inline-block p-[0.1875rem] -rotate-[45deg];
|
||||||
|
}
|
||||||
|
.has-submenu {
|
||||||
|
&:hover {
|
||||||
|
/* .submenu-arrow {
|
||||||
|
@apply border-indigo-600 dark:border-indigo-600;
|
||||||
|
} */
|
||||||
|
> .submenu-arrow {
|
||||||
|
@apply border-indigo-600 dark:border-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submenu {
|
||||||
|
.has-submenu{
|
||||||
|
&:hover {
|
||||||
|
.submenu-arrow {
|
||||||
|
@apply border-indigo-600 dark:border-indigo-600;
|
||||||
|
}
|
||||||
|
> .submenu-arrow {
|
||||||
|
@apply border-indigo-600 dark:border-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggle {
|
||||||
|
@apply border-0 relative p-0 m-0 cursor-pointer;
|
||||||
|
.lines {
|
||||||
|
@apply w-[25px] block relative h-[18px] mt-[30px] mr-0 mb-[26px] ml-[10px];
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
@apply h-[2px] w-full bg-black dark:bg-white block mb-[5px];
|
||||||
|
&:last-child {
|
||||||
|
@apply mb-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.open {
|
||||||
|
span {
|
||||||
|
@apply absolute;
|
||||||
|
&:first-child {
|
||||||
|
@apply top-[6px] rotate-[45deg];
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
@apply invisible;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
@apply w-full top-[6px] -rotate-[45deg];
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
@apply bg-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover, &:focus,
|
||||||
|
.navigation-menu > li > a:hover {
|
||||||
|
@apply bg-transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buy-button {
|
||||||
|
@apply float-right leading-[74px];
|
||||||
|
> li {
|
||||||
|
@apply leading-[initial];
|
||||||
|
}
|
||||||
|
.login-btn-primary,
|
||||||
|
.btn-icon-dark {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
.login-btn-light,
|
||||||
|
.btn-icon-light {
|
||||||
|
@apply inline-block;
|
||||||
|
}
|
||||||
|
.search-bar {
|
||||||
|
.menu-search {
|
||||||
|
form {
|
||||||
|
@apply relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.searchform {
|
||||||
|
@apply after:absolute after:right-[14px] after:top-[14px] after:text-xl after:leading-5 after:pointer-events-none;
|
||||||
|
input[type=text] {
|
||||||
|
@apply shadow-none py-[10px] pr-[42px] pl-3 h-11 text-sm block outline-none #{!important};
|
||||||
|
}
|
||||||
|
input[type=submit] {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
content: "\f0349";
|
||||||
|
font-family: "Material Design Icons";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buy-button,
|
||||||
|
.buy-menu-btn {
|
||||||
|
.dropdown {
|
||||||
|
.dropdown-toggle {
|
||||||
|
@apply after:hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navigation-menu {
|
||||||
|
@apply list-none m-0 p-0;
|
||||||
|
> li {
|
||||||
|
@apply float-left block relative my-0 mx-[10px];
|
||||||
|
> a {
|
||||||
|
@apply block text-black dark:text-white text-[13px] bg-transparent font-bold tracking-[1px] leading-6 uppercase px-[15px] #{!important};
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
@apply text-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&.active{
|
||||||
|
> a {
|
||||||
|
@apply text-indigo-600 dark:text-indigo-600 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submenu.megamenu {
|
||||||
|
li {
|
||||||
|
.megamenu-head {
|
||||||
|
@apply py-[10px] px-5 whitespace-nowrap text-xs uppercase tracking-[0.04em] font-bold text-slate-400 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.has-submenu {
|
||||||
|
.menu-arrow {
|
||||||
|
border-width: 0 2px 2px 0;
|
||||||
|
@apply border-black dark:border-white rounded-[0.5px] inline-block p-[3px] rotate-[45deg] absolute transition-all duration-500 -right-px top-[30px];
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.menu-arrow {
|
||||||
|
@apply rotate-[225deg];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-extras {
|
||||||
|
@apply float-right;
|
||||||
|
}
|
||||||
|
&.scroll {
|
||||||
|
@apply bg-white dark:bg-slate-900 border-none shadow;
|
||||||
|
.navigation-menu {
|
||||||
|
> li {
|
||||||
|
> a {
|
||||||
|
@apply text-black dark:text-white;
|
||||||
|
}
|
||||||
|
> .menu-arrow {
|
||||||
|
@apply border-black dark:border-white;
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&.active{
|
||||||
|
> a {
|
||||||
|
@apply text-indigo-600;
|
||||||
|
}
|
||||||
|
> .menu-arrow {
|
||||||
|
@apply border-indigo-600 dark:border-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.defaultscroll{
|
||||||
|
&.dark-menubar {
|
||||||
|
.logo {
|
||||||
|
@apply leading-[70px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.scroll {
|
||||||
|
.logo {
|
||||||
|
@apply leading-[62px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-sticky {
|
||||||
|
@apply bg-white dark:bg-slate-900 shadow dark:shadow-gray-800;
|
||||||
|
.navigation-menu{
|
||||||
|
&.nav-light {
|
||||||
|
> li {
|
||||||
|
> a {
|
||||||
|
@apply text-black dark:text-white #{!important};
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
> a {
|
||||||
|
@apply text-indigo-600 dark:text-indigo-600 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&.active{
|
||||||
|
> .menu-arrow {
|
||||||
|
@apply border-indigo-600 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.active {
|
||||||
|
> a {
|
||||||
|
@apply text-indigo-600 dark:text-indigo-600 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.has-submenu {
|
||||||
|
.menu-arrow {
|
||||||
|
@apply border-black dark:border-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.tagline-height {
|
||||||
|
@apply top-0 #{!important};
|
||||||
|
}
|
||||||
|
.buy-button {
|
||||||
|
.login-btn-primary,
|
||||||
|
.btn-icon-dark {
|
||||||
|
@apply inline-block;
|
||||||
|
}
|
||||||
|
.login-btn-light,
|
||||||
|
.btn-icon-light {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
.l-dark {
|
||||||
|
@apply inline-block;
|
||||||
|
}
|
||||||
|
.l-light {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
@apply font-bold text-[24px] mr-[15px] pt-0 px-[6px] pb-0 tracking-[1px] leading-[68px];
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1025px) {
|
||||||
|
#topnav {
|
||||||
|
.navigation-menu {
|
||||||
|
> li {
|
||||||
|
.submenu{
|
||||||
|
&.megamenu {
|
||||||
|
@apply w-[1120px] #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) and (min-width: 992px) {
|
||||||
|
#topnav {
|
||||||
|
.navigation-menu {
|
||||||
|
> li {
|
||||||
|
.submenu{
|
||||||
|
&.megamenu {
|
||||||
|
@apply w-[936px] #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
#topnav {
|
||||||
|
.navigation-menu {
|
||||||
|
@apply flex flex-wrap justify-center;
|
||||||
|
> .has-submenu {
|
||||||
|
&:hover .menu-arrow {
|
||||||
|
@apply top-[33px] #{!important};
|
||||||
|
}
|
||||||
|
&.active .menu-arrow {
|
||||||
|
@apply top-[30px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> li {
|
||||||
|
.submenu {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
@apply absolute top-full left-0 z-[1000] py-[15px] px-0 list-none min-w-[180px] invisible opacity-0 mt-[10px] rounded-md bg-white dark:bg-slate-900 shadow dark:shadow-gray-800;
|
||||||
|
li {
|
||||||
|
@apply relative;
|
||||||
|
a {
|
||||||
|
transition: all 0.3s;
|
||||||
|
@apply block py-[10px] px-5 clear-both whitespace-nowrap text-[11px] uppercase tracking-[0.04em] font-bold text-black dark:text-white leading-[17px];
|
||||||
|
&:hover {
|
||||||
|
@apply text-indigo-600 dark:text-indigo-600 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
@apply list-none pl-0 m-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.megamenu {
|
||||||
|
@apply whitespace-nowrap left-1/2 -translate-x-1/2 fixed top-auto flex;
|
||||||
|
> li {
|
||||||
|
@apply overflow-hidden align-top w-1/5;
|
||||||
|
.submenu {
|
||||||
|
@apply left-full top-0 ml-[10px] -mt-px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> li {
|
||||||
|
.submenu {
|
||||||
|
@apply left-[101%] top-0 ml-[10px] -mt-px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> a {
|
||||||
|
@apply py-[25px] min-h-[62px];
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
> .menu-arrow {
|
||||||
|
@apply border-indigo-600 dark:border-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&.active{
|
||||||
|
> a {
|
||||||
|
@apply text-indigo-600 dark:text-indigo-600 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.last-elements{
|
||||||
|
.submenu {
|
||||||
|
@apply left-auto right-0 before:left-auto before:right-[10px];
|
||||||
|
> li{
|
||||||
|
&.has-submenu {
|
||||||
|
.submenu {
|
||||||
|
@apply left-auto right-full ml-0 mr-[10px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-light {
|
||||||
|
> li {
|
||||||
|
> a {
|
||||||
|
@apply text-white/50 #{!important};
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
> a {
|
||||||
|
@apply text-white #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
> .menu-arrow {
|
||||||
|
@apply border-white #{!important};
|
||||||
|
}
|
||||||
|
> a {
|
||||||
|
@apply text-white #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.has-submenu {
|
||||||
|
.menu-arrow {
|
||||||
|
@apply border-white/50;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.menu-arrow {
|
||||||
|
@apply border-white #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buy-button {
|
||||||
|
@apply pl-[15px] ml-[15px];
|
||||||
|
}
|
||||||
|
.navbar-toggle {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
#navigation {
|
||||||
|
@apply block #{!important};
|
||||||
|
}
|
||||||
|
&.scroll {
|
||||||
|
@apply top-0;
|
||||||
|
.navigation-menu {
|
||||||
|
> li {
|
||||||
|
> a {
|
||||||
|
@apply py-5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.scroll-active {
|
||||||
|
.navigation-menu {
|
||||||
|
> li {
|
||||||
|
> a {
|
||||||
|
@apply py-[25px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
#topnav {
|
||||||
|
@apply bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 min-h-[74px];
|
||||||
|
.logo {
|
||||||
|
.l-dark {
|
||||||
|
@apply inline-block #{!important};
|
||||||
|
}
|
||||||
|
.l-light {
|
||||||
|
@apply hidden #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
@apply w-auto;
|
||||||
|
}
|
||||||
|
#navigation {
|
||||||
|
@apply max-h-[400px] shadow;
|
||||||
|
}
|
||||||
|
.navigation-menu {
|
||||||
|
@apply float-none;
|
||||||
|
> li {
|
||||||
|
@apply float-none;
|
||||||
|
.submenu {
|
||||||
|
@apply hidden list-none pl-5 m-0;
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
transition: all 0.3s;
|
||||||
|
@apply block relative py-[7px] px-[15px] uppercase text-[11px] tracking-[0.04em] font-bold text-black dark:text-white #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.megamenu {
|
||||||
|
li {
|
||||||
|
.megamenu-head {
|
||||||
|
@apply py-[7px] px-[15px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> li {
|
||||||
|
> ul {
|
||||||
|
@apply list-none pl-0;
|
||||||
|
> li {
|
||||||
|
> span {
|
||||||
|
@apply block relative py-[10px] px-[15px] uppercase text-xs tracking-[2px] text-slate-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.open {
|
||||||
|
@apply block;
|
||||||
|
}
|
||||||
|
.submenu {
|
||||||
|
@apply hidden list-none;
|
||||||
|
&.open {
|
||||||
|
@apply block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> a {
|
||||||
|
@apply text-black dark:text-white py-[10px] px-[20px] after:absolute after:right-[15px];
|
||||||
|
}
|
||||||
|
> a:hover,
|
||||||
|
.submenu li a:hover,
|
||||||
|
&.has-submenu.open > a {
|
||||||
|
@apply text-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-extras {
|
||||||
|
.menu-item {
|
||||||
|
@apply border-gray-200 dark:border-gray-700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-header {
|
||||||
|
@apply float-left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-button {
|
||||||
|
.login-btn-primary,
|
||||||
|
.btn-icon-dark {
|
||||||
|
@apply inline-block #{!important};
|
||||||
|
}
|
||||||
|
.login-btn-light,
|
||||||
|
.btn-icon-light {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.has-submenu {
|
||||||
|
.submenu {
|
||||||
|
.submenu-arrow {
|
||||||
|
@apply rotate-[45deg] absolute right-5 top-3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
a {
|
||||||
|
@apply text-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigation {
|
||||||
|
@apply absolute top-[74px] left-0 w-full hidden h-auto bg-white dark:bg-slate-900 overflow-auto;
|
||||||
|
&.open {
|
||||||
|
@apply block overflow-y-auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#topnav {
|
||||||
|
.navigation-menu {
|
||||||
|
.has-submenu {
|
||||||
|
.menu-arrow {
|
||||||
|
@apply right-2 top-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
#topnav {
|
||||||
|
.navigation-menu {
|
||||||
|
> li{
|
||||||
|
&.has-submenu{
|
||||||
|
&:hover {
|
||||||
|
> .submenu {
|
||||||
|
@apply visible opacity-100 mt-0;
|
||||||
|
> li{
|
||||||
|
&.has-submenu{
|
||||||
|
&:hover {
|
||||||
|
> .submenu {
|
||||||
|
@apply visible opacity-100 ml-0 mr-0;
|
||||||
|
> li{
|
||||||
|
&:hover {
|
||||||
|
> .submenu {
|
||||||
|
@apply visible opacity-100 ml-0 mr-0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar-toggle {
|
||||||
|
@apply block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 425px) {
|
||||||
|
#topnav {
|
||||||
|
.buy-menu-btn {
|
||||||
|
@apply block my-0 mx-[10px] py-[10px] px-5 #{!important};
|
||||||
|
.dropdown {
|
||||||
|
.dropdown-menu{
|
||||||
|
&.show {
|
||||||
|
transform: translate3d(0px, -54px, 0px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tagline {
|
||||||
|
@apply absolute w-full z-[99] text-sm py-[13px] px-0;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 575px) {
|
||||||
|
.tagline {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
.tagline-height {
|
||||||
|
@apply top-0 #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.tagline-height {
|
||||||
|
@apply top-[47px] #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav {
|
||||||
|
> .navbar-item {
|
||||||
|
&:hover,
|
||||||
|
&.active {
|
||||||
|
.navbar-link {
|
||||||
|
@apply text-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li{
|
||||||
|
&.active {
|
||||||
|
a {
|
||||||
|
@apply text-indigo-600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.account-menu {
|
||||||
|
&.active,
|
||||||
|
&:hover{
|
||||||
|
.navbar-link {
|
||||||
|
@apply text-indigo-600 dark:text-white #{!important};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
website/src/css/icons.scss
Executable file
11
website/src/css/icons.scss
Executable file
@ -0,0 +1,11 @@
|
|||||||
|
/* Template Name: Techwind - Multipurpose Tailwind CSS Landing Page Template
|
||||||
|
Author: Shreethemes
|
||||||
|
Email: support@shreethemes.in
|
||||||
|
Website: https://shreethemes.in
|
||||||
|
Version: 1.4.0
|
||||||
|
Created: May 2022
|
||||||
|
File Description: Main Icon file of the template
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Plugins */
|
||||||
|
@import "icons/materialdesignicons";
|
||||||
26660
website/src/css/icons/_materialdesignicons.scss
Executable file
26660
website/src/css/icons/_materialdesignicons.scss
Executable file
File diff suppressed because it is too large
Load Diff
39
website/src/css/tailwind.scss
Executable file
39
website/src/css/tailwind.scss
Executable file
@ -0,0 +1,39 @@
|
|||||||
|
/* Template Name: Techwind - Multipurpose Tailwind CSS Landing Page Template
|
||||||
|
Author: Shreethemes
|
||||||
|
Email: support@shreethemes.in
|
||||||
|
Website: https://shreethemes.in
|
||||||
|
Version: 1.4.0
|
||||||
|
Created: May 2022
|
||||||
|
File: Main Css File
|
||||||
|
*/
|
||||||
|
|
||||||
|
//@tailwind base;
|
||||||
|
//@tailwind components;
|
||||||
|
//@tailwind utilities;
|
||||||
|
|
||||||
|
// FONTS
|
||||||
|
@import "custom/fonts";
|
||||||
|
|
||||||
|
// general
|
||||||
|
@import "custom/general";
|
||||||
|
|
||||||
|
// components
|
||||||
|
@import "components/buttons";
|
||||||
|
@import "components/breadcrumb";
|
||||||
|
|
||||||
|
// structure
|
||||||
|
@import "custom/structure/topnav";
|
||||||
|
@import "custom/structure/footer";
|
||||||
|
|
||||||
|
// pages
|
||||||
|
@import "custom/pages/helper";
|
||||||
|
@import "custom/pages/hero";
|
||||||
|
@import "custom/pages/countdown";
|
||||||
|
@import "custom/pages/portfolio";
|
||||||
|
@import "custom/pages/contact";
|
||||||
|
|
||||||
|
// Plugins
|
||||||
|
@import "custom/plugins/swiper-slider";
|
||||||
|
@import "custom/plugins/testi";
|
||||||
|
@import "custom/plugins/choices";
|
||||||
|
@import "custom/plugins/datepicker";
|
||||||
BIN
website/src/fonts/ajax-loader.gif
Executable file
BIN
website/src/fonts/ajax-loader.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
website/src/fonts/materialdesignicons-webfont.eot
Executable file
BIN
website/src/fonts/materialdesignicons-webfont.eot
Executable file
Binary file not shown.
9879
website/src/fonts/materialdesignicons-webfont.svg
Executable file
9879
website/src/fonts/materialdesignicons-webfont.svg
Executable file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 3.5 MiB |
BIN
website/src/fonts/materialdesignicons-webfont.ttf
Executable file
BIN
website/src/fonts/materialdesignicons-webfont.ttf
Executable file
Binary file not shown.
BIN
website/src/fonts/materialdesignicons-webfont.woff
Executable file
BIN
website/src/fonts/materialdesignicons-webfont.woff
Executable file
Binary file not shown.
BIN
website/src/fonts/materialdesignicons-webfont.woff2
Executable file
BIN
website/src/fonts/materialdesignicons-webfont.woff2
Executable file
Binary file not shown.
@ -1,23 +1,23 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import Layout from "@theme/Layout";
|
import Layout from "@theme/Layout";
|
||||||
import { MainComp } from "@site/src/components/parts/MainComp";
|
import { MainComp } from "@site/src/components/parts/MainComp";
|
||||||
import { useColorMode } from '@docusaurus/theme-common';
|
import { useColorMode } from "@docusaurus/theme-common";
|
||||||
|
|
||||||
const ThemeColor = () => {
|
const ThemeColor = () => {
|
||||||
const { colorMode, setColorMode } = useColorMode();
|
const { colorMode, setColorMode } = useColorMode();
|
||||||
|
|
||||||
useEffect(function () {
|
useEffect(function () {
|
||||||
if (window.location.pathname === '/') {
|
if (window.location.pathname === "/") {
|
||||||
if (colorMode !== 'dark') {
|
if (colorMode !== "dark") {
|
||||||
//force dark theme to home page without overriding user settings
|
//force dark theme to home page without overriding user settings
|
||||||
setColorMode('dark', { persist: false })
|
setColorMode("dark", { persist: false });
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
setColorMode(localStorage.getItem('theme'))
|
setColorMode(localStorage.getItem("theme"));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return null
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user