feat(home): video parallax

This commit is contained in:
Val 2025-02-03 12:53:36 +07:00
parent d88cff95d6
commit 774d2f4742
23 changed files with 1805 additions and 1760 deletions

View File

@ -1,7 +1,7 @@
{ {
"semi": true, "semi": true,
"singleQuote": false, "singleQuote": false,
"printWidth": 80, "printWidth": 120,
"trailingComma": "es5", "trailingComma": "es5",
"tabWidth": 2 "tabWidth": 2
} }

View File

@ -2,6 +2,28 @@ import type { NextConfig } from "next";
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
/* config options here */ /* config options here */
// webpack: (config, options) => {
// config.module.rules.push({
// test: require.resolve("wowjs/dist/wow.js"),
// use: [
// {
// loader: "exports-loader",
// options: {
// exports: "this.WOW",
// },
// },
// ],
// });
// return config;
// },
images: {
remotePatterns: [
{
protocol: "https",
hostname: "cochiseoncology.com",
},
],
},
}; };
export default nextConfig; export default nextConfig;

View File

@ -232,32 +232,16 @@ Primary use: Multipurpose Template
); );
--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%
);
--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), --box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03),
0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 5px 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), --box-shadow-strong: 0px 5px 10px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.06),
0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 5px 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);
@ -737,12 +721,7 @@ video {
} }
.page-loader.gradient.dark .loader { .page-loader.gradient.dark .loader {
border-color: transparent !important; border-color: transparent !important;
background: linear-gradient( background: linear-gradient(to right, var(--color-dark-1), var(--color-dark-1)), var(--gradient-primary-1);
to right,
var(--color-dark-1),
var(--color-dark-1)
),
var(--gradient-primary-1);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
} }
@ -791,21 +770,13 @@ mark {
padding: 0; padding: 0;
color: inherit; color: inherit;
background-color: transparent; background-color: transparent;
background-image: linear-gradient( background-image: linear-gradient(90deg, rgba(17, 17, 17, 0.1) 0, rgba(17, 17, 17, 0.1) 100%);
90deg,
rgba(17, 17, 17, 0.1) 0,
rgba(17, 17, 17, 0.1) 100%
);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 0.3em; background-size: 100% 0.3em;
background-position: 0 110%; background-position: 0 110%;
} }
.light-content mark { .light-content mark {
background-image: linear-gradient( background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.2) 100%);
90deg,
rgba(255, 255, 255, 0.2) 0,
rgba(255, 255, 255, 0.2) 100%
);
} }
.mark-decoration-1 { .mark-decoration-1 {
position: relative; position: relative;
@ -1392,8 +1363,10 @@ hr.thick {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
padding: 7px 0; padding: 7px 0;
transition: transform 0.5s var(--ease-elastic-1), transition:
opacity 0.5s var(--ease-elastic-1), color 0.2s var(--ease-default); transform 0.5s var(--ease-elastic-1),
opacity 0.5s var(--ease-elastic-1),
color 0.2s var(--ease-default);
} }
.underline .link-strong { .underline .link-strong {
border-bottom: 2px solid currentColor; border-bottom: 2px solid currentColor;
@ -1922,7 +1895,9 @@ a.btn-mod:focus {
} }
.btn-animate-y-1 { .btn-animate-y-1 {
display: block; display: block;
transition: all 0.37s var(--ease-out-short), opacity 0.37s linear; transition:
all 0.37s var(--ease-out-short),
opacity 0.37s linear;
} }
.btn-animate-y-2 { .btn-animate-y-2 {
display: block; display: block;
@ -1932,7 +1907,9 @@ a.btn-mod:focus {
width: 100%; width: 100%;
opacity: 0; opacity: 0;
transform: translate(0, 100%); transform: translate(0, 100%);
transition: all 0.37s var(--ease-out-short), opacity 0.37s linear; transition:
all 0.37s var(--ease-out-short),
opacity 0.37s linear;
} }
.btn-mod:hover .btn-animate-y-1, .btn-mod:hover .btn-animate-y-1,
a:not(.no-hover):hover .btn-animate-y-1 { a:not(.no-hover):hover .btn-animate-y-1 {
@ -2067,8 +2044,7 @@ a:not(.no-hover):hover .btn-animate-y-2 {
} }
.btn-mod.btn-border-grad { .btn-mod.btn-border-grad {
border: 1px solid transparent; border: 1px solid transparent;
background: linear-gradient(to right, white, white), background: linear-gradient(to right, white, white), var(--gradient-primary-1-b);
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
color: var(--color-primary-1); color: var(--color-primary-1);
@ -2090,12 +2066,7 @@ a:not(.no-hover):hover .btn-animate-y-2 {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.main-nav.dark .btn-border-grad { .main-nav.dark .btn-border-grad {
background: linear-gradient( background: linear-gradient(to right, var(--color-dark-1), var(--color-dark-1)), var(--gradient-primary-1-b);
to right,
var(--color-dark-1),
var(--color-dark-1)
),
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
} }
@ -2163,7 +2134,9 @@ a:not(.no-hover):hover .btn-animate-y-2 {
.form input[type="color"]::placeholder, .form input[type="color"]::placeholder,
.form select::placeholder { .form select::placeholder {
color: var(--color-gray-2); color: var(--color-gray-2);
transition: var(--transition-default), font-size 0s; transition:
var(--transition-default),
font-size 0s;
} }
.form input[type="text"]:hover::placeholder, .form input[type="text"]:hover::placeholder,
.form input[type="email"]:hover::placeholder, .form input[type="email"]:hover::placeholder,
@ -2234,7 +2207,8 @@ input[type="password"]:-webkit-autofill:focus,
input[type="date"]:-webkit-autofill:focus, input[type="date"]:-webkit-autofill:focus,
input[type="color"]:-webkit-autofill:focus, input[type="color"]:-webkit-autofill:focus,
textarea:-webkit-autofill:focus { textarea:-webkit-autofill:focus {
transition: all 0.2s cubic-bezier(0, 0, 0.58, 1), transition:
all 0.2s cubic-bezier(0, 0, 0.58, 1),
background-color 1s 900000s ease; background-color 1s 900000s ease;
-webkit-text-fill-color: var(--color-dark-1); -webkit-text-fill-color: var(--color-dark-1);
} }
@ -2592,8 +2566,7 @@ textarea:-webkit-autofill:focus {
.input-grad-wrap { .input-grad-wrap {
border: 1px solid transparent; border: 1px solid transparent;
background: linear-gradient(to right, white, white), background: linear-gradient(to right, white, white), var(--gradient-primary-1-b);
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
} }
@ -2625,12 +2598,7 @@ textarea:-webkit-autofill:focus {
box-shadow: none; box-shadow: none;
} }
.light-content .input-grad-wrap { .light-content .input-grad-wrap {
background: linear-gradient( background: linear-gradient(to right, var(--color-dark-1), var(--color-dark-1)), var(--gradient-primary-1-b);
to right,
var(--color-dark-1),
var(--color-dark-1)
),
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
} }
@ -2762,7 +2730,9 @@ textarea:-webkit-autofill:focus {
border: 1px solid var(--color-dark-1); border: 1px solid var(--color-dark-1);
border-radius: 50%; border-radius: 50%;
opacity: 0.38; opacity: 0.38;
transition: opacity 0.4s ease, transform 0.4s var(--ease-elastic-2); transition:
opacity 0.4s ease,
transform 0.4s var(--ease-elastic-2);
} }
.scroll-down-1-icon svg, .scroll-down-1-icon svg,
.scroll-down-1-icon img { .scroll-down-1-icon img {
@ -2778,7 +2748,9 @@ textarea:-webkit-autofill:focus {
.scroll-down-1-text { .scroll-down-1-text {
font-size: 14px; font-size: 14px;
opacity: 0.6; opacity: 0.6;
transition: opacity 0.4s ease, transform 0.4s var(--ease-elastic-2); transition:
opacity 0.4s ease,
transform 0.4s var(--ease-elastic-2);
} }
.scroll-down-1:hover { .scroll-down-1:hover {
text-decoration: none; text-decoration: none;
@ -3311,7 +3283,8 @@ a.bg-video-button-pause {
opacity: 0; opacity: 0;
transform: translateY(0.5em) rotate(7deg); transform: translateY(0.5em) rotate(7deg);
transform-origin: 0 50%; transform-origin: 0 50%;
transition: transform 0.62s var(--ease-out-short), transition:
transform 0.62s var(--ease-out-short),
opacity 0.62s var(--ease-default); opacity 0.62s var(--ease-default);
transition-delay: calc(0.027s * var(--char-index)); transition-delay: calc(0.027s * var(--char-index));
} }
@ -3336,9 +3309,10 @@ html:not(.mobile) .appear-animate .charsAnimIn .char {
.appear-animate .charsAnimIn-1 .char { .appear-animate .charsAnimIn-1 .char {
opacity: 0; opacity: 0;
transform: translateX(0.01em) translateY(0.27em) translateZ(0) transform: translateX(0.01em) translateY(0.27em) translateZ(0) rotate(0.0003deg);
rotate(0.0003deg); transition:
transition: transform 1s var(--ease-out-short), opacity 1s var(--ease-default); transform 1s var(--ease-out-short),
opacity 1s var(--ease-default);
transition-delay: calc(0.037s * var(--char-index)); transition-delay: calc(0.037s * var(--char-index));
} }
html:not(.mobile) .appear-animate .charsAnimIn-1 .char { html:not(.mobile) .appear-animate .charsAnimIn-1 .char {
@ -3363,7 +3337,8 @@ html:not(.mobile) .appear-animate .charsAnimIn-1 .char {
.appear-animate .charsAnimIn-2 .char { .appear-animate .charsAnimIn-2 .char {
opacity: 0; opacity: 0;
transform: translateY(0.2em) translateZ(0) rotate(5deg); transform: translateY(0.2em) translateZ(0) rotate(5deg);
transition: transform 0.5s var(--ease-out-short), transition:
transform 0.5s var(--ease-out-short),
opacity 1s var(--ease-default); opacity 1s var(--ease-default);
transition-delay: calc(0.0427s * var(--char-index)); transition-delay: calc(0.0427s * var(--char-index));
} }
@ -3390,7 +3365,8 @@ html:not(.mobile) .appear-animate .charsAnimIn-2 .char {
opacity: 0; opacity: 0;
transform: translateX(0.5em); transform: translateX(0.5em);
transform-origin: 0 50%; transform-origin: 0 50%;
transition: transform 0.85s var(--ease-out-short), transition:
transform 0.85s var(--ease-out-short),
opacity 0.62s var(--ease-default); opacity 0.62s var(--ease-default);
transition-delay: calc(0.03s * var(--char-index)); transition-delay: calc(0.03s * var(--char-index));
} }
@ -3417,7 +3393,8 @@ html:not(.mobile) .appear-animate .charsAnimInLong .char {
opacity: 0; opacity: 0;
transform: translateX(0.275em); transform: translateX(0.275em);
transform-origin: 0 50%; transform-origin: 0 50%;
transition: transform 1s var(--ease-out-short), transition:
transform 1s var(--ease-out-short),
opacity 0.62s var(--ease-default); opacity 0.62s var(--ease-default);
transition-delay: calc(0.039s * var(--char-index)); transition-delay: calc(0.039s * var(--char-index));
} }
@ -3444,7 +3421,8 @@ html:not(.mobile) .appear-animate .charsAnimInLong-1 .char {
opacity: 0; opacity: 0;
transform: translateY(1em) scale(0.75) skew(-5deg) rotate(7deg); transform: translateY(1em) scale(0.75) skew(-5deg) rotate(7deg);
transform-origin: 0 50%; transform-origin: 0 50%;
transition: transform 0.5s var(--ease-out-short), transition:
transform 0.5s var(--ease-out-short),
opacity 0.5s var(--ease-out-short); opacity 0.5s var(--ease-out-short);
transition-delay: calc(0.05s * var(--word-index)); transition-delay: calc(0.05s * var(--word-index));
} }
@ -3472,7 +3450,8 @@ html:not(.mobile) .appear-animate .wordsAnimIn .word {
backface-visibility: hidden; backface-visibility: hidden;
transform: translateY(39px) translateZ(0) scale(1) rotate(0.02deg); transform: translateY(39px) translateZ(0) scale(1) rotate(0.02deg);
transform-origin: 0 50%; transform-origin: 0 50%;
transition: transform 1s cubic-bezier(0, 0.55, 0.45, 1), transition:
transform 1s cubic-bezier(0, 0.55, 0.45, 1),
opacity 1s cubic-bezier(0, 0.55, 0.45, 1); opacity 1s cubic-bezier(0, 0.55, 0.45, 1);
transition-delay: calc(0.05s * var(--line-index)); transition-delay: calc(0.05s * var(--line-index));
} }
@ -3500,7 +3479,8 @@ html:not(.mobile) .appear-animate .linesAnimIn .word {
backface-visibility: hidden; backface-visibility: hidden;
transform: translateY(39px) translateZ(0) scale(1) rotate(0.02deg); transform: translateY(39px) translateZ(0) scale(1) rotate(0.02deg);
transform-origin: 0 50%; transform-origin: 0 50%;
transition: transform 1s cubic-bezier(0, 0.55, 0.45, 1), transition:
transform 1s cubic-bezier(0, 0.55, 0.45, 1),
opacity 1s cubic-bezier(0, 0.55, 0.45, 1); opacity 1s cubic-bezier(0, 0.55, 0.45, 1);
transition-delay: calc(0.1s * var(--line-index)); transition-delay: calc(0.1s * var(--line-index));
} }
@ -3827,8 +3807,10 @@ a.logo:hover {
left: 0; left: 0;
text-align: left; text-align: left;
background: rgba(255, 255, 255, 0.98); background: rgba(255, 255, 255, 0.98);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.025), box-shadow:
0px 1px 1px 0px rgba(0, 0, 0, 0.01), 0px 0px 50px 0px rgba(0, 0, 0, 0.07); 0px 0px 10px 0px rgba(0, 0, 0, 0.025),
0px 1px 1px 0px rgba(0, 0, 0, 0.01),
0px 0px 50px 0px rgba(0, 0, 0, 0.07);
z-index: 1030; z-index: 1030;
transition: all 0.2s var(--ease-default); transition: all 0.2s var(--ease-default);
} }
@ -3930,7 +3912,9 @@ a.logo:hover {
.inner-nav .mi-chevron-down { .inner-nav .mi-chevron-down {
margin-left: -0.19em; margin-left: -0.19em;
font-size: 16px; font-size: 16px;
transition: all 0.2s var(--ease-default), color 0 var(--ease-default); transition:
all 0.2s var(--ease-default),
color 0 var(--ease-default);
} }
.mi-chevron-right { .mi-chevron-right {
transition: var(--transition-default); transition: var(--transition-default);
@ -4571,49 +4555,25 @@ a.logo:hover {
background-image: var(--gradient-gray-light-2); background-image: var(--gradient-gray-light-2);
} }
.bg-gradient-gray-dark-1 { .bg-gradient-gray-dark-1 {
background-image: linear-gradient( background-image: linear-gradient(0deg, var(--color-dark-2) 0%, transparent 100%);
0deg,
var(--color-dark-2) 0%,
transparent 100%
);
} }
.bg-gradient-gray-dark-2 { .bg-gradient-gray-dark-2 {
background-image: linear-gradient( background-image: linear-gradient(0deg, transparent 0%, var(--color-dark-2) 100%);
0deg,
transparent 0%,
var(--color-dark-2) 100%
);
} }
.bg-gradient-white { .bg-gradient-white {
background-image: linear-gradient(0deg, #fff 0%, transparent 60%); background-image: linear-gradient(0deg, #fff 0%, transparent 60%);
} }
.bg-gradient-dark { .bg-gradient-dark {
background-image: linear-gradient( background-image: linear-gradient(0deg, var(--color-dark-1) 0%, transparent 60%);
0deg,
var(--color-dark-1) 0%,
transparent 60%
);
} }
.bg-gradient-dark-1 { .bg-gradient-dark-1 {
background-image: linear-gradient( background-image: linear-gradient(0deg, transparent 85%, var(--color-dark-1) 100%);
0deg,
transparent 85%,
var(--color-dark-1) 100%
);
} }
.bg-gradient-primary-light-1 { .bg-gradient-primary-light-1 {
background-image: linear-gradient( background-image: linear-gradient(-90deg, var(--color-primary-light-3) 0%, var(--color-primary-light-2) 100%);
-90deg,
var(--color-primary-light-3) 0%,
var(--color-primary-light-2) 100%
);
} }
.bg-gradient-primary-dark-1 { .bg-gradient-primary-dark-1 {
background-image: linear-gradient( background-image: linear-gradient(-90deg, var(--color-primary-3) 0%, var(--color-primary-2) 100%);
-90deg,
var(--color-primary-3) 0%,
var(--color-primary-2) 100%
);
} }
.bg-gradient-primary-alpha-1:before { .bg-gradient-primary-alpha-1:before {
content: " "; content: " ";
@ -4665,11 +4625,7 @@ a.logo:hover {
left: 0; left: 0;
width: 100%; width: 100%;
height: 5vw; height: 5vw;
background: linear-gradient( background: linear-gradient(180deg, var(--color-gray-light-2) 0%, transparent 100%);
180deg,
var(--color-gray-light-2) 0%,
transparent 100%
);
} }
.section-gradient-top-dark { .section-gradient-top-dark {
position: absolute; position: absolute;
@ -4921,19 +4877,13 @@ a.logo:hover {
height: 100%; height: 100%;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
background: linear-gradient(to right, white, white), background: linear-gradient(to right, white, white), var(--gradient-primary-1-b);
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
opacity: 0.3; opacity: 0.3;
} }
.light-content .bg-border-gradient:before { .light-content .bg-border-gradient:before {
background: linear-gradient( background: linear-gradient(to right, var(--color-dark-1), var(--color-dark-1)), var(--gradient-primary-1-b);
to right,
var(--color-dark-1),
var(--color-dark-1)
),
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
opacity: 0.5; opacity: 0.5;
@ -4968,11 +4918,7 @@ a.logo:hover {
color: var(--color-primary-1); color: var(--color-primary-1);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.037em; letter-spacing: 0.037em;
background-image: linear-gradient( background-image: linear-gradient(15deg, var(--color-primary-light-1) 0%, transparent 100%);
15deg,
var(--color-primary-light-1) 0%,
transparent 100%
);
border-radius: 100px; border-radius: 100px;
} }
.section-caption-fancy.large { .section-caption-fancy.large {
@ -4980,11 +4926,7 @@ a.logo:hover {
} }
.light-content .section-caption-fancy { .light-content .section-caption-fancy {
color: #fff; color: #fff;
background-image: linear-gradient( background-image: linear-gradient(15deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
15deg,
rgba(0, 0, 0, 0.5) 0%,
transparent 100%
);
} }
.section-caption-slick { .section-caption-slick {
display: inline-block; display: inline-block;
@ -4994,20 +4936,12 @@ a.logo:hover {
color: var(--color-primary-1); color: var(--color-primary-1);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.037em; letter-spacing: 0.037em;
background-image: linear-gradient( background-image: linear-gradient(45deg, var(--color-primary-light-1) 0%, transparent 100%);
45deg,
var(--color-primary-light-1) 0%,
transparent 100%
);
border-radius: 100px; border-radius: 100px;
} }
.light-content .section-caption-slick { .light-content .section-caption-slick {
color: #fff; color: #fff;
background-image: linear-gradient( background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
45deg,
rgba(0, 0, 0, 0.5) 0%,
transparent 100%
);
} }
.section-caption-gradient { .section-caption-gradient {
display: inline-block; display: inline-block;
@ -5060,8 +4994,11 @@ a.logo:hover {
left: calc(-100% - 0.575em); left: calc(-100% - 0.575em);
width: 100%; width: 100%;
color: #fff; color: #fff;
text-shadow: -1px -1px 0 var(--color-dark-1), 1px -1px 0 var(--color-dark-1), text-shadow:
-1px 1px 0 var(--color-dark-1), 1px 1px 0 var(--color-dark-1); -1px -1px 0 var(--color-dark-1),
1px -1px 0 var(--color-dark-1),
-1px 1px 0 var(--color-dark-1),
1px 1px 0 var(--color-dark-1);
opacity: 0.3; opacity: 0.3;
pointer-events: none; pointer-events: none;
} }
@ -5071,15 +5008,21 @@ a.logo:hover {
right: calc(-100% - 0.575em); right: calc(-100% - 0.575em);
width: 100%; width: 100%;
color: #fff; color: #fff;
text-shadow: -1px -1px 0 var(--color-dark-1), 1px -1px 0 var(--color-dark-1), text-shadow:
-1px 1px 0 var(--color-dark-1), 1px 1px 0 var(--color-dark-1); -1px -1px 0 var(--color-dark-1),
1px -1px 0 var(--color-dark-1),
-1px 1px 0 var(--color-dark-1),
1px 1px 0 var(--color-dark-1);
opacity: 0.3; opacity: 0.3;
pointer-events: none; pointer-events: none;
} }
.light-content .section-title-repeat-left, .light-content .section-title-repeat-left,
.light-content .section-title-repeat-right { .light-content .section-title-repeat-right {
color: var(--color-dark-1); color: var(--color-dark-1);
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff; 1px 1px 0 #fff;
} }
.section-title-strong { .section-title-strong {
@ -6514,8 +6457,10 @@ img.services-image {
overflow: hidden; overflow: hidden;
} }
.team-item-image img { .team-item-image img {
width: 100%; width: 300px;
height: 400px;
transition: all 0.4s ease; transition: all 0.4s ease;
object-fit: cover;
} }
.team-item-detail { .team-item-detail {
display: inline-block; display: inline-block;
@ -6781,8 +6726,7 @@ img.services-image {
height: 100%; height: 100%;
border-radius: var(--border-radius-default); border-radius: var(--border-radius-default);
border: 1px solid transparent; border: 1px solid transparent;
background: linear-gradient(to right, white, white), background: linear-gradient(to right, white, white), var(--gradient-primary-1-b);
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
opacity: 0.3; opacity: 0.3;
@ -6850,12 +6794,7 @@ img.services-image {
color: var(--color-gray-1); color: var(--color-gray-1);
} }
.light-content .features-2-item:before { .light-content .features-2-item:before {
background: linear-gradient( background: linear-gradient(to right, var(--color-dark-1), var(--color-dark-1)), var(--gradient-primary-1-b);
to right,
var(--color-dark-1),
var(--color-dark-1)
),
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
opacity: 0.5; opacity: 0.5;
@ -7414,8 +7353,7 @@ img.services-image {
} }
.works-filter.works-filter-gradient a.active:before { .works-filter.works-filter-gradient a.active:before {
border: 1px solid transparent; border: 1px solid transparent;
background: linear-gradient(to right, white, white), background: linear-gradient(to right, white, white), var(--gradient-primary-1-b);
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
opacity: 1; opacity: 1;
@ -7443,12 +7381,7 @@ img.services-image {
} }
.light-content .works-filter.works-filter-gradient a.active:before { .light-content .works-filter.works-filter-gradient a.active:before {
border-color: transparent; border-color: transparent;
background: linear-gradient( background: linear-gradient(to right, var(--color-dark-1), var(--color-dark-1)), var(--gradient-primary-1-b);
to right,
var(--color-dark-1),
var(--color-dark-1)
),
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
opacity: 1; opacity: 1;
@ -7756,7 +7689,8 @@ img.services-image {
.works-grid.hide-titles .work-intro > * { .works-grid.hide-titles .work-intro > * {
position: relative; position: relative;
transform: translateY(25px); transform: translateY(25px);
transition: transform 0.37s var(--ease-out-short), transition:
transform 0.37s var(--ease-out-short),
opacity 0.37s var(--ease-default); opacity 0.37s var(--ease-default);
} }
.works-grid.hide-titles .work-title { .works-grid.hide-titles .work-title {
@ -8693,8 +8627,7 @@ a.portfolio-5-link:hover .portfolio-5-title span {
height: 100%; height: 100%;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--border-radius-default); border-radius: var(--border-radius-default);
background: linear-gradient(to right, white, white), background: linear-gradient(to right, white, white), var(--gradient-primary-1-b);
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
z-index: 0; z-index: 0;
@ -8724,12 +8657,7 @@ a.portfolio-5-link:hover .portfolio-5-title span {
width: 21.3733%; width: 21.3733%;
} }
.light-content .composition-7-border { .light-content .composition-7-border {
background: linear-gradient( background: linear-gradient(to right, var(--color-dark-1), var(--color-dark-1)), var(--gradient-primary-1-b);
to right,
var(--color-dark-1),
var(--color-dark-1)
),
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
} }
@ -9265,8 +9193,7 @@ a.portfolio-5-link:hover .portfolio-5-title span {
height: 100%; height: 100%;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--border-radius-default); border-radius: var(--border-radius-default);
background: linear-gradient(to right, white, white), background: linear-gradient(to right, white, white), var(--gradient-primary-1-b);
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
opacity: 0.3; opacity: 0.3;
@ -9286,12 +9213,7 @@ a.portfolio-5-link:hover .portfolio-5-title span {
border: none; border: none;
} }
.light-content .post-prev-3.gradient .post-prev-3-container:before { .light-content .post-prev-3.gradient .post-prev-3-container:before {
background: linear-gradient( background: linear-gradient(to right, var(--color-dark-1), var(--color-dark-1)), var(--gradient-primary-1-b);
to right,
var(--color-dark-1),
var(--color-dark-1)
),
var(--gradient-primary-1-b);
-webkit-background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box;
background-origin: padding-box, border-box; background-origin: padding-box, border-box;
opacity: 0.5; opacity: 0.5;
@ -9373,9 +9295,7 @@ a.portfolio-5-link:hover .portfolio-5-title span {
border: none; border: none;
} }
.light-content .form.newsletter-strong input.newsletter-field::placeholder, .light-content .form.newsletter-strong input.newsletter-field::placeholder,
.light-content .light-content .form.newsletter-strong input.newsletter-field:hover::placeholder {
.form.newsletter-strong
input.newsletter-field:hover::placeholder {
color: #fff; color: #fff;
} }
@ -9410,9 +9330,7 @@ a.portfolio-5-link:hover .portfolio-5-title span {
.light-content .form.newsletter-modern input.newsletter-field, .light-content .form.newsletter-modern input.newsletter-field,
.light-content .form.newsletter-modern input.newsletter-field:hover, .light-content .form.newsletter-modern input.newsletter-field:hover,
.light-content .form.newsletter-modern input.newsletter-field::placeholder, .light-content .form.newsletter-modern input.newsletter-field::placeholder,
.light-content .light-content .form.newsletter-modern input.newsletter-field:hover::placeholder {
.form.newsletter-modern
input.newsletter-field:hover::placeholder {
color: #fff; color: #fff;
border-color: #fff; border-color: #fff;
} }
@ -9598,19 +9516,19 @@ a.portfolio-5-link:hover .portfolio-5-title span {
font-size: 16px; font-size: 16px;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
text-decoration: none; text-decoration: none;
background-image: linear-gradient( background-image: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), linear-gradient(#fff, #fff);
rgba(255, 255, 255, 0.65), background-size:
rgba(255, 255, 255, 0.65) 100% 1px,
), 0 1px;
linear-gradient(#fff, #fff);
background-size: 100% 1px, 0 1px;
background-position: 0 100%; background-position: 0 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
transition: all 0.27s var(--ease-out-medium); transition: all 0.27s var(--ease-out-medium);
} }
.contact-1-link a:hover { .contact-1-link a:hover {
color: #fff; color: #fff;
background-size: 100% 1px, 100% 1px; background-size:
100% 1px,
100% 1px;
} }
/* ============================== /* ==============================
@ -11714,7 +11632,8 @@ html:not(.mobile) .owl-animate-chars .char {
opacity: 0; opacity: 0;
transform: translateY(0.5em) rotate(7deg); transform: translateY(0.5em) rotate(7deg);
transform-origin: 0 50%; transform-origin: 0 50%;
transition: transform 0.62s var(--ease-out-short), transition:
transform 0.62s var(--ease-out-short),
opacity 0.62s var(--ease-default); opacity 0.62s var(--ease-default);
transition-delay: calc(0.027s * var(--char-index)); transition-delay: calc(0.027s * var(--char-index));
} }
@ -11959,8 +11878,7 @@ html:not(.mobile) .owl-animate-fadeInDown {
color: #fff !important; color: #fff !important;
} }
.light-content .tpl-tabs li .nav-link.active { .light-content .tpl-tabs li .nav-link.active {
border-color: var(--color-dark-mode-gray-1) var(--color-dark-mode-gray-1) border-color: var(--color-dark-mode-gray-1) var(--color-dark-mode-gray-1) var(--color-dark-1);
var(--color-dark-1);
background-color: transparent; background-color: transparent;
color: #fff !important; color: #fff !important;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

View File

@ -1,7 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
xmlns="http://www.w3.org/2000/svg" width="858px"
height="804px"
viewBox="0 0 858 804"
version="1.1"
id="svg1"
sodipodi:docname="bg-shape-2.svg"
inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
width="858px" height="804px" viewBox="0 0 858 804"> xmlns="http://www.w3.org/2000/svg"
<path fill-rule="evenodd" fill="rgb(247, 249, 252)" xmlns:svg="http://www.w3.org/2000/svg">
d="M858.000,-0.000 L-0.000,-0.000 L-0.000,803.999 C-0.000,803.999 244.000,762.499 426.000,456.000 C608.000,149.499 748.000,49.999 858.000,-0.000 Z"/> <defs
id="defs1">
<linearGradient
id="linearGradient1"
inkscape:collect="always">
<stop
style="stop-color:#64b3b4;stop-opacity:1;"
offset="0"
id="stop1" />
<stop
style="stop-color:#a8dcca;stop-opacity:1;"
offset="1"
id="stop2" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1"
id="linearGradient2"
x1="50.034222"
y1="68.79705"
x2="427.79263"
y2="442.80286"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="0.79945282"
inkscape:cx="370.87867"
inkscape:cy="359.62097"
inkscape:window-width="1920"
inkscape:window-height="1129"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<path
fill-rule="evenodd"
fill="rgb(247, 249, 252)"
d="M858.000,-0.000 L-0.000,-0.000 L-0.000,803.999 C-0.000,803.999 244.000,762.499 426.000,456.000 C608.000,149.499 748.000,49.999 858.000,-0.000 Z"
id="path1"
style="fill-opacity:1;fill:url(#linearGradient2)" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 349 B

After

Width:  |  Height:  |  Size: 1.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

View File

@ -0,0 +1,25 @@
"use client";
import Hero from "@/components/Hero";
import Homepage from "@/components/Homepage";
import dynamic from "next/dynamic";
const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
ssr: false, // Disable server-side rendering
});
export default function Home1BGVideoMultiPage() {
return (
<>
<ParallaxContainer
className="home-section bg-gray-light-1 bg-light-alpha-90 parallax-5 parallax-mousemove-scene scrollSpysection"
style={{
backgroundImage: "url(/assets/images/full-width-images/section-bg-1.jpg)",
}}
id="home"
>
<Hero />
</ParallaxContainer>
<Homepage />
</>
);
}

View File

@ -15,7 +15,7 @@ import "@public/assets/css/styles.css";
import Image from "next/image"; import Image from "next/image";
import Header from "@/components/Header"; import Header from "@/components/Header";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import { slickMultipages } from "@/data/menu"; import { slickMultipagesDark } from "@/data/menu";
export default function MainLayout({ export default function MainLayout({
children, children,
@ -54,10 +54,7 @@ export default function MainLayout({
return ( return (
<html lang="en" className="no-mobile no-touch"> <html lang="en" className="no-mobile no-touch">
<head> <head>
<link <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link <link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap"
rel="stylesheet" rel="stylesheet"
@ -82,18 +79,13 @@ export default function MainLayout({
<body className="appear-animate body"> <body className="appear-animate body">
<div className="theme-slick"> <div className="theme-slick">
<div className="page" id="top"> <div className="page" id="top">
<nav className="main-nav transparent stick-fixed wow-menubar wch-unset"> <nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
<Header links={slickMultipages} /> <Header links={slickMultipagesDark} />
</nav> </nav>
<main id="main">{children}</main> <main id="main">{children}</main>
<footer className="page-section footer position-relative overflow-hidden pb-30"> <footer className="page-section footer position-relative overflow-hidden pb-30">
<div className="bg-shape-4"> <div className="bg-shape-4">
<Image <Image src="/assets/images/demo-slick/bg-shape-4.svg" width={1600} height={268} alt="" />
src="/assets/images/demo-slick/bg-shape-4.svg"
width={1600}
height={268}
alt=""
/>
</div> </div>
<Footer /> <Footer />
</footer> </footer>

View File

@ -1,28 +1,12 @@
import Hero from "@/components/Hero"; import Homepage from "./home-bg-video/page";
import Homepage from "@/components/Homepage";
import Image from "next/image";
export const metadata = { export const metadata = {
title: "HomePage - Cochise Oncology", title: "HomePage - Cochise Oncology",
description: description: "Resonance &mdash; One & Multi Page React Nextjs Creative Template",
"Resonance &mdash; One & Multi Page React Nextjs Creative Template",
}; };
export default function Home() { export default function Home() {
return ( return (
<> <>
<section className="home-section scrollSpysection" id="home">
<div className="bg-shape-2 wow fadeIn">
<Image
src="/assets/images/demo-slick/bg-shape-2.svg"
width={858}
height={804}
alt=""
/>
</div>
<Hero />
</section>
<Homepage /> <Homepage />
</> </>
); );

View File

@ -6,28 +6,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 About || Resonance &mdash; One & Multi Page React Nextjs Creative Template",
"Slick About || 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 dark = false; const dark = false;
export default function SlickAboutPage() { export default function SlickAboutPage() {
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 --> */}
@ -36,49 +26,32 @@ export default function SlickAboutPage() {
<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">About Studio</h1> <h1 className="hs-title-10 mb-10 wow fadeInUp">About Studio</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"
>
Crafting immersive digital journeys for brands. Crafting immersive digital journeys for brands.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section <section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="about">
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="about"
>
<div className="container position-relative"> <div className="container position-relative">
<div className="row"> <div className="row">
{/* Section Text */} {/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40"> <div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
<div className="w-100 wow fadeInUp"> <div className="w-100 wow fadeInUp">
<h2 className="section-caption-slick mb-30 mb-sm-20"> <h2 className="section-caption-slick mb-30 mb-sm-20">Our Story</h2>
Our Story <h3 className="section-title mb-30">We believe in creatives with a&nbsp;passion to smart design.</h3>
</h2>
<h3 className="section-title mb-30">
We believe in creatives with a&nbsp;passion to smart design.
</h3>
<p className="text-gray mb-40"> <p className="text-gray mb-40">
Etiam fermentum vehicula faucibus. Praesent ullamcorper urna Etiam fermentum vehicula faucibus. Praesent ullamcorper urna id arcu molestie scelerisque. Sed
id arcu molestie scelerisque. Sed imperdiet tristique mauris imperdiet tristique mauris et faucibus. Maecenas semper augue non fringilla placerat. Curabitur luctus
et faucibus. Maecenas semper augue non fringilla placerat. erat sit amet ultricies aliquam. Donec dictum convallis mauris et maximus. Nullam massa arcu, porta
Curabitur luctus erat sit amet ultricies aliquam. Donec dictum quis felis et, eleifend varius quam.
convallis mauris et maximus. Nullam massa arcu, porta quis
felis et, eleifend varius quam.
</p> </p>
{/* Features List */} {/* Features List */}
<div className="row features-list mt-n20 mb-50 mb-sm-30"> <div className="row features-list mt-n20 mb-50 mb-sm-30">
{/* Features List Item */} {/* Features List Item */}
{features4.map((feature, index) => ( {features4.map((feature, index) => (
<div <div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
key={index}
className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20"
>
<div className="features-list-icon"> <div className="features-list-icon">
<i className="mi-check" /> <i className="mi-check" />
</div> </div>
@ -102,21 +75,10 @@ export default function SlickAboutPage() {
data-link-animate="y" data-link-animate="y"
> >
<span className="link-strong link-strong-unhovered"> <span className="link-strong link-strong-unhovered">
Learn more{" "} Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span> </span>
<span <span className="link-strong link-strong-hovered" aria-hidden="true">
className="link-strong link-strong-hovered" Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
aria-hidden="true"
>
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span> </span>
</Link> </Link>
</div> </div>
@ -128,12 +90,7 @@ export default function SlickAboutPage() {
<div className="w-100 pe-lg-5"> <div className="w-100 pe-lg-5">
<div className="composition-5"> <div className="composition-5">
<div className="composition-5-decoration opacity-065"> <div className="composition-5-decoration opacity-065">
<Image <Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
src="/assets/images/demo-slick/decoration-1.svg"
alt=""
width={228}
height={228}
/>
</div> </div>
<div className="composition-5-image-1"> <div className="composition-5-image-1">
<div className="composition-5-image-1-inner"> <div className="composition-5-image-1-inner">
@ -167,18 +124,14 @@ export default function SlickAboutPage() {
</div> </div>
</section> </section>
<section <section
className={`page-section ${ className={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"} bg-scroll`}
dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"
} bg-scroll`}
style={{ style={{
backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)", backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
}} }}
> >
<Facts /> <Facts />
</section> </section>
<section <section className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}>
className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}
>
{dark ? <TestimonialsDark /> : <Testimonials />} {dark ? <TestimonialsDark /> : <Testimonials />}
</section> </section>
<section className="page-section pt-0"> <section className="page-section pt-0">
@ -196,13 +149,10 @@ export default function SlickAboutPage() {
<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

@ -1,71 +1,60 @@
"use client"; "use client";
import { toggleMobileMenu } from "@/utils/toggleMobileMenu"; import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
import Nav from "./Nav";
const links = [
{ href: "#home", text: "Home", className: "active" },
{ href: "#about", text: "About" },
{ href: "#services", text: "Services" },
{ href: "#portfolio", text: "Portfolio" },
{ href: "#blog", text: "Blog" },
{ href: "#contact", text: "Contact" },
];
import Image from "next/image"; import Image from "next/image";
import LanguageSelect from "./LanguageSelect"; import Link from "next/link";
import React from "react";
import Nav2 from "@/components/Nav";
import LanguageSelect from "@/components/LanguageSelect";
export default function Header9({ links }: any) { export default function Header1Multipage({ links }: any) {
return ( return (
<div className="main-nav-sub full-wrapper"> <div className="main-nav-sub full-wrapper">
{/* 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. *) */}
<div className="nav-logo-wrap position-static local-scroll"> <div className="nav-logo-wrap local-scroll">
<a href="#top" className="logo"> <Link href={`/`} className="logo">
<Image <Image
src="/assets/images/demo-slick/logo-dark.svg" src="/assets/images/demo-slick/logo-dark.webp"
alt="Your Company Logo" alt="Your Company Logo"
width={106} width={105}
height={36} height={34}
className="light-mode-logo" className="light-mode-logo"
/> />
<Image <Image
src="/assets/images/demo-slick/logo-white.svg" src="/assets/images/demo-slick/logo-dark.webp"
alt="Your Company Logo" alt="Your Company Logo"
width={106} width={405}
height={36} height={34}
className="dark-mode-logo" className="dark-mode-logo"
/> />
</a> </Link>
</div> </div>
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
<div <div onClick={toggleMobileMenu} className="mobile-nav" role="button" tabIndex={0}>
onClick={toggleMobileMenu}
className="mobile-nav"
role="button"
tabIndex={0}
>
<i className="mobile-nav-icon" /> <i className="mobile-nav-icon" />
<span className="visually-hidden">Menu</span> <span className="visually-hidden">Menu</span>
</div> </div>
{/* Main Menu */} {/* Main Menu */}
<div className="inner-nav desktop-nav"> <div className="inner-nav desktop-nav">
<ul className="clearlist scroll-nav local-scroll justify-content-end scrollspyLinks"> <ul className="clearlist local-scroll">
<Nav links={links} /> {/* Item With Sub */}
<li className="desktop-nav-display"> <Nav2 links={links} />
<div className="vr mt-2" /> {/* End Item With Sub */}
</li> </ul>
<ul className="items-end clearlist">
{/* Languages */} {/* Languages */}
<LanguageSelect /> <LanguageSelect />
{/* End Languages */} {/* End Languages */}
<li> <li>
<a href="#contact" className="opacity-1 no-hover"> <Link href="/main-pages-contact-1" className="opacity-1 no-hover">
<span <span className="link-hover-anim underline" data-link-animate="y">
className="btn btn-mod btn-color-light btn-border-white-light btn-small btn-circle" <span className="link-strong link-strong-unhovered">Lets work together</span>
data-btn-animate="y" <span className="link-strong link-strong-hovered" aria-hidden="true">
> Lets work together
Get in touch
</span> </span>
</a> </span>
</Link>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -1,152 +1,95 @@
"use client"; "use client";
import AnimatedText from "./AnimatedText";
import { parallaxMouseMovement } from "@/utils/parallax";
import Image from "next/image";
import { useEffect, useState } from "react"; import { useRef, useState } from "react";
import ModalVideo from "react-modal-video";
export default function Hero() { export default function Hero6() {
useEffect(() => { const videoRef = useRef<any | null>(null);
parallaxMouseMovement(); const [isPlaying, setIsPlaying] = useState(true);
}, []); const [isMuted, setIsMuted] = useState(true);
const [isOpen, setOpen] = useState(false);
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">
<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">
{/* Background Video */}
{/* Please replace the video file in folder "video" with your own file */}
<div className="bg-video-wrapper">
<video ref={videoRef} className="bg-video" preload="auto" autoPlay muted loop>
<source src="/assets/videos/cochise.webm" type="video/webm" />
</video>
<div className="bg-video-overlay bg-dark-alpha-50" />
</div>
<a onClick={toggleMuteUnmute} href="#" role="button" className="bg-video-button-muted">
<i className={`mi-volume-${isMuted ? "up" : "off"}`} />
<span className="visually-hidden">Volume On</span>
</a>
<a onClick={togglePlayPause} href="#" role="button" className="bg-video-button-pause">
<i className={`mi-${isPlaying ? "pause" : "play"}`} />
<span className="visually-hidden">Pause</span>
</a>
{/* End Background Video */}
{/* Home Section Content */} {/* Home Section Content */}
<div className="home-content text-start"> <div className="home-content">
<div className="row"> <div className="row">
{/* Home Section Text */} {/* Home Section Text */}
<div className="col-md-6 d-flex align-items-center mb-sm-60"> <div className="col-md-10 offset-md-1 mb-20 mb-sm-0">
<div> <h2 className="hs-title-11 mb-30 mb-xs-10 wow fadeInUp">Healing Begins Here</h2>
<h2 <h1 className="hs-title-12 mb-50 mb-sm-30">
className="section-caption mb-30 mb-xs-10 wow fadeInUp" <span className="wow charsAnimIn" data-splitting="chars">
data-wow-duration="1.2s" Cochise Oncology
> </span>
Resonance Creative Studio
</h2>
<h1 className="hs-title-1 mb-30">
<AnimatedText
text={"Grow your business with a new website."}
/>
</h1> </h1>
<p className="section-descr mb-50 wow fadeInUp" data-wow-delay="0.6s" data-wow-duration="1.2s">
<p Southern Arizonas Only Complete Cancer Treatment Center in Sierra Vista.
className="section-descr mb-50 wow fadeInUp"
data-wow-delay="0.6s"
data-wow-duration="1.2s"
>
Resonance is a full-service creative studio creating beautiful
digital experiences and products.
</p> </p>
<div <div className="local-scroll wch-unset wow fadeInUp" data-wow-delay="0.4s">
className="local-scroll mt-n10 wow fadeInUp wch-unset"
data-wow-delay="0.7s"
data-wow-duration="1.2s"
data-wow-offset={0}
>
<a <a
href="#about" href="#about"
className="btn btn-mod btn-large btn-round btn-hover-anim align-middle me-2 me-sm-5 mt-10" className="btn btn-mod btn-border-w btn-large btn-round ms-1 me-1 mt-2 align-middle"
data-btn-animate="y"
> >
<span>Discover now</span> Learn More
</a> </a>
<a <a
onClick={() => setOpen(true)} href="#contact"
className="link-hover-anim align-middle lightbox mfp-iframe mt-10" className="btn btn-mod btn-w btn-large btn-round ms-1 me-1 mt-2 align-middle"
data-link-animate="y" data-btn-animate="y"
> >
<i className="icon-play size-13 me-1" /> How it works? Get In Touch
</a> </a>
</div> </div>
</div> </div>
</div>
{/* End Home Section Text */} {/* End Home Section Text */}
{/* Stack Images */}
<div className="col-md-5 offset-md-1 d-flex align-items-center">
<div className="stack-images">
<div
className="stack-images-1 parallax-mousemove"
data-offset={30}
>
<div
className="wow clipRightIn"
data-wow-delay="1.2s"
data-wow-duration="1.75s"
>
<Image
src="/assets/images/stack-image-1.jpg"
alt="Image Description"
width={600}
height={800}
/>
</div>
</div>
<div
className="stack-images-2 parallax-mousemove"
data-offset={60}
>
<div
className="wow clipRightIn"
data-wow-delay="1.7s"
data-wow-duration="1.75s"
>
<Image
width={600}
height={800}
src="/assets/images/stack-image-2.jpg"
alt="Image Description"
/>
</div>
</div>
<div
className="stack-images-3 parallax-mousemove"
data-offset={90}
>
<div
className="wow clipRightIn"
data-wow-delay="2.2s"
data-wow-duration="1.75s"
>
<Image
width={600}
height={800}
src="/assets/images/stack-image-3.jpg"
alt="Image Description"
/>
</div>
</div>
</div>
</div>
{/* End Stack Images */}
</div> </div>
</div> </div>
{/* End Home Section Content */} {/* End Home Section Content */}
{/* Scroll Down */} {/* Scroll Down */}
<div <div className="local-scroll scroll-down-wrap wow fadeInUp" data-wow-offset={0}>
className="local-scroll scroll-down-wrap-type-1 wow fadeInUp" <a href="#about" className="scroll-down">
data-wow-offset={0} <i className="mi-chevron-down" />
> <span className="visually-hidden">Scroll to the next section</span>
<div className="container">
<a href="#about" className="scroll-down-1">
<div className="scroll-down-1-icon">
<i className="mi-arrow-down" />
</div>
<div className="scroll-down-1-text">Scroll Down</div>
</a> </a>
</div> </div>
</div>
{/* End Scroll Down */} {/* End Scroll Down */}
</div> </div>
<ModalVideo </section>
channel="youtube"
youtube={{ mute: 0, autoplay: 0 }}
isOpen={isOpen}
videoId="jTea_8Fk5Ns"
onClose={() => setOpen(false)}
/>
</>
); );
} }

View File

@ -2,7 +2,6 @@ import React from "react";
import Facts from "./Facts"; import Facts from "./Facts";
import Service from "./Service"; import Service from "./Service";
import Portfolio from "./Portfolio";
import Image from "next/image"; import Image from "next/image";
import Testimonials from "./Testimonials"; import Testimonials from "./Testimonials";
import Blog from "./Blog"; import Blog from "./Blog";
@ -13,44 +12,33 @@ import TestimonialsDark from "./TestimonialsDark";
import ContactDark from "./ContactDark"; import ContactDark from "./ContactDark";
import { features4 } from "@/data/features"; import { features4 } from "@/data/features";
import Features from "./Features"; import Features from "./Features";
import Team from "./Team";
export default function homepage({ onePage = false, dark = false }) { export default function homepage({ onePage = false, dark = false }) {
return ( return (
<> <>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} /> <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section <section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="about">
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="about"
>
<div className="container position-relative"> <div className="container position-relative">
<div className="row"> <div className="row">
{/* Section Text */} {/* Section Text */}
<div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40"> <div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40">
<div className="w-100 wow fadeInUp"> <div className="w-100 wow fadeInUp">
<h2 className="section-caption-slick mb-30 mb-sm-20"> <h2 className="section-caption-slick mb-30 mb-sm-20">About Oncology</h2>
About Studio <h3 className="section-title mb-30">Begin your path to healing with Cochise Oncology.</h3>
</h2>
<h3 className="section-title mb-30">
We believe in creatives with a&nbsp;passion to smart design.
</h3>
<p className="text-gray mb-40"> <p className="text-gray mb-40">
Etiam fermentum vehicula faucibus. Praesent ullamcorper urna Our dedicated team in Sierra Vista, AZ is here to support you with hope, strength, and courage. We
id arcu molestie scelerisque. Sed imperdiet tristique mauris offer personalized cancer care using innovative treatments in our state-of-the-art facility. Take the
et faucibus. Maecenas semper augue non fringilla placerat. first step towards comprehensive, patient-focused treatment by scheduling a consultation. Let us
Curabitur luctus erat sit amet ultricies aliquam. Donec dictum listen to your needs, answer your questions, and create a tailored plan for your journey. Fill out our
convallis mauris et maximus. Nullam massa arcu, porta quis form to connect with our compassionate experts and discover how Cochise Oncology can stand with you in
felis et, eleifend varius quam. your fight against cancer.
</p> </p>
{/* Features List */} {/* Features List */}
<div className="row features-list mt-n20 mb-50 mb-sm-30"> <div className="row features-list mt-n20 mb-50 mb-sm-30">
{/* Features List Item */} {/* Features List Item */}
{features4.map((feature, index) => ( {features4.map((feature, index) => (
<div <div key={index} className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20">
key={index}
className="col-sm-6 col-lg-12 col-xl-6 d-flex mt-20"
>
<div className="features-list-icon"> <div className="features-list-icon">
<i className="mi-check" /> <i className="mi-check" />
</div> </div>
@ -63,11 +51,8 @@ export default function homepage({ onePage = false, dark = false }) {
<div className="local-scroll wch-unset"> <div className="local-scroll wch-unset">
{onePage ? ( {onePage ? (
<> <>
<a <a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10">
href="#contact" <span>Contact us</span>
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Start a project</span>
</a> </a>
</> </>
) : ( ) : (
@ -76,34 +61,19 @@ export default function homepage({ onePage = false, dark = false }) {
href={`/slick-contact${dark ? "-dark" : ""}`} href={`/slick-contact${dark ? "-dark" : ""}`}
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
> >
<span>Start a project</span> <span>Contact us</span>
</Link> </Link>
</> </>
)} )}
{onePage ? ( {onePage ? (
<> <>
{" "} {" "}
<a <a href="#services" className="link-hover-anim ms-2 ms-sm-5 me-2" data-link-animate="y">
href="#services"
className="link-hover-anim ms-2 ms-sm-5 me-2"
data-link-animate="y"
>
<span className="link-strong link-strong-unhovered"> <span className="link-strong link-strong-unhovered">
Learn more{" "} Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span> </span>
<span <span className="link-strong link-strong-hovered" aria-hidden="true">
className="link-strong link-strong-hovered" Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
aria-hidden="true"
>
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span> </span>
</a> </a>
</> </>
@ -116,21 +86,10 @@ export default function homepage({ onePage = false, dark = false }) {
data-link-animate="y" data-link-animate="y"
> >
<span className="link-strong link-strong-unhovered"> <span className="link-strong link-strong-unhovered">
Learn more{" "} Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span> </span>
<span <span className="link-strong link-strong-hovered" aria-hidden="true">
className="link-strong link-strong-hovered" Learn more <i className="mi-arrow-right size-24" aria-hidden="true"></i>
aria-hidden="true"
>
Learn more{" "}
<i
className="mi-arrow-right size-24"
aria-hidden="true"
></i>
</span> </span>
</Link> </Link>
</> </>
@ -144,82 +103,46 @@ export default function homepage({ onePage = false, dark = false }) {
<div className="w-100 pe-lg-5"> <div className="w-100 pe-lg-5">
<div className="composition-5"> <div className="composition-5">
<div className="composition-5-decoration opacity-065"> <div className="composition-5-decoration opacity-065">
<Image <Image src="/assets/images/demo-slick/decoration-1.svg" alt="" width={228} height={228} />
src="/assets/images/demo-slick/decoration-1.svg"
alt=""
width={228}
height={228}
/>
</div> </div>
<div className="composition-5-image-1">
<div className="composition-5-image-1-inner">
<Image <Image
src="/assets/images/demo-slick/hs-image-3.jpg" src="/assets/images/cochise-welcome.png"
alt="Image Description" alt="Image Description"
width={850} width={550}
height={914} height={600}
className="wow scaleOutIn" className="wow scaleOutIn"
data-wow-offset={200} data-wow-offset={200}
/> />
</div> </div>
</div> </div>
<div className="composition-5-image-2">
<div className="composition-5-image-2-inner">
<Image
src="/assets/images/demo-slick/hs-image-4.jpg"
alt="Image Description"
width={400}
height={400}
className="wow scaleOutIn"
data-wow-offset={0}
/>
</div>
</div>
</div>
</div>
</div> </div>
{/* End Images */} {/* End Images */}
</div> </div>
</div> </div>
</section> </section>
<section <section
className={`page-section ${ className={`page-section ${dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"} bg-scroll`}
dark ? "bg-dark-1 bg-dark-alpha light-content" : "bg-light-alpha-90"
} bg-scroll`}
style={{ style={{
backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)", backgroundImage: "url(/assets/images/demo-slick/section-bg-1.jpg)",
}} }}
> >
<Facts /> <Facts />
</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">Our Services</h2>
Our Services <h3 className="section-title mb-30">A Cancer Treatment Center of Excellence.</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 Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona.
cultivate business solutions.
</p> </p>
<div className="local-scroll"> <div className="local-scroll">
{onePage ? ( {onePage ? (
<> <>
{" "} {" "}
<a <a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10">
href="#contact"
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim mb-xs-10"
>
<span>Request a quote</span> <span>Request a quote</span>
</a> </a>
</> </>
@ -246,12 +169,10 @@ export default function homepage({ onePage = false, dark = false }) {
</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 Cochise Oncology?</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 Here at Cochise Oncology we offer the most up-to-date technology in cancer treatment that rivals the
eiusmod tempor incididunt ut labore et dolore magna aliqua. largest and most prestigious centers in the country.
</p> </p>
</div> </div>
</div> </div>
@ -262,42 +183,12 @@ export default function homepage({ onePage = false, dark = false }) {
</section> </section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} /> <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section <section
className={`page-section scrollSpysection ${ className={`page-section pb-0 scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} mb-5`}
dark ? "bg-dark-1 light-content" : "" id="team"
} `}
id="portfolio"
> >
<div className={`bg-shape-1 ${dark ? "opacity-003" : ""} `}> <Team />
<Image
src="/assets/images/demo-slick/bg-shape-1.svg"
width={1443}
height={844}
alt=""
/>
</div>
<div className="container position-relative">
<div className="row mb-50 mb-sm-30">
<div className="col-md-8 offset-md-2 text-center">
<h2 className="section-caption-slick mb-30 mb-sm-20">
Selected Work
</h2>
<h3 className="section-title mb-30">
We believe in making the best work, and being the best to work
with.
</h3>
<p className="section-descr mb-0">
A static website stores a unique file for every page of a static
website. Each time that page is requested, the same content is
returned.
</p>
</div>
</div>
<Portfolio />
{/* End Works Grid */}
</div>
</section> </section>
<section className="page-section pt-0 pb-0"> <section className="page-section pt-0 pb-0 mt-5">
<div className="container"> <div className="container">
<div <div
className={`small-section ${ className={`small-section ${
@ -312,22 +203,16 @@ export default function homepage({ onePage = false, dark = false }) {
<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">
{onePage ? ( {onePage ? (
<> <>
<a <a href="#contact" className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim">
href="#contact"
className="btn btn-mod btn-color btn-large btn-circle btn-hover-anim"
>
<span>Start a project</span> <span>Start a project</span>
</a> </a>
</> </>
@ -348,41 +233,20 @@ export default function homepage({ onePage = false, dark = false }) {
</div> </div>
</div> </div>
</section> </section>
<section <section className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}>
className={`page-section ${dark ? "bg-dark-1 light-content" : ""} `}
>
{dark ? <TestimonialsDark /> : <Testimonials />} {dark ? <TestimonialsDark /> : <Testimonials />}
</section> </section>
<hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} /> <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
<section <section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="blog">
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="blog"
>
<div className={`bg-shape-3 ${dark ? "opacity-003" : ""} `}> <div className={`bg-shape-3 ${dark ? "opacity-003" : ""} `}>
<Image <Image src="/assets/images/demo-slick/bg-shape-3.svg" width={1443} height={644} alt="" />
src="/assets/images/demo-slick/bg-shape-3.svg"
width={1443}
height={644}
alt=""
/>
</div> </div>
<Blog /> <Blog />
</section> </section>
<section <section className={`page-section ${dark ? "bg-dark-2 light-content" : "bg-gray-light-1"} overflow-hidden`}>
className={`page-section ${
dark ? "bg-dark-2 light-content" : "bg-gray-light-1"
} overflow-hidden`}
>
<Newsletter /> <Newsletter />
</section> </section>
<section <section className={`page-section scrollSpysection ${dark ? "bg-dark-1 light-content" : ""} `} id="contact">
className={`page-section scrollSpysection ${
dark ? "bg-dark-1 light-content" : ""
} `}
id="contact"
>
{dark ? <ContactDark /> : <Contact />} {dark ? <ContactDark /> : <Contact />}
</section> </section>
</> </>

View File

@ -0,0 +1,20 @@
"use client";
import { jarallax } from "jarallax";
import { useEffect } from "react";
export default function ParallaxContainer(props: any) {
useEffect(() => {
jarallax(document.querySelectorAll(".parallax-5"), {
speed: 0.5,
});
}, []);
return (
<div
// ref={parallax.ref}
{...props}
>
{props.children}
</div>
);
}

View File

@ -52,9 +52,7 @@ export default function Portfolio() {
<a <a
onClick={() => updateCategory(elm.category)} onClick={() => updateCategory(elm.category)}
key={i} key={i}
className={`filter ${ className={`filter ${currentCategory == elm.category ? "active" : ""}`}
currentCategory == elm.category ? "active" : ""
}`}
> >
{elm.name} {elm.name}
</a> </a>
@ -70,24 +68,11 @@ export default function Portfolio() {
<Gallery> <Gallery>
{/* Work Item (Lightbox) */} {/* Work Item (Lightbox) */}
{portfolios9.map((item: any, index: any) => ( {portfolios9.map((item: any, index: any) => (
<li <li key={index} className={`work-item ${item.categories.join(" ")} ${index == 1 ? "mt-80 mt-sm-0" : ""}`}>
key={index}
className={`work-item ${item.categories.join(" ")} ${
index == 1 ? "mt-80 mt-sm-0" : ""
}`}
>
{item.isLightbox ? ( {item.isLightbox ? (
<Item <Item original={item.imgSrc} thumbnail={item.imgSrc} width={200} height={400}>
original={item.imgSrc}
thumbnail={item.imgSrc}
width={520}
height={618}
>
{({ ref, open }) => ( {({ ref, open }) => (
<a <a onClick={open} className={"work-lightbox-link mfp-image"}>
onClick={open}
className={"work-lightbox-link mfp-image"}
>
<div className="work-img"> <div className="work-img">
<div className="work-img-bg wow-p scalexIn" /> <div className="work-img-bg wow-p scalexIn" />
<Image <Image
@ -108,10 +93,7 @@ export default function Portfolio() {
)} )}
</Item> </Item>
) : ( ) : (
<Link <Link href={`/slick-portfolio-single/${item.id}`} className={"work-ext-link"}>
href={`/slick-portfolio-single/${item.id}`}
className={"work-ext-link"}
>
<div className="work-img"> <div className="work-img">
<div className="work-img-bg wow-p scalexIn" /> <div className="work-img-bg wow-p scalexIn" />
<Image <Image

114
src/components/Team.tsx Normal file
View File

@ -0,0 +1,114 @@
"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import { teamMembers } from "@/data/team";
import Image from "next/image";
export default function Team() {
return (
<div className="container position-relative">
<div className="row">
{/* Quote */}
<div className="col-md-6 mb-sm-60 mb-xs-40 d-flex flex-column align-items-center">
<h2 className="section-caption-slick mb-30 mb-sm-20">Our Teams</h2>
<blockquote className="testimonial mb-0 wow fadeInUp">
<div className="blockquote-icon" aria-hidden="true">
</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>
{/* End Quote */}
{/* Team Carousel */}
<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 */}
{teamMembers.map((member, index) => (
<SwiperSlide className="owl-item" key={index}>
<div className="team-carousel-item">
<div className="team-item">
<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 */}
</Swiper>
</div>
</div>
{/* End Team Carousel */}
</div>
</div>
);
}

View File

@ -4,24 +4,21 @@ export const featureItems = [
className: "col-md-4 col-lg-3 d-flex align-items-stretch mb-sm-30", className: "col-md-4 col-lg-3 d-flex align-items-stretch mb-sm-30",
path: "M21.62 20.196c1.055-.922 1.737-2.262 1.737-3.772 0-1.321-.521-2.515-1.357-3.412v-6.946l-11.001-6.066-11 6v12.131l11 5.869 5.468-2.917c.578.231 1.205.367 1.865.367.903 0 1.739-.258 2.471-.676l2.394 3.226.803-.596-2.38-3.208zm-11.121 2.404l-9.5-5.069v-10.447l9.5 4.946v10.57zm1-.001v-10.567l5.067-2.608.029.015.021-.04 4.384-2.256v5.039c-.774-.488-1.686-.782-2.668-.782-2.773 0-5.024 2.252-5.024 5.024 0 1.686.838 3.171 2.113 4.083l-3.922 2.092zm6.833-2.149c-2.219 0-4.024-1.808-4.024-4.026s1.805-4.025 4.024-4.025c2.22 0 4.025 1.807 4.025 4.025 0 2.218-1.805 4.026-4.025 4.026zm-.364-3.333l-1.306-1.147-.66.751 2.029 1.782 2.966-3.12-.725-.689-2.304 2.423zm-16.371-10.85l4.349-2.372 9.534 4.964-4.479 2.305-9.404-4.897zm9.4-5.127l9.404 5.186-3.832 1.972-9.565-4.98 3.993-2.178z", path: "M21.62 20.196c1.055-.922 1.737-2.262 1.737-3.772 0-1.321-.521-2.515-1.357-3.412v-6.946l-11.001-6.066-11 6v12.131l11 5.869 5.468-2.917c.578.231 1.205.367 1.865.367.903 0 1.739-.258 2.471-.676l2.394 3.226.803-.596-2.38-3.208zm-11.121 2.404l-9.5-5.069v-10.447l9.5 4.946v10.57zm1-.001v-10.567l5.067-2.608.029.015.021-.04 4.384-2.256v5.039c-.774-.488-1.686-.782-2.668-.782-2.773 0-5.024 2.252-5.024 5.024 0 1.686.838 3.171 2.113 4.083l-3.922 2.092zm6.833-2.149c-2.219 0-4.024-1.808-4.024-4.026s1.805-4.025 4.024-4.025c2.22 0 4.025 1.807 4.025 4.025 0 2.218-1.805 4.026-4.025 4.026zm-.364-3.333l-1.306-1.147-.66.751 2.029 1.782 2.966-3.12-.725-.689-2.304 2.423zm-16.371-10.85l4.349-2.372 9.534 4.964-4.479 2.305-9.404-4.897zm9.4-5.127l9.404 5.186-3.832 1.972-9.565-4.98 3.993-2.178z",
title: "Unique Design", title: "Unique Design",
description: description: "Fusce aliquet quam eget neque ultrices elementum felis id arcu blandit sagittis.",
"Fusce aliquet quam eget neque ultrices elementum felis id arcu blandit sagittis.",
}, },
{ {
id: 2, id: 2,
className: "col-md-4 col-lg-3 d-flex align-items-stretch mb-sm-30", className: "col-md-4 col-lg-3 d-flex align-items-stretch mb-sm-30",
path: "M12 0c-3.371 2.866-5.484 3-9 3v11.535c0 4.603 3.203 5.804 9 9.465 5.797-3.661 9-4.862 9-9.465v-11.535c-3.516 0-5.629-.134-9-3zm0 1.292c2.942 2.31 5.12 2.655 8 2.701v10.542c0 3.891-2.638 4.943-8 8.284-5.375-3.35-8-4.414-8-8.284v-10.542c2.88-.046 5.058-.391 8-2.701zm5 7.739l-5.992 6.623-3.672-3.931.701-.683 3.008 3.184 5.227-5.878.728.685z", path: "M12 0c-3.371 2.866-5.484 3-9 3v11.535c0 4.603 3.203 5.804 9 9.465 5.797-3.661 9-4.862 9-9.465v-11.535c-3.516 0-5.629-.134-9-3zm0 1.292c2.942 2.31 5.12 2.655 8 2.701v10.542c0 3.891-2.638 4.943-8 8.284-5.375-3.35-8-4.414-8-8.284v-10.542c2.88-.046 5.058-.391 8-2.701zm5 7.739l-5.992 6.623-3.672-3.931.701-.683 3.008 3.184 5.227-5.878.728.685z",
title: "Quality Code", title: "Quality Code",
description: description: "Lorem ipsum dolor sit amet rembe adipiscing elite Inwege maximus ligula imsum.",
"Lorem ipsum dolor sit amet rembe adipiscing elite Inwege maximus ligula imsum.",
}, },
{ {
id: 3, id: 3,
className: "col-md-4 col-lg-3 d-flex align-items-stretch", className: "col-md-4 col-lg-3 d-flex align-items-stretch",
path: "M6.514 24.015h-3v-3.39c-2.08-.638-3.5-2.652-3.5-5.04 0-1.19.202-1.693 1.774-5.603.521-1.294 1.195-2.97 2.068-5.179.204-.518.67-.806 1.17-.802.482.004.941.284 1.146.802.718 1.817 1.302 3.274 1.777 4.454.26-.596.567-1.288.928-2.103.694-1.565 1.591-3.592 2.754-6.265.258-.592.881-.906 1.397-.888.572.015 1.126.329 1.369.888 1.163 2.673 2.06 4.7 2.754 6.265 2.094 4.727 2.363 5.334 2.363 6.764 0 2.927-2.078 5.422-5 6.082v4.015h-3v-4.015c-.943-.213-1.797-.617-2.523-1.165-.612.845-1.466 1.48-2.477 1.79v3.39zm14.493-6c1.652 0 2.993 1.341 2.993 2.993s-1.341 2.993-2.993 2.993-2.993-1.341-2.993-2.993 1.341-2.993 2.993-2.993zm.007.993c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm-7.5 3.993v-3.839c4.906-.786 5-4.751 5-5.244 0-1.218-.216-1.705-2.277-6.359-2.134-4.82-2.721-6.198-2.755-6.261-.079-.145-.193-.292-.455-.297-.238 0-.37.092-.481.297-.034.063-.621 1.441-2.755 6.261-2.061 4.654-2.277 5.141-2.277 6.359 0 .493.094 4.458 5 5.244v3.839h1zm-6.123-12.448l-.08-.198c-1.589-3.957-2.04-5.116-2.067-5.171-.072-.151-.15-.226-.226-.228-.109 0-.188.13-.235.228-.028.05-.316.818-2.066 5.171-1.542 3.833-1.703 4.233-1.703 5.23 0 1.988 1.076 3.728 3.5 4.25v3.166h1v-3.166c1.266-.273 2.159-.876 2.725-1.666-1.078-1.12-1.725-2.619-1.725-4.251 0-.979.126-1.572.877-3.365z", path: "M6.514 24.015h-3v-3.39c-2.08-.638-3.5-2.652-3.5-5.04 0-1.19.202-1.693 1.774-5.603.521-1.294 1.195-2.97 2.068-5.179.204-.518.67-.806 1.17-.802.482.004.941.284 1.146.802.718 1.817 1.302 3.274 1.777 4.454.26-.596.567-1.288.928-2.103.694-1.565 1.591-3.592 2.754-6.265.258-.592.881-.906 1.397-.888.572.015 1.126.329 1.369.888 1.163 2.673 2.06 4.7 2.754 6.265 2.094 4.727 2.363 5.334 2.363 6.764 0 2.927-2.078 5.422-5 6.082v4.015h-3v-4.015c-.943-.213-1.797-.617-2.523-1.165-.612.845-1.466 1.48-2.477 1.79v3.39zm14.493-6c1.652 0 2.993 1.341 2.993 2.993s-1.341 2.993-2.993 2.993-2.993-1.341-2.993-2.993 1.341-2.993 2.993-2.993zm.007.993c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm-7.5 3.993v-3.839c4.906-.786 5-4.751 5-5.244 0-1.218-.216-1.705-2.277-6.359-2.134-4.82-2.721-6.198-2.755-6.261-.079-.145-.193-.292-.455-.297-.238 0-.37.092-.481.297-.034.063-.621 1.441-2.755 6.261-2.061 4.654-2.277 5.141-2.277 6.359 0 .493.094 4.458 5 5.244v3.839h1zm-6.123-12.448l-.08-.198c-1.589-3.957-2.04-5.116-2.067-5.171-.072-.151-.15-.226-.226-.228-.109 0-.188.13-.235.228-.028.05-.316.818-2.066 5.171-1.542 3.833-1.703 4.233-1.703 5.23 0 1.988 1.076 3.728 3.5 4.25v3.166h1v-3.166c1.266-.273 2.159-.876 2.725-1.666-1.078-1.12-1.725-2.619-1.725-4.251 0-.979.126-1.572.877-3.365z",
title: "Clean and Minimal", title: "Clean and Minimal",
description: description: "Maecenas volutpat, diam enime volutpa cramas luctus interdum sodales.",
"Maecenas volutpat, diam enime volutpa cramas luctus interdum sodales.",
}, },
]; ];
@ -31,32 +28,28 @@ export const featureItems2 = [
className: "col-lg-6", className: "col-lg-6",
path: "M21.62 20.196c1.055-.922 1.737-2.262 1.737-3.772 0-1.321-.521-2.515-1.357-3.412v-6.946l-11.001-6.066-11 6v12.131l11 5.869 5.468-2.917c.578.231 1.205.367 1.865.367.903 0 1.739-.258 2.471-.676l2.394 3.226.803-.596-2.38-3.208zm-11.121 2.404l-9.5-5.069v-10.447l9.5 4.946v10.57zm1-.001v-10.567l5.067-2.608.029.015.021-.04 4.384-2.256v5.039c-.774-.488-1.686-.782-2.668-.782-2.773 0-5.024 2.252-5.024 5.024 0 1.686.838 3.171 2.113 4.083l-3.922 2.092zm6.833-2.149c-2.219 0-4.024-1.808-4.024-4.026s1.805-4.025 4.024-4.025c2.22 0 4.025 1.807 4.025 4.025 0 2.218-1.805 4.026-4.025 4.026zm-.364-3.333l-1.306-1.147-.66.751 2.029 1.782 2.966-3.12-.725-.689-2.304 2.423zm-16.371-10.85l4.349-2.372 9.534 4.964-4.479 2.305-9.404-4.897zm9.4-5.127l9.404 5.186-3.832 1.972-9.565-4.98 3.993-2.178z", path: "M21.62 20.196c1.055-.922 1.737-2.262 1.737-3.772 0-1.321-.521-2.515-1.357-3.412v-6.946l-11.001-6.066-11 6v12.131l11 5.869 5.468-2.917c.578.231 1.205.367 1.865.367.903 0 1.739-.258 2.471-.676l2.394 3.226.803-.596-2.38-3.208zm-11.121 2.404l-9.5-5.069v-10.447l9.5 4.946v10.57zm1-.001v-10.567l5.067-2.608.029.015.021-.04 4.384-2.256v5.039c-.774-.488-1.686-.782-2.668-.782-2.773 0-5.024 2.252-5.024 5.024 0 1.686.838 3.171 2.113 4.083l-3.922 2.092zm6.833-2.149c-2.219 0-4.024-1.808-4.024-4.026s1.805-4.025 4.024-4.025c2.22 0 4.025 1.807 4.025 4.025 0 2.218-1.805 4.026-4.025 4.026zm-.364-3.333l-1.306-1.147-.66.751 2.029 1.782 2.966-3.12-.725-.689-2.304 2.423zm-16.371-10.85l4.349-2.372 9.534 4.964-4.479 2.305-9.404-4.897zm9.4-5.127l9.404 5.186-3.832 1.972-9.565-4.98 3.993-2.178z",
title: "Unique Design", title: "Unique Design",
description: description: "Fusce aliquet quam eget neque ultrices elementum felis id arcu blandit sagittis.",
"Fusce aliquet quam eget neque ultrices elementum felis id arcu blandit sagittis.",
}, },
{ {
id: 2, id: 2,
className: "col-lg-6", className: "col-lg-6",
path: "M12 0c-3.371 2.866-5.484 3-9 3v11.535c0 4.603 3.203 5.804 9 9.465 5.797-3.661 9-4.862 9-9.465v-11.535c-3.516 0-5.629-.134-9-3zm0 1.292c2.942 2.31 5.12 2.655 8 2.701v10.542c0 3.891-2.638 4.943-8 8.284-5.375-3.35-8-4.414-8-8.284v-10.542c2.88-.046 5.058-.391 8-2.701zm5 7.739l-5.992 6.623-3.672-3.931.701-.683 3.008 3.184 5.227-5.878.728.685z", path: "M12 0c-3.371 2.866-5.484 3-9 3v11.535c0 4.603 3.203 5.804 9 9.465 5.797-3.661 9-4.862 9-9.465v-11.535c-3.516 0-5.629-.134-9-3zm0 1.292c2.942 2.31 5.12 2.655 8 2.701v10.542c0 3.891-2.638 4.943-8 8.284-5.375-3.35-8-4.414-8-8.284v-10.542c2.88-.046 5.058-.391 8-2.701zm5 7.739l-5.992 6.623-3.672-3.931.701-.683 3.008 3.184 5.227-5.878.728.685z",
title: "Quality Code", title: "Quality Code",
description: description: "Lorem ipsum dolor sit amet rembe adipiscing elite Inwege maximus ligula imsum.",
"Lorem ipsum dolor sit amet rembe adipiscing elite Inwege maximus ligula imsum.",
}, },
{ {
id: 3, id: 3,
className: "col-lg-6", className: "col-lg-6",
path: "M6.514 24.015h-3v-3.39c-2.08-.638-3.5-2.652-3.5-5.04 0-1.19.202-1.693 1.774-5.603.521-1.294 1.195-2.97 2.068-5.179.204-.518.67-.806 1.17-.802.482.004.941.284 1.146.802.718 1.817 1.302 3.274 1.777 4.454.26-.596.567-1.288.928-2.103.694-1.565 1.591-3.592 2.754-6.265.258-.592.881-.906 1.397-.888.572.015 1.126.329 1.369.888 1.163 2.673 2.06 4.7 2.754 6.265 2.094 4.727 2.363 5.334 2.363 6.764 0 2.927-2.078 5.422-5 6.082v4.015h-3v-4.015c-.943-.213-1.797-.617-2.523-1.165-.612.845-1.466 1.48-2.477 1.79v3.39zm14.493-6c1.652 0 2.993 1.341 2.993 2.993s-1.341 2.993-2.993 2.993-2.993-1.341-2.993-2.993 1.341-2.993 2.993-2.993zm.007.993c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm-7.5 3.993v-3.839c4.906-.786 5-4.751 5-5.244 0-1.218-.216-1.705-2.277-6.359-2.134-4.82-2.721-6.198-2.755-6.261-.079-.145-.193-.292-.455-.297-.238 0-.37.092-.481.297-.034.063-.621 1.441-2.755 6.261-2.061 4.654-2.277 5.141-2.277 6.359 0 .493.094 4.458 5 5.244v3.839h1zm-6.123-12.448l-.08-.198c-1.589-3.957-2.04-5.116-2.067-5.171-.072-.151-.15-.226-.226-.228-.109 0-.188.13-.235.228-.028.05-.316.818-2.066 5.171-1.542 3.833-1.703 4.233-1.703 5.23 0 1.988 1.076 3.728 3.5 4.25v3.166h1v-3.166c1.266-.273 2.159-.876 2.725-1.666-1.078-1.12-1.725-2.619-1.725-4.251 0-.979.126-1.572.877-3.365z", path: "M6.514 24.015h-3v-3.39c-2.08-.638-3.5-2.652-3.5-5.04 0-1.19.202-1.693 1.774-5.603.521-1.294 1.195-2.97 2.068-5.179.204-.518.67-.806 1.17-.802.482.004.941.284 1.146.802.718 1.817 1.302 3.274 1.777 4.454.26-.596.567-1.288.928-2.103.694-1.565 1.591-3.592 2.754-6.265.258-.592.881-.906 1.397-.888.572.015 1.126.329 1.369.888 1.163 2.673 2.06 4.7 2.754 6.265 2.094 4.727 2.363 5.334 2.363 6.764 0 2.927-2.078 5.422-5 6.082v4.015h-3v-4.015c-.943-.213-1.797-.617-2.523-1.165-.612.845-1.466 1.48-2.477 1.79v3.39zm14.493-6c1.652 0 2.993 1.341 2.993 2.993s-1.341 2.993-2.993 2.993-2.993-1.341-2.993-2.993 1.341-2.993 2.993-2.993zm.007.993c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm-7.5 3.993v-3.839c4.906-.786 5-4.751 5-5.244 0-1.218-.216-1.705-2.277-6.359-2.134-4.82-2.721-6.198-2.755-6.261-.079-.145-.193-.292-.455-.297-.238 0-.37.092-.481.297-.034.063-.621 1.441-2.755 6.261-2.061 4.654-2.277 5.141-2.277 6.359 0 .493.094 4.458 5 5.244v3.839h1zm-6.123-12.448l-.08-.198c-1.589-3.957-2.04-5.116-2.067-5.171-.072-.151-.15-.226-.226-.228-.109 0-.188.13-.235.228-.028.05-.316.818-2.066 5.171-1.542 3.833-1.703 4.233-1.703 5.23 0 1.988 1.076 3.728 3.5 4.25v3.166h1v-3.166c1.266-.273 2.159-.876 2.725-1.666-1.078-1.12-1.725-2.619-1.725-4.251 0-.979.126-1.572.877-3.365z",
title: "Clean and Minimal", title: "Clean and Minimal",
description: description: "Maecenas volutpat, diam enime volutpa cramas luctus interdum sodales.",
"Maecenas volutpat, diam enime volutpa cramas luctus interdum sodales.",
}, },
{ {
id: 4, id: 4,
className: "col-lg-6", className: "col-lg-6",
path: "M16 3.383l-.924-.383-7.297 17.617.924.383 7.297-17.617zm.287 3.617l6.153 4.825-6.173 5.175.678.737 7.055-5.912-7.048-5.578-.665.753zm-8.478 0l-6.249 4.825 6.003 5.175-.679.737-6.884-5.912 7.144-5.578.665.753z", path: "M16 3.383l-.924-.383-7.297 17.617.924.383 7.297-17.617zm.287 3.617l6.153 4.825-6.173 5.175.678.737 7.055-5.912-7.048-5.578-.665.753zm-8.478 0l-6.249 4.825 6.003 5.175-.679.737-6.884-5.912 7.144-5.578.665.753z",
title: "Easy Customization", title: "Easy Customization",
description: description: "Praesent sed nisi eleifend lorem ember fermete acome ante lorem ipsum.",
"Praesent sed nisi eleifend lorem ember fermete acome ante lorem ipsum.",
}, },
]; ];
@ -105,45 +98,41 @@ export const features3 = [
export const features4 = [ export const features4 = [
{ {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing.", text: "Radiation Oncology",
}, },
{ {
text: "Vivamus hendrerit eros vitae tincidunt vulputate.", text: "Medical Oncology",
}, },
{ {
text: "Aenean at bibendum enim. In auctor consectetur urna.", text: "Skin Cancer",
}, },
{ {
text: "Proin ut gravida lorem, quis scelerisque metus.", text: "Other",
}, },
]; ];
export const features5 = [ export const features5 = [
{ {
title: "Unique Design", title: "Comprehensive Care",
description: description: "Expert physicians guide you through diagnosis, treatment, and recovery.",
"Fusce aliquet quam eget neque ultrices elementum felis id arcu blandit sagittis.",
svgPath: svgPath:
"M21.62 20.196c1.055-.922 1.737-2.262 1.737-3.772 0-1.321-.521-2.515-1.357-3.412v-6.946l-11.001-6.066-11 6v12.131l11 5.869 5.468-2.917c.578.231 1.205.367 1.865.367.903 0 1.739-.258 2.471-.676l2.394 3.226.803-.596-2.38-3.208zm-11.121 2.404l-9.5-5.069v-10.447l9.5 4.946v10.57zm1-.001v-10.567l5.067-2.608.029.015.021-.04 4.384-2.256v5.039c-.774-.488-1.686-.782-2.668-.782-2.773 0-5.024 2.252-5.024 5.024 0 1.686.838 3.171 2.113 4.083l-3.922 2.092zm6.833-2.149c-2.219 0-4.024-1.808-4.024-4.026s1.805-4.025 4.024-4.025c2.22 0 4.025 1.807 4.025 4.025 0 2.218-1.805 4.026-4.025 4.026zm-.364-3.333l-1.306-1.147-.66.751 2.029 1.782 2.966-3.12-.725-.689-2.304 2.423zm-16.371-10.85l4.349-2.372 9.534 4.964-4.479 2.305-9.404-4.897zm9.4-5.127l9.404 5.186-3.832 1.972-9.565-4.98 3.993-2.178z", "M21.62 20.196c1.055-.922 1.737-2.262 1.737-3.772 0-1.321-.521-2.515-1.357-3.412v-6.946l-11.001-6.066-11 6v12.131l11 5.869 5.468-2.917c.578.231 1.205.367 1.865.367.903 0 1.739-.258 2.471-.676l2.394 3.226.803-.596-2.38-3.208zm-11.121 2.404l-9.5-5.069v-10.447l9.5 4.946v10.57zm1-.001v-10.567l5.067-2.608.029.015.021-.04 4.384-2.256v5.039c-.774-.488-1.686-.782-2.668-.782-2.773 0-5.024 2.252-5.024 5.024 0 1.686.838 3.171 2.113 4.083l-3.922 2.092zm6.833-2.149c-2.219 0-4.024-1.808-4.024-4.026s1.805-4.025 4.024-4.025c2.22 0 4.025 1.807 4.025 4.025 0 2.218-1.805 4.026-4.025 4.026zm-.364-3.333l-1.306-1.147-.66.751 2.029 1.782 2.966-3.12-.725-.689-2.304 2.423zm-16.371-10.85l4.349-2.372 9.534 4.964-4.479 2.305-9.404-4.897zm9.4-5.127l9.404 5.186-3.832 1.972-9.565-4.98 3.993-2.178z",
}, },
{ {
title: "Quality Code", title: "Advanced Technology",
description: description: "Cutting-edge cancer treatments rival top medical centers.",
"Lorem ipsum dolor sit amet rembe adipiscing elite Inwege maximus ligula imsum.",
svgPath: svgPath:
"M12 0c-3.371 2.866-5.484 3-9 3v11.535c0 4.603 3.203 5.804 9 9.465 5.797-3.661 9-4.862 9-9.465v-11.535c-3.516 0-5.629-.134-9-3zm0 1.292c2.942 2.31 5.12 2.655 8 2.701v10.542c0 3.891-2.638 4.943-8 8.284-5.375-3.35-8-4.414-8-8.284v-10.542c2.88-.046 5.058-.391 8-2.701zm5 7.739l-5.992 6.623-3.672-3.931.701-.683 3.008 3.184 5.227-5.878.728.685z", "M12 0c-3.371 2.866-5.484 3-9 3v11.535c0 4.603 3.203 5.804 9 9.465 5.797-3.661 9-4.862 9-9.465v-11.535c-3.516 0-5.629-.134-9-3zm0 1.292c2.942 2.31 5.12 2.655 8 2.701v10.542c0 3.891-2.638 4.943-8 8.284-5.375-3.35-8-4.414-8-8.284v-10.542c2.88-.046 5.058-.391 8-2.701zm5 7.739l-5.992 6.623-3.672-3.931.701-.683 3.008 3.184 5.227-5.878.728.685z",
}, },
{ {
title: "Clean & Minimal", title: "Compassionate Staff",
description: description: "Dedicated professionals providing personalized, patient-centered care.",
"Maecenas volutpat, diam enime volutpa cramas luctus interdum sodales.",
svgPath: svgPath:
"M6.514 24.015h-3v-3.39c-2.08-.638-3.5-2.652-3.5-5.04 0-1.19.202-1.693 1.774-5.603.521-1.294 1.195-2.97 2.068-5.179.204-.518.67-.806 1.17-.802.482.004.941.284 1.146.802.718 1.817 1.302 3.274 1.777 4.454.26-.596.567-1.288.928-2.103.694-1.565 1.591-3.592 2.754-6.265.258-.592.881-.906 1.397-.888.572.015 1.126.329 1.369.888 1.163 2.673 2.06 4.7 2.754 6.265 2.094 4.727 2.363 5.334 2.363 6.764 0 2.927-2.078 5.422-5 6.082v4.015h-3v-4.015c-.943-.213-1.797-.617-2.523-1.165-.612.845-1.466 1.48-2.477 1.79v3.39zm14.493-6c1.652 0 2.993 1.341 2.993 2.993s-1.341 2.993-2.993 2.993-2.993-1.341-2.993-2.993 1.341-2.993 2.993-2.993zm.007.993c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm-7.5 3.993v-3.839c4.906-.786 5-4.751 5-5.244 0-1.218-.216-1.705-2.277-6.359-2.134-4.82-2.721-6.198-2.755-6.261-.079-.145-.193-.292-.455-.297-.238 0-.37.092-.481.297-.034.063-.621 1.441-2.755 6.261-2.061 4.654-2.277 5.141-2.277 6.359 0 .493.094 4.458 5 5.244v3.839h1zm-6.123-12.448l-.08-.198c-1.589-3.957-2.04-5.116-2.067-5.171-.072-.151-.15-.226-.226-.228-.109 0-.188.13-.235.228-.028.05-.316.818-2.066 5.171-1.542 3.833-1.703 4.233-1.703 5.23 0 1.988 1.076 3.728 3.5 4.25v3.166h1v-3.166c1.266-.273 2.159-.876 2.725-1.666-1.078-1.12-1.725-2.619-1.725-4.251 0-.979.126-1.572.877-3.365z", "M6.514 24.015h-3v-3.39c-2.08-.638-3.5-2.652-3.5-5.04 0-1.19.202-1.693 1.774-5.603.521-1.294 1.195-2.97 2.068-5.179.204-.518.67-.806 1.17-.802.482.004.941.284 1.146.802.718 1.817 1.302 3.274 1.777 4.454.26-.596.567-1.288.928-2.103.694-1.565 1.591-3.592 2.754-6.265.258-.592.881-.906 1.397-.888.572.015 1.126.329 1.369.888 1.163 2.673 2.06 4.7 2.754 6.265 2.094 4.727 2.363 5.334 2.363 6.764 0 2.927-2.078 5.422-5 6.082v4.015h-3v-4.015c-.943-.213-1.797-.617-2.523-1.165-.612.845-1.466 1.48-2.477 1.79v3.39zm14.493-6c1.652 0 2.993 1.341 2.993 2.993s-1.341 2.993-2.993 2.993-2.993-1.341-2.993-2.993 1.341-2.993 2.993-2.993zm.007.993c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm-7.5 3.993v-3.839c4.906-.786 5-4.751 5-5.244 0-1.218-.216-1.705-2.277-6.359-2.134-4.82-2.721-6.198-2.755-6.261-.079-.145-.193-.292-.455-.297-.238 0-.37.092-.481.297-.034.063-.621 1.441-2.755 6.261-2.061 4.654-2.277 5.141-2.277 6.359 0 .493.094 4.458 5 5.244v3.839h1zm-6.123-12.448l-.08-.198c-1.589-3.957-2.04-5.116-2.067-5.171-.072-.151-.15-.226-.226-.228-.109 0-.188.13-.235.228-.028.05-.316.818-2.066 5.171-1.542 3.833-1.703 4.233-1.703 5.23 0 1.988 1.076 3.728 3.5 4.25v3.166h1v-3.166c1.266-.273 2.159-.876 2.725-1.666-1.078-1.12-1.725-2.619-1.725-4.251 0-.979.126-1.572.877-3.365z",
}, },
{ {
title: "Premium Support", title: "Patient-First Approach",
description: description: "We go the extra mile to meet your unique needs.",
"Vivamus varius, nisi vel dictum tempor, libero nisl iaculis est, ut rutrum elit ante ac velit.",
svgPath: svgPath:
"M4.57 18.55l2.43.335-1.769 1.7.432 2.415-2.163-1.157-2.163 1.157.432-2.415-1.769-1.7 2.43-.335 1.07-2.207 1.07 2.207zm8.5 0l2.43.335-1.769 1.7.432 2.415-2.163-1.157-2.163 1.157.432-2.415-1.769-1.7 2.43-.335 1.07-2.207 1.07 2.207zm8.5 0l2.43.335-1.769 1.7.432 2.415-2.163-1.157-2.163 1.157.432-2.415-1.769-1.7 2.43-.335 1.07-2.207 1.07 2.207zm-18.473.918l-.917.126.667.641-.163.91.816-.436.816.436-.163-.91.667-.641-.917-.126-.403-.832-.403.832zm8.5 0l-.917.126.667.641-.163.91.816-.436.816.436-.163-.91.667-.641-.917-.126-.403-.832-.403.832zm8.5 0l-.917.126.667.641-.163.91.816-.436.816.436-.163-.91.667-.641-.917-.126-.403-.832-.403.832zm-14.497-5.293l-4-8h5.381c-.3-1.42-1.573-2.5-3.066-2.5-1.838 0-3.315 1.662-3.315 3.5s1.477 3.5 3.315 3.5h2.684l.002.01c.283-.397.618-.747.995-1.041zm.915-8h-1.464c.691-.592 1.579-1 2.564-1 1.719 0 3.125 1.266 3.125 3.5s-1.406 3.5-3.125 3.5c-1.718 0-3.125-1.266-3.125-3.5 0-.39.065-.764.179-1.115-.293.381-.49.841-.553 1.354h3.662c.32-.662.866-1.211 1.559-1.538zm9.932 8.5h-1.25c-.427-.59-.994-1.082-1.661-1.431-.153-.446-.411-.838-.742-1.141h2.203c.3-1.42 1.573-2.5 3.066-2.5 1.838 0 3.315 1.662 3.315 3.5s-1.477 3.5-3.315 3.5h-2.684zm-10.848 0h-1.715c-.09-.465-.365-.869-.752-1.155.337-.312.596-.709.762-1.162h3.183c-.158.418-.278.87-.348 1.349zm8.348 8h-1.715c-.09-.465-.365-.869-.752-1.155.337-.312.596-.709.762-1.162h3.183c-.158.418-.278.87-.348 1.349zm-6.5 0h-1.25c-.427-.59-.994-1.082-1.661-1.431-.153-.446-.411-.838-.742-1.141h2.203c.3-1.42 1.573-2.5 3.066-2.5 1.838 0 3.315 1.662 3.315 3.5s-1.477 3.5-3.315 3.5h-2.684z", "M4.57 18.55l2.43.335-1.769 1.7.432 2.415-2.163-1.157-2.163 1.157.432-2.415-1.769-1.7 2.43-.335 1.07-2.207 1.07 2.207zm8.5 0l2.43.335-1.769 1.7.432 2.415-2.163-1.157-2.163 1.157.432-2.415-1.769-1.7 2.43-.335 1.07-2.207 1.07 2.207zm8.5 0l2.43.335-1.769 1.7.432 2.415-2.163-1.157-2.163 1.157.432-2.415-1.769-1.7 2.43-.335 1.07-2.207 1.07 2.207zm-18.473.918l-.917.126.667.641-.163.91.816-.436.816.436-.163-.91.667-.641-.917-.126-.403-.832-.403.832zm8.5 0l-.917.126.667.641-.163.91.816-.436.816.436-.163-.91.667-.641-.917-.126-.403-.832-.403.832zm8.5 0l-.917.126.667.641-.163.91.816-.436.816.436-.163-.91.667-.641-.917-.126-.403-.832-.403.832zm-14.497-5.293l-4-8h5.381c-.3-1.42-1.573-2.5-3.066-2.5-1.838 0-3.315 1.662-3.315 3.5s1.477 3.5 3.315 3.5h2.684l.002.01c.283-.397.618-.747.995-1.041zm.915-8h-1.464c.691-.592 1.579-1 2.564-1 1.719 0 3.125 1.266 3.125 3.5s-1.406 3.5-3.125 3.5c-1.718 0-3.125-1.266-3.125-3.5 0-.39.065-.764.179-1.115-.293.381-.49.841-.553 1.354h3.662c.32-.662.866-1.211 1.559-1.538zm9.932 8.5h-1.25c-.427-.59-.994-1.082-1.661-1.431-.153-.446-.411-.838-.742-1.141h2.203c.3-1.42 1.573-2.5 3.066-2.5 1.838 0 3.315 1.662 3.315 3.5s-1.477 3.5-3.315 3.5h-2.684zm-10.848 0h-1.715c-.09-.465-.365-.869-.752-1.155.337-.312.596-.709.762-1.162h3.183c-.158.418-.278.87-.348 1.349zm8.348 8h-1.715c-.09-.465-.365-.869-.752-1.155.337-.312.596-.709.762-1.162h3.183c-.158.418-.278.87-.348 1.349zm-6.5 0h-1.25c-.427-.59-.994-1.082-1.661-1.431-.153-.446-.411-.838-.742-1.141h2.203c.3-1.42 1.573-2.5 3.066-2.5 1.838 0 3.315 1.662 3.315 3.5s-1.477 3.5-3.315 3.5h-2.684z",
}, },

View File

@ -32,7 +32,7 @@ export const slickMultipages = [
{ href: "/slick-contact", text: "Contact" }, { href: "/slick-contact", text: "Contact" },
]; ];
export const slickMultipagesDark = [ export const slickMultipagesDark = [
{ href: "/slick-multi-page-dark", text: "Home" }, { href: "/", text: "Home" },
{ href: "/slick-about-dark", text: "About", class: "active" }, { href: "/slick-about-dark", text: "About", class: "active" },
{ href: "/slick-services-dark", text: "Services" }, { href: "/slick-services-dark", text: "Services" },
{ href: "/slick-portfolio-dark", text: "Portfolio" }, { href: "/slick-portfolio-dark", text: "Portfolio" },

View File

@ -47,9 +47,9 @@ export const portfolioItems = [
title: "Medium Scene", title: "Medium Scene",
descr: "Branding, Design", descr: "Branding, Design",
}, },
]; ];
export const portfolios1 = [ export const portfolios1 = [
{ {
id: 7, id: 7,
className: "work-item mt-90 mt-md-0 mix development", className: "work-item mt-90 mt-md-0 mix development",
@ -138,9 +138,9 @@ export const portfolioItems = [
title: "Super Awards", title: "Super Awards",
description: "External Page", description: "External Page",
}, },
]; ];
export const portfolios2 = [ export const portfolios2 = [
{ {
id: 15, id: 15,
imageUrl: "/assets/images/demo-bold/portfolio/1.jpg", imageUrl: "/assets/images/demo-bold/portfolio/1.jpg",
@ -186,9 +186,9 @@ export const portfolioItems = [
link: "bold-portfolio-single.html", link: "bold-portfolio-single.html",
categories: ["design", "development"], categories: ["design", "development"],
}, },
]; ];
export const portfolios3 = [ export const portfolios3 = [
{ {
id: 20, id: 20,
imgSrc: "/assets/images/demo-brutalist/portfolio/1.jpg", imgSrc: "/assets/images/demo-brutalist/portfolio/1.jpg",
@ -234,9 +234,9 @@ export const portfolioItems = [
description: description:
"Posuere felis id arcu blandit sagittis. Eleifeni vestibulum purus, sit amet vulputate risusece fusce aliquet quam eget neque.", "Posuere felis id arcu blandit sagittis. Eleifeni vestibulum purus, sit amet vulputate risusece fusce aliquet quam eget neque.",
}, },
]; ];
export const portfolios4 = [ export const portfolios4 = [
{ {
id: 25, id: 25,
imageSrc: "/assets/images/demo-corporate/portfolio/project-1.jpg", imageSrc: "/assets/images/demo-corporate/portfolio/project-1.jpg",
@ -247,8 +247,7 @@ export const portfolioItems = [
{ {
id: 26, id: 26,
imageSrc: "/assets/images/demo-corporate/portfolio/project-2.jpg", imageSrc: "/assets/images/demo-corporate/portfolio/project-2.jpg",
title: title: "How Surface Mobility Increased Sales 3X During the Latest Six Months",
"How Surface Mobility Increased Sales 3X During the Latest Six Months",
number: "3x", number: "3x",
description: "sales increased with Resonance", description: "sales increased with Resonance",
}, },
@ -259,9 +258,9 @@ export const portfolioItems = [
number: "Zero", number: "Zero",
description: "negative reviews with Resonance", description: "negative reviews with Resonance",
}, },
]; ];
export const portfolios5 = [ export const portfolios5 = [
{ {
id: 28, id: 28,
imageSrc: "/assets/images/demo-elegant/portfolio/1.jpg", imageSrc: "/assets/images/demo-elegant/portfolio/1.jpg",
@ -318,9 +317,9 @@ export const portfolioItems = [
type: "Lightbox", type: "Lightbox",
categories: ["development"], categories: ["development"],
}, },
]; ];
export const portfolios6 = [ export const portfolios6 = [
{ {
id: 36, id: 36,
categories: ["development"], categories: ["development"],
@ -375,9 +374,9 @@ export const portfolioItems = [
lightbox: true, lightbox: true,
lightboxLink: "/assets/images/demo-fancy/portfolio/project-6-large.jpg", lightboxLink: "/assets/images/demo-fancy/portfolio/project-6-large.jpg",
}, },
]; ];
export const portfolios7 = [ export const portfolios7 = [
{ {
id: 42, id: 42,
categories: ["development"], categories: ["development"],
@ -426,9 +425,9 @@ export const portfolioItems = [
description: "Lightbox", description: "Lightbox",
dataWowDelay: "1s", dataWowDelay: "1s",
}, },
]; ];
export const portfolios8 = [ export const portfolios8 = [
{ {
id: 48, id: 48,
imageSrc: "/assets/images/demo-modern/portfolio/1.jpg", imageSrc: "/assets/images/demo-modern/portfolio/1.jpg",
@ -464,14 +463,14 @@ export const portfolioItems = [
categories: "Design, Development", categories: "Design, Development",
align: "text-center", align: "text-center",
}, },
]; ];
export const portfolios9 = [ export const portfolios9 = [
{ {
id: 53, id: 53,
className: "work-item", className: "work-item",
categories: ["mix", "development"], categories: ["mix", "development"],
imgSrc: "/assets/images/demo-slick/portfolio/project-1.jpg", imgSrc: "https://cochiseoncology.com/wp-content/uploads/2024/08/28b08c75-8521-46e8-9004-56cc8ef9ad03-768x1014.jpeg",
imgAlt: "Work Description", imgAlt: "Work Description",
title: "Medium Scene", title: "Medium Scene",
description: "Lightbox", description: "Lightbox",
@ -527,8 +526,8 @@ export const portfolioItems = [
description: "Lightbox", description: "Lightbox",
isLightbox: true, isLightbox: true,
}, },
]; ];
export const portfolios10 = [ export const portfolios10 = [
{ {
id: 59, id: 59,
imgSrc: "/assets/images/demo-strong/portfolio/1.jpg", imgSrc: "/assets/images/demo-strong/portfolio/1.jpg",
@ -571,9 +570,9 @@ export const portfolioItems = [
title: "Design System", title: "Design System",
description: "Branding, Design", description: "Branding, Design",
}, },
]; ];
export const portfolios11 = [ export const portfolios11 = [
{ {
id: 65, id: 65,
title: "How Marketing Wire Support Increased Data Accuracy by 70%", title: "How Marketing Wire Support Increased Data Accuracy by 70%",
@ -583,8 +582,7 @@ export const portfolioItems = [
}, },
{ {
id: 66, id: 66,
title: title: "How Surface Mobility Increased Sales 3X During the Latest Six Months",
"How Surface Mobility Increased Sales 3X During the Latest Six Months",
imageUrl: "/assets/images/demo-corporate/portfolio/project-2.jpg", imageUrl: "/assets/images/demo-corporate/portfolio/project-2.jpg",
number: "3x", number: "3x",
description: "sales increased with Resonance", description: "sales increased with Resonance",
@ -598,8 +596,7 @@ export const portfolioItems = [
}, },
{ {
id: 68, id: 68,
title: title: "How Surface Mobility Increased Sales 3X During the Latest Six Months",
"How Surface Mobility Increased Sales 3X During the Latest Six Months",
imageUrl: "/assets/images/demo-corporate/portfolio/project-4.jpg", imageUrl: "/assets/images/demo-corporate/portfolio/project-4.jpg",
number: "2x", number: "2x",
description: "sales increased with Resonance", description: "sales increased with Resonance",
@ -618,9 +615,9 @@ export const portfolioItems = [
number: "80%", number: "80%",
description: "growth with Resonance", description: "growth with Resonance",
}, },
]; ];
export const portfolios12 = [ export const portfolios12 = [
{ {
id: 71, id: 71,
className: "work-item mix development", className: "work-item mix development",
@ -709,9 +706,9 @@ export const portfolioItems = [
title: "Super Awards", title: "Super Awards",
description: "External Page", description: "External Page",
}, },
]; ];
export const portfolios13 = [ export const portfolios13 = [
{ {
id: 79, id: 79,
type: "lightbox", type: "lightbox",
@ -792,9 +789,9 @@ export const portfolioItems = [
title: "White Chair", title: "White Chair",
descr: "External Page", descr: "External Page",
}, },
]; ];
export const allPortfolios = [ export const allPortfolios = [
...portfolioItems, ...portfolioItems,
...portfolios1, ...portfolios1,
...portfolios2, ...portfolios2,
@ -809,5 +806,4 @@ export const portfolioItems = [
...portfolios11, ...portfolios11,
...portfolios12, ...portfolios12,
...portfolios13, ...portfolios13,
]; ];

View File

@ -27,9 +27,9 @@ export const services = [
description: description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis urna ligula. Nam convallis nunc in felis mattis, a sollicitudin ligula molestie. Donec tincidunt eu lorem eget varius. Vestibulum ac efficitur ante. Aenean accumsan, justo vel placerat fermentum, elit neque lobortis velit, a varius nibh lorem in tellus.", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis urna ligula. Nam convallis nunc in felis mattis, a sollicitudin ligula molestie. Donec tincidunt eu lorem eget varius. Vestibulum ac efficitur ante. Aenean accumsan, justo vel placerat fermentum, elit neque lobortis velit, a varius nibh lorem in tellus.",
}, },
]; ];
export const services2 = [ export const services2 = [
{ {
id: 1, id: 1,
path: "M7 22v-16h14v7.543c0 4.107-6 2.457-6 2.457s1.518 6-2.638 6h-5.362zm16-7.614v-10.386h-18v20h8.189c3.163 0 9.811-7.223 9.811-9.614zm-10 1.614h-4v-1h4v1zm6-4h-10v1h10v-1zm0-3h-10v1h10v-1zm1-7h-17v19h-2v-21h19v2z", path: "M7 22v-16h14v7.543c0 4.107-6 2.457-6 2.457s1.518 6-2.638 6h-5.362zm16-7.614v-10.386h-18v20h8.189c3.163 0 9.811-7.223 9.811-9.614zm-10 1.614h-4v-1h4v1zm6-4h-10v1h10v-1zm0-3h-10v1h10v-1zm1-7h-17v19h-2v-21h19v2z",
@ -74,9 +74,9 @@ export const services = [
delay: "0.3s", delay: "0.3s",
iconColorClass: "color-4", iconColorClass: "color-4",
}, },
]; ];
export const serviceItems = [ export const serviceItems = [
{ {
iconPath: iconPath:
"M16 18.75l32 32-4.25 4.25-32-32zM18.625 27l25.125 25.125 1.375-1.375-25.125-25.25zM15 13v-5h2v5h-2zM15 38.5v-5h2v5h-2zM27 24v-2h5v2h-5zM0 24v-2h5v2h-5zM5.875 11.75l3.625 3.625-1.5 1.375-3.5-3.5zM9.5 31.25l-3.625 3.5-1.375-1.375 3.5-3.5zM27.5 13.25l-3.5 3.5-1.5-1.375 3.625-3.625z", "M16 18.75l32 32-4.25 4.25-32-32zM18.625 27l25.125 25.125 1.375-1.375-25.125-25.25zM15 13v-5h2v5h-2zM15 38.5v-5h2v5h-2zM27 24v-2h5v2h-5zM0 24v-2h5v2h-5zM5.875 11.75l3.625 3.625-1.5 1.375-3.5-3.5zM9.5 31.25l-3.625 3.5-1.375-1.375 3.5-3.5zM27.5 13.25l-3.5 3.5-1.5-1.375 3.625-3.625z",
@ -101,9 +101,9 @@ export const services = [
title: "Branding", title: "Branding",
text: "Branding is a marketing practice in which a company creates a name, symbol or design lorem ipsum that is easily identifiable as belonging to the company.", text: "Branding is a marketing practice in which a company creates a name, symbol or design lorem ipsum that is easily identifiable as belonging to the company.",
}, },
]; ];
export const services3 = [ export const services3 = [
{ {
src: "/assets/images/demo-fancy/services/service-1.png", src: "/assets/images/demo-fancy/services/service-1.png",
title: "Branding", title: "Branding",
@ -124,9 +124,9 @@ export const services = [
title: "Marketing", title: "Marketing",
text: "Marketing refers to activities a company undertakes to promote the buying or selling of a product, service, or good.", text: "Marketing refers to activities a company undertakes to promote the buying or selling of a product, service, or good.",
}, },
]; ];
export const services4 = [ export const services4 = [
{ {
title: "Branding", title: "Branding",
imageSrc: "/assets/images/demo-modern/services/1.jpg", imageSrc: "/assets/images/demo-modern/services/1.jpg",
@ -157,36 +157,36 @@ export const services = [
alt: "Image Description", alt: "Image Description",
align: "text-center", align: "text-center",
}, },
]; ];
export const services5 = [ export const services5 = [
{ {
caption: "Branding", caption: "Radiation Oncology",
title: "Brand Strategy", title: "Radixact®",
text: "Curabitur vel molestie dolor vulputate diam. Etiam ornare facilisis euismod cras blandit vel purus nec varius.", text: "adixact® is a form of TomoTherapy®, a system of CT imaging that provides 3D images of the tumor, then targets it more precisely to minimize the effects on healthy tissue.",
delay: 0, delay: 0,
}, },
{ {
caption: "Mobile & Web", caption: "Radiation Oncology",
title: "UI/UX Design", title: "Xoft®",
text: "Quisque accumsan augue nec ligula gravida, eleifend volutpat augue luctus vulputate imperdiet quis sed odio.", text: "Xoft® radiation therapy is an advanced form of radiotherapy that utilizes a tiny X-ray source, which can fit into the fingertip, enabling Cochise Oncologys physicians and doctors to deliver treatments with confidence and precision.",
delay: 0.05, delay: 0.05,
}, },
{ {
caption: "Video & Animation", caption: "Skin Cancer",
title: "Motion Design", title: "Chemotherapy",
text: "Maecenas finibus ipsum orci, sit amet eleifend purus rutrum fringilla. Nunc quis lobortis nulla.", text: "Chemotherapy is a range of chemical treatments that are designed to combat the growth and spread of cancer.",
delay: 0.1, delay: 0.1,
}, },
{ {
caption: "Marketing", caption: "Medical Oncology",
title: "Research & Solutions", title: "Skin Screenings",
text: "Cras nisl ex, fermentum id volutpat luctus, interdum luctus tortor. Nunc vestibulum accumsan.", text: "A skin cancer screening is a physical assessment that is performed by a doctor to determine the health of your skin.",
delay: 0.15, delay: 0.15,
}, },
]; ];
export const services6 = [ export const services6 = [
{ {
width: 48, width: 48,
height: 64, height: 64,
@ -231,5 +231,4 @@ export const services = [
title: "Marketing", title: "Marketing",
text: "A brand is a name, term, design, lorem ipsum symbol or any other feature that identifies one seller's good or service as distinct from those of other sellers.", text: "A brand is a name, term, design, lorem ipsum symbol or any other feature that identifies one seller's good or service as distinct from those of other sellers.",
}, },
]; ];

130
src/data/team.ts Normal file
View File

@ -0,0 +1,130 @@
export const teamMembers = [
{
name: "Cecilia Hirales",
role: "Clinical Director",
image:
"https://cochiseoncology.com/wp-content/uploads/2024/08/Screenshot-2024-08-26-at-9.39.02%E2%80%AFPM-768x511.png",
socials: [
{ platform: "Facebook", icon: "fa-facebook-f", url: "#" },
{ platform: "Twitter", icon: "fa-twitter", url: "#" },
{ platform: "Pinterest", icon: "fa-pinterest-p", url: "#" },
],
},
{
name: "Dr. Stephen Mayer",
role: "Medical Oncology & Hematology",
image: "https://cochiseoncology.com/wp-content/uploads/2024/08/Stephen_Mayer.jpg",
socials: [
{ platform: "Facebook", icon: "fa-facebook-f", url: "#" },
{ platform: "Twitter", icon: "fa-twitter", url: "#" },
{ platform: "Pinterest", icon: "fa-pinterest-p", url: "#" },
],
},
{
name: "Dr. Ramesh Vedula",
role: "Radiation Oncology",
image:
"https://cochiseoncology.com/wp-content/uploads/2024/08/Screenshot-2024-08-25-at-11.38.31%E2%80%AFPM-e1724796972654.png",
socials: [
{ platform: "Facebook", icon: "fa-facebook-f", url: "#" },
{ platform: "Twitter", icon: "fa-twitter", url: "#" },
{ platform: "Pinterest", icon: "fa-pinterest-p", url: "#" },
],
},
{
name: "Dr. Janet Nettleton",
role: "Radiation Oncology",
image: "https://cochiseoncology.com/wp-content/uploads/2024/08/28b08c75-8521-46e8-9004-56cc8ef9ad03-768x1014.jpeg",
socials: [
{ platform: "Facebook", icon: "fa-facebook-f", url: "#" },
{ platform: "Twitter", icon: "fa-twitter", url: "#" },
{ platform: "Pinterest", icon: "fa-pinterest-p", url: "#" },
],
},
{
name: "Dr. Stephen Goldfarb",
role: "Medical Oncology & Hematology",
image:
"https://cochiseoncology.com/wp-content/uploads/2024/08/Screenshot-2024-08-25-at-11.44.10%E2%80%AFPM-768x509.png",
socials: [
{ platform: "Facebook", icon: "fa-facebook-f", url: "#" },
{ platform: "Twitter", icon: "fa-twitter", url: "#" },
{ platform: "Pinterest", icon: "fa-pinterest-p", url: "#" },
],
},
{
name: "Shannon Lenahan",
role: "Senior Project Manager",
image:
"https://cochiseoncology.com/wp-content/uploads/2024/08/Screenshot-2024-08-26-at-9.29.54%E2%80%AFPM-768x380.png",
socials: [
{ platform: "Facebook", icon: "fa-facebook-f", url: "#" },
{ platform: "Twitter", icon: "fa-twitter", url: "#" },
{ platform: "Pinterest", icon: "fa-pinterest-p", url: "#" },
],
},
];
export const teamMembers2 = [
{
name: "Thomas Johnson",
role: "Project Manager",
image: "/assets/images/demo-elegant/team/team-1.jpg",
socials: [
{ name: "Facebook", url: "#" },
{ name: "Twitter", url: "#" },
{ name: "Pinterest", url: "#" },
],
},
{
name: "Emma Adams",
role: "UI/UX Designer",
image: "/assets/images/demo-elegant/team/team-2.jpg",
socials: [
{ name: "Facebook", url: "#" },
{ name: "Twitter", url: "#" },
{ name: "Pinterest", url: "#" },
],
},
{
name: "Jack Anderson",
role: "Full-stack Developer",
image: "/assets/images/demo-elegant/team/team-3.jpg",
socials: [
{ name: "Facebook", url: "#" },
{ name: "Twitter", url: "#" },
{ name: "Pinterest", url: "#" },
],
},
// Add more team members as needed
];
export const teamMembers3 = [
{
name: "Thomas Anderson",
role: "Creative director",
description:
"Sed eget ipsum vel urna viverra iaculis. Aenean ligula arcu, porta in scelerisque vehicula eget metus.",
imgSrc: "/assets/images/demo-strong/team/team-1.jpg",
},
{
name: "Lukas Goodman",
role: "Product designer",
description: "Etiam nec purus lacus curabitur facilisis dolor odio, in cursus sem viverra nec maximus pretium.",
imgSrc: "/assets/images/demo-strong/team/team-2.jpg",
},
{
name: "Kelsie Rogers",
role: "Web engineer",
description:
"Etiam at orli at tellus iaculis bibendum quis id ante proin posuere eros, eget blandit vestibulum vel.",
imgSrc: "/assets/images/demo-strong/team/team-3.jpg",
},
{
name: "Marta Carlson",
role: "UI/UX designer",
description:
"Sed eget ipsum vel urna viverra iaculis. Aenean ligula arcu, porta in scelerisque vehicula eget metus.",
imgSrc: "/assets/images/demo-strong/team/team-4.jpg",
},
];