development/a24475fa-3414-4615-aba9-58dea4146560
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-01-28 02:29:12 +02:00
commit f20090cda6
297 changed files with 57750 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,163 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
type BlogPost = {
id: string;
category: string;
title: string;
excerpt: string;
imageSrc: string;
imageAlt?: string;
authorName: string;
authorAvatar: string;
date: string;
onBlogClick?: () => void;
};
const defaultPosts: BlogPost[] = [
{
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
},
{
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
},
{
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
},
{
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
},
];
export default function BlogPage() {
const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchPosts = async () => {
try {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
setIsLoading(false);
return;
}
const url = `${apiUrl}/posts/${projectId}?status=published`;
const response = await fetch(url, {
method: "GET", headers: {
"Content-Type": "application/json"},
});
if (response.ok) {
const resp = await response.json();
const data = resp.data;
if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`),
}));
setPosts(mappedPosts);
}
} else {
console.warn(`API request failed with status ${response.status}, using default posts`);
}
} catch (error) {
console.error("Error fetching posts:", error);
} finally {
setIsLoading(false);
}
};
fetchPosts();
}, []);
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="gradient-bordered"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarStyleMinimal
brandName="ChiroCare"
button={{ text: "Book Appointment", href: "contact" }}
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardThree
blogs={posts}
title="Health & Wellness Insights"
description="Stay informed with our latest articles on spinal health, wellness tips, and chiropractic care"
tag="Blog"
textboxLayout="default"
useInvertedBackground="noInvert"
carouselMode="buttons"
animationType="slide-up"
/>
)}
<FooterBaseCard
logoText="ChiroCare"
columns={[
{
title: "Services", items: [
{ label: "Spinal Care", href: "#services" },
{ label: "Sports Medicine", href: "#services" },
{ label: "Wellness Care", href: "#services" },
{ label: "Pain Management", href: "#services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Team", href: "#about" },
{ label: "Patient Reviews", href: "#testimonials" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Resources", items: [
{ label: "Health Blog", href: "#" },
{ label: "Wellness Tips", href: "#" },
{ label: "FAQ", href: "#faq" },
{ label: "Insurance Info", href: "#" }
]
},
{
title: "Contact", items: [
{ label: "(555) 123-4567", href: "tel:5551234567" },
{ label: "info@chirocare.com", href: "mailto:info@chirocare.com" },
{ label: "123 Wellness Avenue, Health City, HC 12345", href: "#" },
{ label: "Mon-Fri: 8am-6pm | Sat: 9am-2pm", href: "#" }
]
}
]}
copyrightText="© 2024 ChiroCare. All rights reserved. Licensed chiropractors committed to your wellness."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

595
src/app/globals.css Normal file
View File

@@ -0,0 +1,595 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #ffffff;;
--card: #f0f7ff;;
--foreground: #001a40;;
--primary-cta: #0066cc;;
--secondary-cta: #ffffff;;
--accent: #4da6ff;;
--background-accent: #99ccff;; */
--background: #ffffff;;
--card: #f0f7ff;;
--foreground: #001a40;;
--primary-cta: #0066cc;;
--secondary-cta: #ffffff;;
--accent: #4da6ff;;
--background-accent: #99ccff;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 20s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-rubik), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-rubik), sans-serif;
}

1265
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

258
src/app/page.tsx Normal file
View File

@@ -0,0 +1,258 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Heart, Stethoscope, Zap, Star, HelpCircle, Calendar } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="gradient-bordered"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleMinimal
brandName="ChiroCare"
button={{
text: "Book Appointment", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="Expert Chiropractic Care for Your Wellness"
description="Experience relief and restore your body's natural balance with our certified chiropractors. Serving your community with personalized care since 2010."
background={{ variant: "radial-gradient" }}
tag="Health & Wellness"
tagIcon={Heart}
buttons={[
{ text: "Book Your Appointment", href: "contact" },
{ text: "Learn More", href: "about" }
]}
mediaItems={[
{
imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-man-helping-patient-physiotherapy_23-2149047562.jpg", imageAlt: "Professional chiropractor performing spinal adjustment"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/male-physiotherapist-checking-woman-s-back-pain_23-2148780738.jpg", imageAlt: "Modern chiropractic clinic interior"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/physiotherapist-checking-back-medium-shot_23-2149047489.jpg", imageAlt: "Chiropractic spinal treatment session"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-helping-patient-recover_23-2149173488.jpg", imageAlt: "Neck and cervical spine treatment"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/osteopathy-patoient-getting-tretment-massage_23-2149159109.jpg", imageAlt: "Joint pain relief and extremity care"
}
]}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
tag="About ChiroCare"
tagIcon={Stethoscope}
title="Dedicated to Your Health and Recovery"
description="Dr. Sarah Mitchell, DC"
subdescription="Founder & Lead Chiropractor"
icon={Stethoscope}
imageSrc="https://img.b2bpic.net/free-photo/male-physiotherapist-checking-woman-s-back-pain_23-2148780738.jpg"
imageAlt="ChiroCare clinic interior with modern equipment"
useInvertedBackground="invertDefault"
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwelve
title="Our Chiropractic Services"
description="Comprehensive care tailored to your unique needs and health goals"
tag="Services"
tagIcon={Zap}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
features={[
{
id: "spinal", label: "Spinal Care", title: "Spinal Adjustments & Alignment", items: [
"Corrective spinal adjustments", "Alignment restoration", "Chronic pain relief", "Posture improvement"
]
},
{
id: "sports", label: "Sports Medicine", title: "Athletic Performance & Injury Prevention", items: [
"Sports injury treatment", "Performance optimization", "Injury prevention programs", "Recovery acceleration"
]
},
{
id: "wellness", label: "Wellness Care", title: "Preventive Health & Maintenance", items: [
"Wellness consultations", "Lifestyle coaching", "Ergonomic assessments", "Long-term health planning"
]
}
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
title="Trusted by thousands of patients for their health and wellness needs."
tag="Our Impact"
metrics={[
{
id: "1", value: "15K+", description: "Patients treated and helped return to active lifestyles"
},
{
id: "2", value: "98%", description: "Patient satisfaction rate with our care and treatment outcomes"
},
{
id: "3", value: "25+", description: "Years of combined clinical experience on our team"
},
{
id: "4", value: "99%", description: "Treatment success rate for common musculoskeletal conditions"
}
]}
useInvertedBackground="invertDefault"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="What Our Patients Say"
description="Real experiences from people who've transformed their health with ChiroCare"
tag="Testimonials"
tagIcon={Star}
textboxLayout="default"
useInvertedBackground="noInvert"
testimonials={[
{
id: "1", name: "Michael Johnson, CEO of Tech Solutions", date: "Date: 15 November 2024", title: "Finally free from chronic back pain!", quote: "After years of dealing with lower back pain from my desk job, ChiroCare's treatment plan has given me my life back. I'm more productive at work and actually enjoy physical activities again.", tag: "Back Pain Relief", avatarSrc: "https://img.b2bpic.net/free-photo/osteopathy-patoient-getting-tretment-massage_23-2149159096.jpg", imageSrc: "https://img.b2bpic.net/free-photo/osteopathy-patoient-getting-tretment-massage_23-2149159096.jpg"
},
{
id: "2", name: "Jennifer Martinez, Marathon Runner", date: "Date: 08 October 2024", title: "Enhanced my athletic performance dramatically", quote: "Dr. Mitchell's sports medicine expertise helped me overcome a knee injury and actually improved my running form. My race times have improved significantly since starting care here.", tag: "Sports Medicine", avatarSrc: "https://img.b2bpic.net/free-photo/male-physiotherapist-checking-woman-s-back_23-2148780736.jpg", imageSrc: "https://img.b2bpic.net/free-photo/male-physiotherapist-checking-woman-s-back_23-2148780736.jpg"
},
{
id: "3", name: "Robert Chen, Small Business Owner", date: "Date: 22 September 2024", title: "Excellent professional care and genuine concern", quote: "The team at ChiroCare doesn't just treat symptoms—they educate you on prevention and wellness. Their comprehensive approach and personal attention is exceptional.", tag: "Wellness", avatarSrc: "https://img.b2bpic.net/free-photo/osteopathy-patoient-getting-tretment-massage_23-2149159149.jpg", imageSrc: "https://img.b2bpic.net/free-photo/osteopathy-patoient-getting-tretment-massage_23-2149159149.jpg"
},
{
id: "4", name: "Susan Williams, School Teacher", date: "Date: 10 August 2024", title: "Transformed my quality of life completely", quote: "Chronic neck tension from teaching made me miserable. After six weeks of treatment, I'm pain-free and have learned exercises to maintain my health. Highly recommended!", tag: "Neck Pain", avatarSrc: "https://img.b2bpic.net/free-photo/physiotherapist-doing-healing-treatment-womans-back-back-pain-patient-treatment-medical-doctor-massage-therapistoffice-syndrome_657921-327.jpg", imageSrc: "https://img.b2bpic.net/free-photo/physiotherapist-doing-healing-treatment-womans-back-back-pain-patient-treatment-medical-doctor-massage-therapistoffice-syndrome_657921-327.jpg"
},
{
id: "5", name: "David Foster, Construction Manager", date: "Date: 25 July 2024", title: "Professional care that actually works", quote: "I was skeptical at first, but the results speak for themselves. My mobility has improved, my posture is better, and I haven't missed work due to pain since starting treatment.", tag: "Work Injury", avatarSrc: "https://img.b2bpic.net/free-photo/osteopathy-patoient-getting-tretment-massage_23-2149159096.jpg", imageSrc: "https://img.b2bpic.net/free-photo/osteopathy-patoient-getting-tretment-massage_23-2149159096.jpg"
},
{
id: "6", name: "Lisa Anderson, Fitness Enthusiast", date: "Date: 12 June 2024", title: "The best healthcare decision I've made", quote: "Dr. Mitchell combines clinical expertise with a genuine passion for patient wellness. The personalized treatment plans and follow-up care are outstanding.", tag: "Preventive Care", avatarSrc: "https://img.b2bpic.net/free-photo/male-physiotherapist-checking-woman-s-back_23-2148780736.jpg", imageSrc: "https://img.b2bpic.net/free-photo/male-physiotherapist-checking-woman-s-back_23-2148780736.jpg"
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find answers to common questions about chiropractic care and our services"
tag="FAQ"
tagIcon={HelpCircle}
textboxLayout="default"
useInvertedBackground="invertDefault"
imageSrc="https://img.b2bpic.net/free-photo/osteopathy-patoient-getting-tretment-massage_23-2149159146.jpg"
imageAlt="Modern chiropractic clinic with advanced equipment"
mediaPosition="right"
animationType="smooth"
faqs={[
{
id: "1", title: "Is chiropractic care safe?", content: "Yes, chiropractic care is very safe when performed by a licensed, trained professional. Our chiropractors are fully certified and use evidence-based techniques. We perform thorough examinations and may order imaging to ensure safe treatment."
},
{
id: "2", title: "How many visits will I need?", content: "The number of visits depends on your condition and individual health goals. During your initial consultation, we'll discuss your treatment plan and estimated timeline. Most acute conditions improve within 4-6 weeks, while chronic conditions may require longer-term care."
},
{
id: "3", title: "Does insurance cover chiropractic treatment?", content: "Many insurance plans cover chiropractic care. We accept most major insurance providers and can verify your coverage before treatment. We also offer flexible payment plans for uninsured patients."
},
{
id: "4", title: "What should I expect during my first visit?", content: "Your first visit includes a comprehensive health history, physical examination, and potentially X-rays or other imaging. We'll discuss your symptoms, goals, and treatment options. Most first visits take 60 minutes."
},
{
id: "5", title: "Can chiropractic care help with headaches?", content: "Yes, many headaches originate from neck tension and misalignment. Chiropractic adjustments can help reduce headache frequency and intensity by addressing the underlying cause rather than just treating symptoms."
},
{
id: "6", title: "Is chiropractic care suitable for children?", content: "Yes, chiropractic care can be beneficial for children. We use age-appropriate techniques and lighter pressure for pediatric patients. Many parents bring their children in for wellness care and injury prevention."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Get Started"
title="Schedule Your Appointment Today"
description="Take the first step toward better health. Contact us to book your initial consultation and discover how ChiroCare can help you achieve your wellness goals."
useInvertedBackground="noInvert"
imageSrc="https://img.b2bpic.net/free-photo/physiotherapist-checking-back-medium-shot_23-2149047489.jpg"
imageAlt="Professional chiropractic treatment in progress"
mediaPosition="right"
tagIcon={Calendar}
inputPlaceholder="Enter your email"
buttonText="Get Started"
termsText="We respect your privacy and will only contact you about your appointment request."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="ChiroCare"
columns={[
{
title: "Services", items: [
{ label: "Spinal Care", href: "#services" },
{ label: "Sports Medicine", href: "#services" },
{ label: "Wellness Care", href: "#services" },
{ label: "Pain Management", href: "#services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Team", href: "#about" },
{ label: "Patient Reviews", href: "#testimonials" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Resources", items: [
{ label: "Health Blog", href: "#" },
{ label: "Wellness Tips", href: "#" },
{ label: "FAQ", href: "#faq" },
{ label: "Insurance Info", href: "#" }
]
},
{
title: "Contact", items: [
{ label: "(555) 123-4567", href: "tel:5551234567" },
{ label: "info@chirocare.com", href: "mailto:info@chirocare.com" },
{ label: "123 Wellness Avenue, Health City, HC 12345", href: "#" },
{ label: "Mon-Fri: 8am-6pm | Sat: 9am-2pm", href: "#" }
]
}
]}
copyrightText="© 2024 ChiroCare. All rights reserved. Licensed chiropractors committed to your wellness."
/>
</div>
</ThemeProvider>
);
}