This commit is contained in:
RizqiSyahrendra 2025-02-13 09:33:59 +07:00
commit 75a48235cb
25 changed files with 168 additions and 464 deletions

View File

@ -13,10 +13,9 @@ const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"), ...compat.extends("next/core-web-vitals", "next/typescript"),
{ {
rules: { rules: {
"@typescript-eslint/no-unused-vars": "warn",
"@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/ban-ts-comment": "off", "@typescript-eslint/ban-ts-comment": "off",
"@next/next/no-html-link-for-pages": "off" "@next/next/no-html-link-for-pages": "off",
}, },
}, },
]; ];

View File

@ -34,26 +34,10 @@
); );
--gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%); --gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%);
--gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%); --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%);
--gradient-dark-alpha-1: linear-gradient( --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
90deg, --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
var(--color-dark-1) 40%, --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
transparent 87% --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
);
--gradient-dark-alpha-2: linear-gradient(
90deg,
transparent 13%,
var(--color-dark-1) 60%
);
--gradient-primary-alpha-1: linear-gradient(
90deg,
var(--color-primary-1) 40%,
transparent 87%
);
--gradient-primary-alpha-2: linear-gradient(
90deg,
transparent 13%,
var(--color-primary-1) 60%
);
color: var(--color-dark-1); color: var(--color-dark-1);
font-family: var(--font-global); font-family: var(--font-global);
font-size: 16px; font-size: 16px;
@ -81,7 +65,8 @@
letter-spacing: 0; letter-spacing: 0;
} */ } */
.theme-elegant .main-nav.dark-mode { .theme-elegant .main-nav.dark-mode {
background-color: rgba(30, 30, 30, 0.905); background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
/* background-color: rgba(30, 30, 30, 0.905); */
} }
.theme-elegant .form label { .theme-elegant .form label {
margin-bottom: 15px; margin-bottom: 15px;

View File

@ -57,39 +57,21 @@
); );
--gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%); --gradient-gray-light-1: linear-gradient(0deg, #f5f5f5 0%, #fff 100%);
--gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%); --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f5f5f5 100%);
--gradient-dark-alpha-1: linear-gradient( --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
90deg, --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
var(--color-dark-1) 40%, --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
transparent 87% --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
);
--gradient-dark-alpha-2: linear-gradient(
90deg,
transparent 13%,
var(--color-dark-1) 60%
);
--gradient-primary-alpha-1: linear-gradient(
90deg,
var(--color-primary-1) 40%,
transparent 87%
);
--gradient-primary-alpha-2: linear-gradient(
90deg,
transparent 13%,
var(--color-primary-1) 60%
);
--gradient-gray-light-1: linear-gradient(0deg, #f7f9fc 0%, #fff 100%); --gradient-gray-light-1: linear-gradient(0deg, #f7f9fc 0%, #fff 100%);
--gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f7f9fc 100%); --gradient-gray-light-2: linear-gradient(0deg, #fff 0%, #f7f9fc 100%);
--border-radius-default: 10px; --border-radius-default: 10px;
--box-shadow: 0px 5px 10px 0px rgba(30, 36, 50, 0.05), --box-shadow:
0px 1px 1px 0px rgba(30, 36, 50, 0.03), 0px 5px 10px 0px rgba(30, 36, 50, 0.05), 0px 1px 1px 0px rgba(30, 36, 50, 0.03),
0px 3px 5px 0px rgba(30, 36, 50, 0.03); 0px 3px 5px 0px rgba(30, 36, 50, 0.03);
--box-shadow-strong: 0px 5px 10px 0px rgba(30, 36, 50, 0.08), --box-shadow-strong:
0px 1px 1px 0px rgba(30, 36, 50, 0.06), 0px 5px 10px 0px rgba(30, 36, 50, 0.08), 0px 1px 1px 0px rgba(30, 36, 50, 0.06),
0px 3px 5px 0px rgba(30, 36, 50, 0.06); 0px 3px 5px 0px rgba(30, 36, 50, 0.06);
--box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), --box-shadow-block: 0px 10px 30px 0px rgba(30, 36, 50, 0.07), 0px 0px 1px 0px rgba(30, 36, 50, 0.1);
0px 0px 1px 0px rgba(30, 36, 50, 0.1); --box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14), 0px 0px 1px 0px rgba(30, 36, 50, 0.15);
--box-shadow-block-strong: 0px 15px 50px 0px rgba(30, 36, 50, 0.14),
0px 0px 1px 0px rgba(30, 36, 50, 0.15);
color: var(--color-dark-1); color: var(--color-dark-1);
font-family: var(--font-global); font-family: var(--font-global);
font-size: 17px; font-size: 17px;
@ -132,26 +114,10 @@
var(--color-primary-2) 67%, var(--color-primary-2) 67%,
var(--color-primary-1) 100% var(--color-primary-1) 100%
); );
--gradient-dark-alpha-1: linear-gradient( --gradient-dark-alpha-1: linear-gradient(90deg, var(--color-dark-1) 40%, transparent 87%);
90deg, --gradient-dark-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-dark-1) 60%);
var(--color-dark-1) 40%, --gradient-primary-alpha-1: linear-gradient(90deg, var(--color-primary-1) 40%, transparent 87%);
transparent 87% --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
);
--gradient-dark-alpha-2: linear-gradient(
90deg,
transparent 13%,
var(--color-dark-1) 60%
);
--gradient-primary-alpha-1: linear-gradient(
90deg,
var(--color-primary-1) 40%,
transparent 87%
);
--gradient-primary-alpha-2: linear-gradient(
90deg,
transparent 13%,
var(--color-primary-1) 60%
);
} }
.theme-slick h1, .theme-slick h1,
.theme-slick h2, .theme-slick h2,
@ -220,10 +186,12 @@
opacity: 0.9; opacity: 0.9;
} }
.theme-slick .main-nav.dark { .theme-slick .main-nav.dark {
background-color: rgba(16, 24, 40, 0.8777); /* background-color: rgba(16, 24, 40, 0.8777); */
background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
} }
.theme-slick .main-nav.dark-mode { .theme-slick .main-nav.dark-mode {
background-color: rgba(55, 63, 78, 0.9); /* background-color: rgba(55, 63, 78, 0.9); */
background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
} }
.theme-slick .inner-nav ul { .theme-slick .inner-nav ul {
font-size: 16px; font-size: 16px;
@ -255,12 +223,7 @@
.theme-slick .inner-nav > ul > li > a.active:before { .theme-slick .inner-nav > ul > li > a.active:before {
transform: scaleX(1); transform: scaleX(1);
} }
.theme-slick .theme-slick .main-nav.mobile-on .inner-nav > ul > li > a:not(.no-hover):before {
.main-nav.mobile-on
.inner-nav
> ul
> li
> a:not(.no-hover):before {
display: none; display: none;
} }
.theme-slick .mn-sub { .theme-slick .mn-sub {
@ -473,7 +436,9 @@
.theme-slick .scroll-down-1-text { .theme-slick .scroll-down-1-text {
font-weight: 500; font-weight: 500;
opacity: 0.7; opacity: 0.7;
transition: opacity 0.4s ease, transform 0.4s var(--ease-elastic-2); transition:
opacity 0.4s ease,
transform 0.4s var(--ease-elastic-2);
} }
.theme-slick .typewrite .wrap:after { .theme-slick .typewrite .wrap:after {
font-size: 0.9em; font-size: 0.9em;
@ -487,18 +452,10 @@
} }
.theme-slick .light-content .section-caption-slick { .theme-slick .light-content .section-caption-slick {
color: #fff; color: #fff;
background-image: linear-gradient( background-image: linear-gradient(45deg, rgba(5, 16, 38, 0.75) 0%, transparent 100%);
45deg,
rgba(5, 16, 38, 0.75) 0%,
transparent 100%
);
} }
.theme-slick .light-content .section-caption-fancy { .theme-slick .light-content .section-caption-fancy {
background-image: linear-gradient( background-image: linear-gradient(15deg, rgba(5, 16, 38, 0.75) 0%, transparent 100%);
15deg,
rgba(5, 16, 38, 0.75) 0%,
transparent 100%
);
} }
.theme-slick .section-title { .theme-slick .section-title {
font-size: 48px !important; font-size: 48px !important;

View File

@ -238,10 +238,10 @@ Primary use: Multipurpose Template
--gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%); --gradient-primary-alpha-2: linear-gradient(90deg, transparent 13%, var(--color-primary-1) 60%);
--border-radius-default: 4px; --border-radius-default: 4px;
--border-radius-large: 30px; --border-radius-large: 30px;
--box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03), --box-shadow:
0px 3px 5px 0px rgba(0, 0, 0, 0.03); 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 5px 0px rgba(0, 0, 0, 0.03);
--box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), --box-shadow-strong:
0px 3px 5px 0px rgba(0, 0, 0, 0.06); 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 5px 0px rgba(0, 0, 0, 0.06);
--box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05); --box-shadow-block: 0px 3px 50px 0px rgba(0, 0, 0, 0.05);
--box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15); --box-shadow-block-strong: 0px 3px 50px 0px rgba(0, 0, 0, 0.15);
--transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1); --transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1);
@ -3806,7 +3806,8 @@ a.logo:hover {
top: 0; top: 0;
left: 0; left: 0;
text-align: left; text-align: left;
background: rgba(255, 255, 255, 0.98); /* background: rgba(255, 255, 255, 0.98); */
background: linear-gradient(to right, #64b3b4, #a8dcca);
box-shadow: box-shadow:
0px 0px 10px 0px rgba(0, 0, 0, 0.025), 0px 0px 10px 0px rgba(0, 0, 0, 0.025),
0px 1px 1px 0px rgba(0, 0, 0, 0.01), 0px 1px 1px 0px rgba(0, 0, 0, 0.01),
@ -4303,7 +4304,8 @@ a.logo:hover {
display: none; display: none;
} }
.main-nav.dark { .main-nav.dark {
background-color: rgba(10, 10, 10, 0.905); /* background-color: rgba(10, 10, 10, 0.905); */
background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
box-shadow: none; box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
@ -4311,7 +4313,8 @@ a.logo:hover {
box-shadow: none; box-shadow: none;
} }
.main-nav.dark-mode { .main-nav.dark-mode {
background-color: rgba(27, 27, 27, 0.905); /* background-color: rgba(27, 27, 27, 0.905); */
background-color: linear-gradient(to right, #64b3b4, #a8dcca) !important;
} }
.main-nav:not(.transparent) { .main-nav:not(.transparent) {
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
@ -4370,7 +4373,8 @@ a.logo:hover {
*/ */
.main-nav.transparent { .main-nav.transparent {
background: transparent !important; /* background: transparent !important; */
background: linear-gradient(to right, #64b3b4, #a8dcca) !important;
box-shadow: none; box-shadow: none;
} }
.main-nav.js-transparent { .main-nav.js-transparent {

View File

@ -83,12 +83,12 @@ export default function MainLayout({
<Header links={navMenuData} /> <Header links={navMenuData} />
</nav> </nav>
<main id="main">{children}</main> <main id="main">{children}</main>
<footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30"> {/* <footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
<div className="bg-shape-4 opacity-003"> <div className="bg-shape-4 opacity-003">
<Image src="/assets/images/demo-slick/bg-shape-4.svg" width={1600} height={268} alt="" /> <Image src="/assets/images/demo-slick/bg-shape-4.svg" width={1600} height={268} alt="" />
</div> </div> */}
<Footer /> <Footer />
</footer> {/* </footer> */}
</div> </div>
</div> </div>
</body> </body>

View File

@ -1,6 +1,6 @@
import Blogs from "@/components/Blogs/Blogs";
import Parallax from "./home-bg-video/page"; import Parallax from "./home-bg-video/page";
import Homepage from "@/components/Homepage"; import Homepage from "@/components/Homepage";
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
export const metadata = { export const metadata = {
title: "HomePage - Cochise Oncology", title: "HomePage - Cochise Oncology",
@ -30,6 +30,7 @@ export default function Home() {
<> <>
<Parallax /> <Parallax />
<Homepage /> <Homepage />
<BeforeFooterBlock />
</> </>
); );
} }

View File

@ -1,9 +1,4 @@
import Facts from "@/components/Facts";
import Testimonials from "@/components/Testimonials";
import TestimonialsDark from "@/components/TestimonialsDark";
import { features4 } from "@/data/features";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
export const metadata = { export const metadata = {
title: "Slick About Dark || Resonance &mdash; One & Multi Page React Nextjs Creative Template", title: "Slick About Dark || Resonance &mdash; One & Multi Page React Nextjs Creative Template",

View File

@ -4,28 +4,17 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
export const metadata = { export const metadata = {
title: title: "Slick Portfolio || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
"Slick Portfolio || Resonance &mdash; One & Multi Page React Nextjs Creative Template", description: "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
description:
"Resonance &mdash; One & Multi Page React Nextjs Creative Template",
}; };
const onePage = false;
const dark = false; const dark = false;
export default function SlickPortfolioPage() { export default function SlickPortfolioPage() {
return ( return (
<> <>
<section <section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
id="home"
>
{/* <!-- Background Shape --> */} {/* <!-- Background Shape --> */}
<div className="bg-shape-1 wow fadeIn"> <div className="bg-shape-1 wow fadeIn">
<Image <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
src="/assets/images/demo-fancy/bg-shape-1.svg"
width={1443}
height={844}
alt=""
/>
</div> </div>
{/* <!-- End Background Shape --> */} {/* <!-- End Background Shape --> */}
@ -34,22 +23,14 @@ export default function SlickPortfolioPage() {
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Portfolio</h1> <h1 className="hs-title-10 mb-10 wow fadeInUp">Portfolio</h1>
<p <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Explore captivating web design solutions. Explore captivating web design solutions.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section <section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="portfolio">
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="portfolio"
>
<div className="container position-relative"> <div className="container position-relative">
<Portfolio /> <Portfolio />
</div> </div>
@ -70,13 +51,10 @@ export default function SlickPortfolioPage() {
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2"> <div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row"> <div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20"> <div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20"> <h2 className="section-title-small mb-20">Like our creative works?</h2>
Like our creative works?
</h2>
<p className="text-gray mb-0"> <p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus lorem Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
ipsum posuere eget at ex. Aenean consequat vitae lorem in vitae lorem in vehicula.
vehicula.
</p> </p>
</div> </div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2"> <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">

View File

@ -5,28 +5,18 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
export const metadata = { export const metadata = {
title: title: "Slick Services || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
"Slick Services || Resonance &mdash; One & Multi Page React Nextjs Creative Template", description: "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
description:
"Resonance &mdash; One & Multi Page React Nextjs Creative Template",
}; };
const onePage = false;
const dark = false; const dark = false;
export default function SlickServicesPage() { export default function SlickServicesPage() {
return ( return (
<> <>
<section <section className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden" id="home">
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
id="home"
>
{/* <!-- Background Shape --> */} {/* <!-- Background Shape --> */}
<div className="bg-shape-1 wow fadeIn"> <div className="bg-shape-1 wow fadeIn">
<Image <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
src="/assets/images/demo-fancy/bg-shape-1.svg"
width={1443}
height={844}
alt=""
/>
</div> </div>
{/* <!-- End Background Shape --> */} {/* <!-- End Background Shape --> */}
@ -35,35 +25,22 @@ export default function SlickServicesPage() {
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Our Services</h1> <h1 className="hs-title-10 mb-10 wow fadeInUp">Our Services</h1>
<p <p className="section-descr mb-0 wow fadeInUp" data-wow-delay="0.2s">
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Web design that leaves an impression. Web design that leaves an impression.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section <section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="services">
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="services"
>
<div className="container position-relative"> <div className="container position-relative">
<div className="row"> <div className="row">
{/* Left Column */} {/* Left Column */}
<div className="col-lg-5 mb-md-60 mb-sm-40"> <div className="col-lg-5 mb-md-60 mb-sm-40">
<h2 className="section-caption-slick mb-30 mb-sm-20"> <h2 className="section-caption-slick mb-30 mb-sm-20">WHAT WE DO</h2>
WHAT WE DO <h3 className="section-title mb-30">We provide the best development solutions.</h3>
</h2>
<h3 className="section-title mb-30">
We provide the best development solutions.
</h3>
<p className="section-descr mb-50 mb-sm-40"> <p className="section-descr mb-50 mb-sm-40">
The power of design help us to solve complex problems and The power of design help us to solve complex problems and cultivate business solutions.
cultivate business solutions.
</p> </p>
<div className="local-scroll"> <div className="local-scroll">
<Link <Link
@ -84,12 +61,10 @@ export default function SlickServicesPage() {
</div> </div>
<div className="row mb-50 mb-sm-50"> <div className="row mb-50 mb-sm-50">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center"> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
<h2 className="section-title-small mb-20"> <h2 className="section-title-small mb-20">Why choose Resonance?</h2>
Why choose Resonance?
</h2>
<p className="text-gray mb-0"> <p className="text-gray mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
eiusmod tempor incididunt ut labore et dolore magna aliqua. dolore magna aliqua.
</p> </p>
</div> </div>
</div> </div>
@ -99,9 +74,7 @@ export default function SlickServicesPage() {
</div> </div>
</section> </section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} /> <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section <section className={`page-section ${dark ? "bg-dark-1 light-content" : ""}`}>
className={`page-section ${dark ? "bg-dark-1 light-content" : ""}`}
>
<div className="container position-relative"> <div className="container position-relative">
<div className="row"> <div className="row">
{/* Images */} {/* Images */}
@ -155,32 +128,21 @@ export default function SlickServicesPage() {
{/* End Images */} {/* End Images */}
{/* Text */} {/* Text */}
<div className="col-lg-5 d-flex align-items-center"> <div className="col-lg-5 d-flex align-items-center">
<div <div className="wow fadeInUp" data-wow-duration="1.2s" data-wow-offset="255">
className="wow fadeInUp" <h2 className="section-caption-slick mb-30 mb-sm-20">How we work?</h2>
data-wow-duration="1.2s"
data-wow-offset="255"
>
<h2 className="section-caption-slick mb-30 mb-sm-20">
How we work?
</h2>
<h2 className="section-title mb-30"> <h2 className="section-title mb-30">Get the power of the professional services</h2>
Get the power of the professional services
</h2>
<p className="text-gray"> <p className="text-gray">
Pellentesque ultrices purus sit amet velit eleifend, eu Pellentesque ultrices purus sit amet velit eleifend, eu iaculis velit malesuada. Proin id mattis elit.
iaculis velit malesuada. Proin id mattis elit. Nullam a nisi Nullam a nisi tellus. Mauris rhoncus diam in sem maximus, nec luctus justo imperdiet. Etiam fermentum
tellus. Mauris rhoncus diam in sem maximus, nec luctus justo vehicula faucibus.
imperdiet. Etiam fermentum vehicula faucibus.
</p> </p>
<p className="text-gray mb-0"> <p className="text-gray mb-0">
Praesent ullamcorper urna id arcu molestie scelerisque. Sed Praesent ullamcorper urna id arcu molestie scelerisque. Sed imperdiet tristique mauris et faucibus.
imperdiet tristique mauris et faucibus. Maecenas semper augue Maecenas semper augue non fringilla placerat. Curabitur luctus erat sit amet ultricies aliquam. Donec
non fringilla placerat. Curabitur luctus erat sit amet dictum convallis mauris et maximus. Nullam massa arcu, porta quis felis et, eleifend varius quam.
ultricies aliquam. Donec dictum convallis mauris et maximus.
Nullam massa arcu, porta quis felis et, eleifend varius quam.
</p> </p>
</div> </div>
</div> </div>
@ -204,13 +166,10 @@ export default function SlickServicesPage() {
<div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2"> <div className="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<div className="row"> <div className="row">
<div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20"> <div className="col-md-7 col-lg-8 text-center text-md-start mb-sm-20">
<h2 className="section-title-small mb-20"> <h2 className="section-title-small mb-20">Like our creative works?</h2>
Like our creative works?
</h2>
<p className="text-gray mb-0"> <p className="text-gray mb-0">
Quisque posuere mollis ullamcorper. Ut eget metus lorem Quisque posuere mollis ullamcorper. Ut eget metus lorem ipsum posuere eget at ex. Aenean consequat
ipsum posuere eget at ex. Aenean consequat vitae lorem in vitae lorem in vehicula.
vehicula.
</p> </p>
</div> </div>
<div className="col-md-5 col-lg-4 text-center text-md-end pt-2"> <div className="col-md-5 col-lg-4 text-center text-md-end pt-2">

View File

@ -64,13 +64,13 @@ export function GoogleReviewsBlock() {
</div> </div>
<div className="container px-6"> <div className="container px-6">
<h2 className="text-3xl font-bold text-center">Reviews</h2> <h2 className="text-3xl font-bold text-center text-white">Reviews</h2>
<div className="flex justify-center space-x-2"> <div className="flex justify-center space-x-2">
<h2 className="text-xl text-center font-bold">4.8</h2> <h2 className="text-xl text-center font-bold text-white">4.8</h2>
<div className="mt-1"> <div className="mt-1">
<StarRating size={20} value={4.8} /> <StarRating size={20} value={4.8} />
</div> </div>
<div className="text-xs font-semibold mt-1 text-neutral-500">Over 200 Reviews</div> <div className="text-xs font-semibold mt-1 text-white">Over 200 Reviews</div>
</div> </div>
<div className="mt-20 relative"> <div className="mt-20 relative">
<Swiper <Swiper

View File

@ -1,4 +1,4 @@
import { CardTeam } from "@/components/Teams/CardTeam"; import Team from "@/components/Team";
type Team = { type Team = {
id: number; id: number;
@ -13,27 +13,5 @@ export interface OurTeamProps {
} }
export function OurTeamBlock({ team }: OurTeamProps) { export function OurTeamBlock({ team }: OurTeamProps) {
return ( return <Team data={team} />;
<section className="page-section bg-gray-light-1 relative">
{/* Decoration Circles */}
<div className="decoration-12" />
<div className="decoration-13" />
{/* End Decoration Circles */}
<div className="container mx-auto px-6 text-center">
<h2 className="text-4xl font-semibold text-gray-800 mb-8">Our Team</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
{team.map((member, idx) => (
<CardTeam
key={idx}
data={{
name: member.name,
img: member.img.url,
role: member.role,
}}
/>
))}
</div>
</div>
</section>
);
} }

View File

@ -1,4 +1,3 @@
import { blogs9 } from "@/data/blogs";
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";

View File

@ -1,6 +1,4 @@
import { numbers } from "@/data/facts";
import { features5 } from "@/data/features"; import { features5 } from "@/data/features";
import { services5 } from "@/data/services";
import React from "react"; import React from "react";
export default function Facts() { export default function Facts() {

View File

@ -10,7 +10,13 @@ export default function Footer() {
}; };
return ( return (
<div className="relative text-white py-10"> <div
className="relative text-white py-10"
style={{
backgroundColor: "transparent",
backgroundImage: "linear-gradient(172deg, #2E2D51 0%, #64B3B4 100%)",
}}
>
<div className="container mx-auto flex flex-wrap justify-between items-start px-6"> <div className="container mx-auto flex flex-wrap justify-between items-start px-6">
<div className="w-full md:w-1/4 mb-6 md:mb-0 flex flex-col items-start"> <div className="w-full md:w-1/4 mb-6 md:mb-0 flex flex-col items-start">
<Image src="/assets/images/demo-slick/logo-dark.webp" alt="Cochise Oncology Logo" width={363} height={138} /> <Image src="/assets/images/demo-slick/logo-dark.webp" alt="Cochise Oncology Logo" width={363} height={138} />
@ -30,7 +36,7 @@ export default function Footer() {
href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635" href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="underline text-lg" className="underline text-lg text-white"
> >
5151 E HIGHWAY 90 5151 E HIGHWAY 90
</a> </a>
@ -52,7 +58,7 @@ export default function Footer() {
href="https://www.facebook.com/p/Cochise-Oncology-61556262839823" href="https://www.facebook.com/p/Cochise-Oncology-61556262839823"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="underline text-lg" className="underline text-lg text-white"
> >
Facebook Facebook
</a> </a>

View File

@ -5,7 +5,7 @@ import Link from "next/link";
export default function Header1Multipage({ links }: any) { export default function Header1Multipage({ links }: any) {
return ( return (
<div className="main-nav-sub full-wrapper"> <div className="main-nav-sub full-wrapper" style={{ background: "linear-gradient(to right, #64B3B4, #A8DCCA)" }}>
{/* Logo (* Add your text or image to the link tag. Use SVG or PNG image format. {/* Logo (* Add your text or image to the link tag. Use SVG or PNG image format.
If you use a PNG logo image, the image resolution must be equal 200% of the visible logo If you use a PNG logo image, the image resolution must be equal 200% of the visible logo
image size for support of retina screens. See details in the template documentation. *) */} image size for support of retina screens. See details in the template documentation. *) */}

View File

@ -1,32 +1,11 @@
"use client"; "use client";
import { useRef, useState } from "react"; import { useRef } from "react";
import Link from "next/link"; import Link from "next/link";
export default function Hero6() { export default function Hero6() {
const videoRef = useRef<any | null>(null); const videoRef = useRef<any | null>(null);
const [isPlaying, setIsPlaying] = useState(true);
const [isMuted, setIsMuted] = useState(true);
const togglePlayPause = () => {
if (isPlaying) {
videoRef.current.pause();
setIsPlaying(false);
} else {
videoRef.current.play();
setIsPlaying(true);
}
};
const toggleMuteUnmute = () => {
if (isMuted) {
videoRef.current.muted = false;
setIsMuted(false);
} else {
videoRef.current.muted = true;
setIsMuted(true);
}
};
return ( return (
<section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home"> <section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home">
<div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120"> <div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">

View File

@ -1,10 +1,9 @@
import { features4 } from "@/data/features"; import { features4 } from "@/data/features";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import Blog from "./Blogs/Blog";
import Cta3 from "./cta3"; import Cta3 from "./cta3";
import Facts from "./Facts";
import Service from "./Service"; import Service from "./Service";
import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
export default function homepage({ onePage = false, dark = false }) { export default function homepage({ onePage = false, dark = false }) {
return ( return (
@ -100,13 +99,9 @@ export default function homepage({ onePage = false, dark = false }) {
<div className="decoration-12 bg-white" /> <div className="decoration-12 bg-white" />
<div className="decoration-13 bg-white" /> <div className="decoration-13 bg-white" />
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center text-white mb-50"> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center text-white mb-50">
<h2 className="section-title-small">Why choose Cochise Oncology?</h2> <h2 className="section-title-small">Testimonials</h2>
<p className="mb-0">
Here at Cochise Oncology we offer the most up-to-date technology in cancer treatment that rivals the largest
and most prestigious centers in the country.
</p>
</div> </div>
<Facts /> <GoogleReviewsBlock />
</section> </section>
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="services"> <section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="services">
<div className="container position-relative"> <div className="container position-relative">
@ -157,12 +152,6 @@ export default function homepage({ onePage = false, dark = false }) {
</div> </div>
</div> </div>
</section> </section>
<section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="blog">
<div className={`bg-shape-3 ${dark ? "opacity-003" : ""} `}>
<Image src="/assets/images/demo-slick/bg-shape-3.svg" width={1443} height={644} alt="" />
</div>
<Blog />
</section>
</> </>
); );
} }

View File

@ -1,113 +1,28 @@
"use client"; "use client";
import { Swiper, SwiperSlide } from "swiper/react"; import { CardTeam } from "./Teams/CardTeam";
import { Navigation } from "swiper/modules";
import { teamMembers } from "@/data/team";
import Image from "next/image";
export default function Team() { export default function Team({ data }: any) {
return ( return (
<div className="container position-relative"> <div className="container">
<div className="row"> <div className="row mb-70 mb-sm-50">
{/* Quote */} <div className="col-md-12 offset-md-2 col-lg-6 offset-lg-3 text-center">
<div className="col-md-6 mb-sm-60 mb-xs-40 d-flex flex-column align-items-center"> <h2 className="section-title mb-30 mb-sm-20">
<h2 className="section-caption-slick mb-30 mb-sm-20">Our Teams</h2> <span className="text-gray">Our</span> Team
<blockquote className="testimonial mb-0 wow fadeInUp"> <span className="text-gray">.</span>
<div className="blockquote-icon" aria-hidden="true"> </h2>
<div className="text-gray">
The same color can evoke different emotions, or have various meanings to different individuals and cultures.
</div> </div>
<p>Our goal is to spend quality time with every patient</p>
<footer>
<div className="section-line mb-10" />
Cecilia Hirales
<div className="small">Clinical Director, Co-founder</div>
</footer>
</blockquote>
</div> </div>
{/* End Quote */} </div>
{/* Team Carousel */} <div className="row mt-n40">
<div className="col-md-6 relative">
<div>
<Swiper
spaceBetween={0}
slidesPerView={2}
breakpoints={{
500: {
slidesPerView: 2, // When window width is <= 480px
},
0: {
slidesPerView: 1,
},
}}
modules={[Navigation]}
navigation={{
prevEl: ".snbp1",
nextEl: ".snbn1",
}}
watchSlidesProgress
resizeObserver
className="team-carousel owl-carousel owl-theme overflow-hidden position-static"
style={{
opacity: 1,
display: "block",
}}
>
{/* Team item */} {/* Team item */}
{teamMembers.map((member, index) => ( {data.map((member: any, index: any) => (
<SwiperSlide className="owl-item" key={index}> <div key={index}>
<div className="team-carousel-item"> <CardTeam data={member} />
<div className="team-item"> </div>
<div className="team-item-image">
<Image
width={600}
height={800}
src={member.image}
className="wow scaleOutIn"
alt="Image Description"
/>
<div className="team-item-detail">
<div className="team-social-links">
{member.socials.map((social, socialIndex) => (
<a href={social.url} target="_blank" rel="noopener nofollow" key={socialIndex}>
<div className="visually-hidden">{social.platform}</div>
<i className={social.icon} />
</a>
))} ))}
</div>
</div>
</div>
<div className="team-item-descr">
<div className="team-item-name">{member.name}</div>
<div className="team-item-role">{member.role}</div>
</div>
</div>
</div>
</SwiperSlide>
))}
<div className="owl-controls clickable">
<div className="owl-pagination">
<div className="owl-page">
<span className=""></span>
</div>
<div className="owl-page active">
<span className=""></span>
</div>
</div>
<div className="owl-buttons">
<div className="owl-prev snbp1 owl-prev-testimonial-1" role="button" tabIndex={0}>
<span className="visually-hidden">Previous Slide</span>
<i className="mi-arrow-left" aria-hidden="true"></i>
</div>
<div className="owl-next snbn1" role="button" tabIndex={0}>
<span className="visually-hidden">Next Slide</span>
<i className="mi-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
{/* End Team item */} {/* End Team item */}
</Swiper>
</div>
</div>
{/* End Team Carousel */}
</div> </div>
</div> </div>
); );

View File

@ -1,27 +1,46 @@
"use client";
import Image from "next/image"; import Image from "next/image";
export interface CardTeamProps { export interface CardTeamProps {
data: { data: {
name: string; name: string;
role: string; role: string;
img: string; img: { url: string };
}; };
} }
export function CardTeam({ data }: CardTeamProps) { export function CardTeam({ data }: CardTeamProps) {
return ( return (
<div className="bg-white p-6 rounded-lg shadow-md"> <div className="col-md-4 mt-40">
<div className="team-item">
<div className="team-item-image">
<Image <Image
src={data.img} src={data.img.url}
alt={data.name} width={625}
width={80} height={767}
height={80} className="wow scaleOutIn"
className="rounded-full object-cover mx-auto" data-wow-duration="1.2s"
style={{ width: "80px", height: "80px" }} alt={`Image of ${data.name}`}
/> />
<h3 className="mt-4 text-lg font-medium text-gray-900">{data.name}</h3> <div className="team-item-detail">
<p className="text-gray-600">{data.role}</p> <div className="team-social-links">
<button className="bg-slate-400 rounded-full p-2 font-semibold text-slate-50 text-xs">BIOGRAPHY</button> {[
{ platform: "Facebook", icon: "fa-facebook-f", url: "#" },
{ platform: "Twitter", icon: "fa-twitter", url: "#" },
{ platform: "Pinterest", icon: "fa-pinterest-p", url: "#" },
].map((social, idx) => (
<a key={idx} href={social.url} target="_blank" rel="noopener nofollow">
<div className="visually-hidden">{social.platform}</div>
<i className={social.icon} />
</a>
))}
</div>
</div>
</div>
<div className="team-item-descr">
<div className="team-item-name">{data.name}</div>
<div className="team-item-role">{data.role}</div>
</div>
</div>
</div> </div>
); );
} }

View File

@ -86,11 +86,11 @@ export const features2 = [
text: "Courage", text: "Courage",
desc: "Fighting cancer requires immense courage. We believe no one should face this alone, so we provide whole patient care.", desc: "Fighting cancer requires immense courage. We believe no one should face this alone, so we provide whole patient care.",
}, },
{ // {
id: 4, // id: 4,
text: "Resilience", // text: "Resilience",
desc: "adapt, recover, and grow stronger in the face of challenges and adversity", // desc: "adapt, recover, and grow stronger in the face of challenges and adversity",
}, // },
]; ];
export const features3 = [ export const features3 = [

View File

@ -1,6 +1,6 @@
import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres' import { MigrateUpArgs, MigrateDownArgs, sql } from "@payloadcms/db-postgres";
export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> { export async function up({ db }: MigrateUpArgs): Promise<void> {
await db.execute(sql` await db.execute(sql`
CREATE TYPE "public"."enum_forms_confirmation_type" AS ENUM('message', 'redirect'); CREATE TYPE "public"."enum_forms_confirmation_type" AS ENUM('message', 'redirect');
CREATE TABLE IF NOT EXISTS "users" ( CREATE TABLE IF NOT EXISTS "users" (
@ -705,10 +705,10 @@ export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
CREATE INDEX IF NOT EXISTS "payload_preferences_rels_path_idx" ON "payload_preferences_rels" USING btree ("path"); CREATE INDEX IF NOT EXISTS "payload_preferences_rels_path_idx" ON "payload_preferences_rels" USING btree ("path");
CREATE INDEX IF NOT EXISTS "payload_preferences_rels_users_id_idx" ON "payload_preferences_rels" USING btree ("users_id"); CREATE INDEX IF NOT EXISTS "payload_preferences_rels_users_id_idx" ON "payload_preferences_rels" USING btree ("users_id");
CREATE INDEX IF NOT EXISTS "payload_migrations_updated_at_idx" ON "payload_migrations" USING btree ("updated_at"); CREATE INDEX IF NOT EXISTS "payload_migrations_updated_at_idx" ON "payload_migrations" USING btree ("updated_at");
CREATE INDEX IF NOT EXISTS "payload_migrations_created_at_idx" ON "payload_migrations" USING btree ("created_at");`) CREATE INDEX IF NOT EXISTS "payload_migrations_created_at_idx" ON "payload_migrations" USING btree ("created_at");`);
} }
export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> { export async function down({ db }: MigrateDownArgs): Promise<void> {
await db.execute(sql` await db.execute(sql`
DROP TABLE "users" CASCADE; DROP TABLE "users" CASCADE;
DROP TABLE "media" CASCADE; DROP TABLE "media" CASCADE;
@ -743,5 +743,5 @@ export async function down({ db, payload, req }: MigrateDownArgs): Promise<void>
DROP TABLE "payload_preferences" CASCADE; DROP TABLE "payload_preferences" CASCADE;
DROP TABLE "payload_preferences_rels" CASCADE; DROP TABLE "payload_preferences_rels" CASCADE;
DROP TABLE "payload_migrations" CASCADE; DROP TABLE "payload_migrations" CASCADE;
DROP TYPE "public"."enum_forms_confirmation_type";`) DROP TYPE "public"."enum_forms_confirmation_type";`);
} }

View File

@ -6,60 +6,6 @@
* and re-run `payload generate:types` to regenerate this file. * and re-run `payload generate:types` to regenerate this file.
*/ */
/**
* Supported timezones in IANA format.
*
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "supportedTimezones".
*/
export type SupportedTimezones =
| 'Pacific/Midway'
| 'Pacific/Niue'
| 'Pacific/Honolulu'
| 'Pacific/Rarotonga'
| 'America/Anchorage'
| 'Pacific/Gambier'
| 'America/Los_Angeles'
| 'America/Tijuana'
| 'America/Denver'
| 'America/Phoenix'
| 'America/Chicago'
| 'America/Guatemala'
| 'America/New_York'
| 'America/Bogota'
| 'America/Caracas'
| 'America/Santiago'
| 'America/Buenos_Aires'
| 'America/Sao_Paulo'
| 'Atlantic/South_Georgia'
| 'Atlantic/Azores'
| 'Atlantic/Cape_Verde'
| 'Europe/London'
| 'Europe/Berlin'
| 'Africa/Lagos'
| 'Europe/Athens'
| 'Africa/Cairo'
| 'Europe/Moscow'
| 'Asia/Riyadh'
| 'Asia/Dubai'
| 'Asia/Baku'
| 'Asia/Karachi'
| 'Asia/Tashkent'
| 'Asia/Calcutta'
| 'Asia/Dhaka'
| 'Asia/Almaty'
| 'Asia/Jakarta'
| 'Asia/Bangkok'
| 'Asia/Shanghai'
| 'Asia/Singapore'
| 'Asia/Tokyo'
| 'Asia/Seoul'
| 'Australia/Sydney'
| 'Pacific/Guam'
| 'Pacific/Noumea'
| 'Pacific/Auckland'
| 'Pacific/Fiji';
export interface Config { export interface Config {
auth: { auth: {
users: UserAuthOperations; users: UserAuthOperations;

View File

@ -1,10 +1,7 @@
import payloadConfig from "@/payload.config"; import payloadConfig from "@/payload.config";
import { draftMode } from "next/headers";
import { getPayload } from "payload"; import { getPayload } from "payload";
export const fetchPageBySlug = async ({ slug }: { slug: string | undefined }) => { export const fetchPageBySlug = async ({ slug }: { slug: string | undefined }) => {
const { isEnabled: draft } = await draftMode();
const payload = await getPayload({ config: payloadConfig }); const payload = await getPayload({ config: payloadConfig });
const result = await payload.find({ const result = await payload.find({

View File

@ -27,7 +27,7 @@ export const parallaxMouseMovement = () => {
// }); // });
}); });
scene.addEventListener("mouseenter", function (e) { scene.addEventListener("mouseenter", function () {
this.querySelectorAll(".parallax-mousemove-follow").forEach((el) => { this.querySelectorAll(".parallax-mousemove-follow").forEach((el) => {
setTimeout(() => { setTimeout(() => {
el.style.transition = "all .27s var(--ease-out-short)"; el.style.transition = "all .27s var(--ease-out-short)";
@ -36,7 +36,7 @@ export const parallaxMouseMovement = () => {
}); });
}); });
scene.addEventListener("mouseout", function (e) { scene.addEventListener("mouseout", function () {
this.querySelectorAll(".parallax-mousemove-follow").forEach((el) => { this.querySelectorAll(".parallax-mousemove-follow").forEach((el) => {
el.style.transition = "none"; el.style.transition = "none";
}); });