Compare commits

...

4 Commits

Author SHA1 Message Date
0e77f27729 Merge pull request 'dev' (#1) from dev into main
Reviewed-on: #1
2025-02-21 09:52:03 +00:00
d9cc92463c fix: hero and footer styling 2025-02-21 16:47:15 +07:00
8e0018c185 fix: contact page submission
- form submission
- button loading
2025-02-20 17:53:59 +07:00
3c694a6e2a fix: homepage parallax error and broken layout 2025-02-19 13:27:02 +07:00
10 changed files with 150 additions and 133 deletions

View File

@ -47,16 +47,10 @@
--bs-black-rgb: 0, 0, 0; --bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41; --bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255; --bs-body-bg-rgb: 255, 255, 255;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
"Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(
180deg,
rgba(255, 255, 255, 0.15),
rgba(255, 255, 255, 0)
);
--bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem; --bs-body-font-size: 1rem;
--bs-body-font-weight: 400; --bs-body-font-weight: 400;
@ -232,7 +226,7 @@ sup {
} }
a { a {
color: #0d6efd; color: #0d6efd;
text-decoration: underline; /* text-decoration: underline; */
} }
a:hover { a:hover {
color: #0a58ca; color: #0a58ca;
@ -1860,7 +1854,9 @@ progress {
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
border-radius: 0.25rem; border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.form-control { .form-control {
@ -1909,11 +1905,16 @@ progress {
border-width: 0; border-width: 0;
border-inline-end-width: 1px; border-inline-end-width: 1px;
border-radius: 0; border-radius: 0;
-webkit-transition: color 0.15s ease-in-out, -webkit-transition:
background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
transition:
color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out; box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} }
.form-control::file-selector-button { .form-control::file-selector-button {
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
@ -1928,8 +1929,11 @@ progress {
border-width: 0; border-width: 0;
border-inline-end-width: 1px; border-inline-end-width: 1px;
border-radius: 0; border-radius: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transition:
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.form-control::-webkit-file-upload-button { .form-control::-webkit-file-upload-button {
@ -1959,11 +1963,16 @@ progress {
border-width: 0; border-width: 0;
border-inline-end-width: 1px; border-inline-end-width: 1px;
border-radius: 0; border-radius: 0;
-webkit-transition: color 0.15s ease-in-out, -webkit-transition:
background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
transition:
color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out; box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.form-control::-webkit-file-upload-button { .form-control::-webkit-file-upload-button {
@ -2079,7 +2088,9 @@ textarea.form-control-lg {
background-size: 16px 12px; background-size: 16px 12px;
border: 1px solid #ced4da; border: 1px solid #ced4da;
border-radius: 0.25rem; border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@ -2235,10 +2246,14 @@ textarea.form-control-lg {
outline: 0; outline: 0;
} }
.form-range:focus::-webkit-slider-thumb { .form-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); box-shadow:
0 0 0 1px #fff,
0 0 0 0.25rem rgba(13, 110, 253, 0.25);
} }
.form-range:focus::-moz-range-thumb { .form-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); box-shadow:
0 0 0 1px #fff,
0 0 0 0.25rem rgba(13, 110, 253, 0.25);
} }
.form-range::-moz-focus-outer { .form-range::-moz-focus-outer {
border: 0; border: 0;
@ -2250,9 +2265,13 @@ textarea.form-control-lg {
background-color: #0d6efd; background-color: #0d6efd;
border: 0; border: 0;
border-radius: 1rem; border-radius: 1rem;
-webkit-transition: background-color 0.15s ease-in-out, -webkit-transition:
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; background-color 0.15s ease-in-out,
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
transition:
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out; box-shadow 0.15s ease-in-out;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
@ -2281,9 +2300,13 @@ textarea.form-control-lg {
background-color: #0d6efd; background-color: #0d6efd;
border: 0; border: 0;
border-radius: 1rem; border-radius: 1rem;
-moz-transition: background-color 0.15s ease-in-out, -moz-transition:
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; background-color 0.15s ease-in-out,
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
transition:
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out; box-shadow 0.15s ease-in-out;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@ -2332,7 +2355,9 @@ textarea.form-control-lg {
pointer-events: none; pointer-events: none;
border: 1px solid transparent; border: 1px solid transparent;
transform-origin: 0 0; transform-origin: 0 0;
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; transition:
opacity 0.1s ease-in-out,
transform 0.1s ease-in-out;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.form-floating > label { .form-floating > label {
@ -2439,21 +2464,19 @@ textarea.form-control-lg {
padding-right: 3rem; padding-right: 3rem;
} }
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
.input-group:not(.has-validation) .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4), .input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4),
.input-group.has-validation .input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu) {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu) {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.input-group .input-group
> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not( > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(
.valid-feedback .invalid-feedback
):not(.invalid-tooltip):not(.invalid-feedback) { ) {
margin-left: -1px; margin-left: -1px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@ -2501,8 +2524,7 @@ textarea.form-control-lg {
.was-validated textarea.form-control:valid, .was-validated textarea.form-control:valid,
textarea.form-control.is-valid { textarea.form-control.is-valid {
padding-right: calc(1.5em + 0.75rem); padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
calc(0.375em + 0.1875rem);
} }
.form-select.is-valid, .form-select.is-valid,
.was-validated .form-select:valid { .was-validated .form-select:valid {
@ -2515,8 +2537,12 @@ textarea.form-control.is-valid {
padding-right: 4.125rem; padding-right: 4.125rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-position: right 0.75rem center, center right 2.25rem; background-position:
background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); right 0.75rem center,
center right 2.25rem;
background-size:
16px 12px,
calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
} }
.form-select.is-valid:focus, .form-select.is-valid:focus,
.was-validated .form-select:valid:focus { .was-validated .form-select:valid:focus {
@ -2597,8 +2623,7 @@ textarea.form-control.is-valid {
.was-validated textarea.form-control:invalid, .was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid { textarea.form-control.is-invalid {
padding-right: calc(1.5em + 0.75rem); padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
calc(0.375em + 0.1875rem);
} }
.form-select.is-invalid, .form-select.is-invalid,
.was-validated .form-select:invalid { .was-validated .form-select:invalid {
@ -2611,8 +2636,12 @@ textarea.form-control.is-invalid {
padding-right: 4.125rem; padding-right: 4.125rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-position: right 0.75rem center, center right 2.25rem; background-position:
background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); right 0.75rem center,
center right 2.25rem;
background-size:
16px 12px,
calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
} }
.form-select.is-invalid:focus, .form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus { .was-validated .form-select:invalid:focus {
@ -2667,8 +2696,11 @@ textarea.form-control.is-invalid {
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-size: 1rem; font-size: 1rem;
border-radius: 0.25rem; border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transition:
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.btn { .btn {
@ -3729,7 +3761,9 @@ fieldset:disabled .btn {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
color: #0d6efd; color: #0d6efd;
text-decoration: none; text-decoration: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transition:
color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out; border-color 0.15s ease-in-out;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@ -4438,8 +4472,11 @@ fieldset:disabled .btn {
border: 0; border: 0;
border-radius: 0; border-radius: 0;
overflow-anchor: none; overflow-anchor: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transition:
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out,
border-radius 0.15s ease; border-radius 0.15s ease;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@ -4562,8 +4599,11 @@ fieldset:disabled .btn {
text-decoration: none; text-decoration: none;
background-color: #fff; background-color: #fff;
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transition:
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.page-link { .page-link {
@ -6088,18 +6128,8 @@ fieldset:disabled .btn {
} }
} }
.placeholder-wave { .placeholder-wave {
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
130deg, mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
#000 55%,
rgba(0, 0, 0, 0.8) 75%,
#000 95%
);
mask-image: linear-gradient(
130deg,
#000 55%,
rgba(0, 0, 0, 0.8) 75%,
#000 95%
);
-webkit-mask-size: 200% 100%; -webkit-mask-size: 200% 100%;
mask-size: 200% 100%; mask-size: 200% 100%;
-webkit-animation: placeholder-wave 2s linear infinite; -webkit-animation: placeholder-wave 2s linear infinite;
@ -7200,24 +7230,15 @@ fieldset:disabled .btn {
} }
.bg-primary { .bg-primary {
--bs-bg-opacity: 1; --bs-bg-opacity: 1;
background-color: rgba( background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
var(--bs-primary-rgb),
var(--bs-bg-opacity)
) !important;
} }
.bg-secondary { .bg-secondary {
--bs-bg-opacity: 1; --bs-bg-opacity: 1;
background-color: rgba( background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
var(--bs-secondary-rgb),
var(--bs-bg-opacity)
) !important;
} }
.bg-success { .bg-success {
--bs-bg-opacity: 1; --bs-bg-opacity: 1;
background-color: rgba( background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
var(--bs-success-rgb),
var(--bs-bg-opacity)
) !important;
} }
.bg-info { .bg-info {
--bs-bg-opacity: 1; --bs-bg-opacity: 1;
@ -7225,10 +7246,7 @@ fieldset:disabled .btn {
} }
.bg-warning { .bg-warning {
--bs-bg-opacity: 1; --bs-bg-opacity: 1;
background-color: rgba( background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
var(--bs-warning-rgb),
var(--bs-bg-opacity)
) !important;
} }
.bg-danger { .bg-danger {
--bs-bg-opacity: 1; --bs-bg-opacity: 1;
@ -7252,10 +7270,7 @@ fieldset:disabled .btn {
} }
.bg-body { .bg-body {
--bs-bg-opacity: 1; --bs-bg-opacity: 1;
background-color: rgba( background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
var(--bs-body-bg-rgb),
var(--bs-bg-opacity)
) !important;
} }
.bg-transparent { .bg-transparent {
--bs-bg-opacity: 1; --bs-bg-opacity: 1;

View File

@ -754,12 +754,12 @@ body {
} }
a { a {
color: var(--color-dark-1); color: var(--color-dark-1);
text-decoration: underline; /* text-decoration: underline; */
transition: color 0.1s var(--ease-default); transition: color 0.1s var(--ease-default);
} }
a:hover { a:hover {
color: var(--color-dark-4); color: var(--color-dark-4);
text-decoration: underline; /* text-decoration: underline; */
} }
b, b,
strong { strong {
@ -10141,9 +10141,9 @@ a.link-to-top.color:before {
.footer-text { .footer-text {
text-transform: none; text-transform: none;
} }
.footer-text a { /* .footer-text a {
text-decoration: underline; text-decoration: underline;
} } */
.fw-top-link { .fw-top-link {
text-decoration: none; text-decoration: none;
} }

View File

@ -1,10 +1,9 @@
"use client"; // "use client";
import Hero6 from "@/components/Hero"; import Hero6 from "@/components/Hero";
import dynamic from "next/dynamic";
const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), { // const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
ssr: false, // ssr: false,
}); // });
export default function Home1BGVideoMultiPage() { export default function Home1BGVideoMultiPage() {
return ( return (
@ -12,7 +11,7 @@ export default function Home1BGVideoMultiPage() {
<div className="theme-main"> <div className="theme-main">
<div className="page" id="top"> <div className="page" id="top">
<main id="main"> <main id="main">
<ParallaxContainer {/* <ParallaxContainer
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 scrollSpysection" className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 scrollSpysection"
style={{ style={{
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)", backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
@ -20,7 +19,10 @@ export default function Home1BGVideoMultiPage() {
id="home" id="home"
> >
<Hero6 /> <Hero6 />
</ParallaxContainer> </ParallaxContainer> */}
<div className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 bg-[url(/assets/images/full-width-images/section-bg-13.jpeg)]">
<Hero6 />
</div>
</main> </main>
</div> </div>
</div> </div>

View File

@ -2,6 +2,7 @@ import type { ElementType } from "react";
import Link from "next/link"; import Link from "next/link";
import React from "react"; import React from "react";
import { CgSpinner } from "react-icons/cg";
export type Props = { export type Props = {
appearance?: "default" | "primary" | "secondary"; appearance?: "default" | "primary" | "secondary";
@ -12,6 +13,7 @@ export type Props = {
label?: string; label?: string;
newTab?: boolean | null; newTab?: boolean | null;
onClick?: () => void; onClick?: () => void;
isLoading?: boolean;
}; };
export const Button: React.FC<Props> = ({ export const Button: React.FC<Props> = ({
@ -21,6 +23,7 @@ export const Button: React.FC<Props> = ({
href, href,
label, label,
newTab, newTab,
isLoading,
}) => { }) => {
const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {}; const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {};
const Element: ElementType = el; const Element: ElementType = el;
@ -35,19 +38,21 @@ export const Button: React.FC<Props> = ({
const content = ( const content = (
<div className="btn btn-mod btn-color btn-large btn-full btn-circle btn-hover-anim"> <div className="btn btn-mod btn-color btn-large btn-full btn-circle btn-hover-anim">
<span>{label}</span> <span className="flex flex-row">
{label} {isLoading && <CgSpinner color="var(--ext-color-primary-1)" className="animate-spin ml-2" size={24} />}
</span>
</div> </div>
); );
return ( return (
<Element {...elementProps}> <Element {...elementProps} {...{ disabled: isLoading }}>
<React.Fragment> <React.Fragment>
{(el === "link" || el === "a") && ( {(el === "link" || el === "a") && (
<Link {...newTabProps} href={href || ""}> <Link {...newTabProps} href={href || ""}>
{content} {content}
</Link> </Link>
)} )}
{el === "button" && content} {el === "button" && <>{content}</>}
</React.Fragment> </React.Fragment>
</Element> </Element>
); );

View File

@ -76,7 +76,7 @@ export const FormBlock: React.FC<
// delay loading indicator by 1s // delay loading indicator by 1s
loadingTimerID = setTimeout(() => { loadingTimerID = setTimeout(() => {
setIsLoading(true); setIsLoading(true);
}, 1000); }, 250);
try { try {
const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, { const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, {
@ -160,7 +160,7 @@ export const FormBlock: React.FC<
return null; return null;
})} })}
</div> </div>
<Button appearance="primary" el="button" form={formID} label={submitButtonLabel} /> <Button appearance="primary" el="button" form={formID} label={submitButtonLabel} isLoading={isLoading} />
</form> </form>
)} )}
</div> </div>

View File

@ -36,7 +36,7 @@ export default function Footer() {
href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635" href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="underline text-lg text-white" className="text-lg text-white"
> >
5151 E HIGHWAY 90 5151 E HIGHWAY 90
</a> </a>
@ -58,7 +58,7 @@ export default function Footer() {
href="https://www.facebook.com/p/Cochise-Oncology-61556262839823" href="https://www.facebook.com/p/Cochise-Oncology-61556262839823"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="underline text-lg text-white" className="text-lg text-white"
> >
Facebook Facebook
</a> </a>

View File

@ -2,6 +2,7 @@
import ModalVideo from "react-modal-video"; import ModalVideo from "react-modal-video";
import { useState } from "react"; import { useState } from "react";
import Link from "next/link";
export default function Hero6() { export default function Hero6() {
const [isOpen, setOpen] = useState(false); const [isOpen, setOpen] = useState(false);
@ -34,9 +35,9 @@ export default function Hero6() {
data-wow-duration="1.2s" data-wow-duration="1.2s"
data-wow-offset={0} data-wow-offset={0}
> >
<button className="bg-[#64B3B4] text-white px-4 py-2 m-3 rounded-3xl hover:opacity-[0.7]"> <Link href="/contact" className="bg-[#64B3B4] text-white px-4 py-2 m-3 rounded-3xl hover:opacity-[0.7]">
Request Consultation Request Consultation
</button> </Link>
{/* <a {/* <a
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
className="link-hover-anim align-middle lightbox mfp-iframe mt-10" className="link-hover-anim align-middle lightbox mfp-iframe mt-10"

View File

@ -98,20 +98,14 @@ export default function homepage({ onePage = false, dark = false }) {
<section className="my-5 w-full"> <section className="my-5 w-full">
<Testimonials /> <Testimonials />
</section> </section>
<section <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]">
className="page-section bg-scroll light-content"
style={{
backgroundImage: "url(/assets/images/demo-modern/section-bg-3.jpeg)",
}}
>
<div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" /> <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
{/* End Desktop Overlay */}
{/* Mobile Overlay */} {/* Mobile Overlay */}
<div className="bg-overlay bg-dark-1 opacity-09 d-md-none" /> <div className="bg-overlay bg-dark-1 opacity-09 d-md-none" />
{/* End Mobile Overlay */} {/* End Mobile Overlay */}
<div className="container position-relative"> <div className="container position-relative">
<div className="row wow fadeInUp"> <div className="row wow fadeInUp">
<div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-7 offset-xl-7"> <div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-6 offset-xl-6">
<h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2> <h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2>
<p className="text-sm"> <p className="text-sm">
Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We

View File

@ -1,34 +1,34 @@
"use client"; "use client";
import { useEffect, useRef } from "react";
import { GoogleReviewsBlock } from "./Blocks/GoogleReviews"; import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
export default function Testimonials() { export default function Testimonials() {
const isotopContainer = useRef<any | null>(null); // const isotopContainer = useRef<any | null>(null);
const initIsotop = async () => { // const initIsotop = async () => {
const Isotope = (await import("isotope-layout")).default; // const Isotope = (await import("isotope-layout")).default;
const imagesloaded = (await import("imagesloaded")).default; // const imagesloaded = (await import("imagesloaded")).default;
const isotope = new Isotope(isotopContainer.current, { // const isotope = new Isotope(isotopContainer.current, {
itemSelector: ".col-md-6", // itemSelector: ".col-md-6",
layoutMode: "masonry", // layoutMode: "masonry",
}); // });
imagesloaded(isotopContainer.current).on("progress", function () { // imagesloaded(isotopContainer.current).on("progress", function () {
isotope.layout(); // isotope.layout();
}); // });
}; // };
useEffect(() => { // useEffect(() => {
initIsotop(); // initIsotop();
}, []); // }, []);
return ( return (
<div className="text-center"> <div className="text-center wow fadeInUp">
<div className="row"> {/* <div className="row">
<div className="flex align-items-center justify-center wow fadeInUp"> <div className="flex align-items-center justify-center wow fadeInUp">
<GoogleReviewsBlock /> <GoogleReviewsBlock />
</div> </div>
</div> </div> */}
<GoogleReviewsBlock />
</div> </div>
); );
} }