Merge version_1 into main #2
183
src/app/page.tsx
183
src/app/page.tsx
@@ -21,8 +21,7 @@ export default function HomePage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Navigate",
|
||||
items: [
|
||||
title: "Navigate", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Services", href: "#services" },
|
||||
{ label: "About", href: "#about" },
|
||||
@@ -30,8 +29,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
title: "Services", items: [
|
||||
{ label: "Professional Cleaning", href: "/booking" },
|
||||
{ label: "Teeth Whitening", href: "/booking" },
|
||||
{ label: "Dental Implants", href: "/booking" },
|
||||
@@ -39,16 +37,14 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact Info",
|
||||
items: [
|
||||
title: "Contact Info", items: [
|
||||
{ label: "Phone: (555) 123-4567", href: "tel:+15551234567" },
|
||||
{ label: "Email: info@ajdental.com", href: "mailto:info@ajdental.com" },
|
||||
{ label: "Address: 123 Smile Street, Dental City, DC 12345", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
@@ -63,7 +59,7 @@ export default function HomePage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="noise"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -74,9 +70,7 @@ export default function HomePage() {
|
||||
brandName="AJ Dental"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Book Appointment",
|
||||
href: "/booking",
|
||||
}}
|
||||
text: "Book Appointment", href: "/booking"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
@@ -88,39 +82,25 @@ export default function HomePage() {
|
||||
tag="Professional Dental Care"
|
||||
tagIcon={Smile}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "noise" }}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "/booking",
|
||||
},
|
||||
text: "Book Appointment", href: "/booking"},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#services",
|
||||
},
|
||||
text: "Learn More", href: "#services"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-examining-female-patient_107420-65393.jpg?_wi=1",
|
||||
imageAlt: "Modern dental office interior",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-examining-female-patient_107420-65393.jpg", imageAlt: "Modern dental office interior"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-treats-childs-tooth-using-rubber-dam-closeup-tooth-treatment_169016-66923.jpg?_wi=1",
|
||||
imageAlt: "Professional dental cleaning",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-treats-childs-tooth-using-rubber-dam-closeup-tooth-treatment_169016-66923.jpg", imageAlt: "Professional dental cleaning"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-sitting-chair-office_1303-21028.jpg?_wi=1",
|
||||
imageAlt: "Teeth whitening service",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-sitting-chair-office_1303-21028.jpg", imageAlt: "Teeth whitening service"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-doing-check-up-patient_23-2149206230.jpg?_wi=1",
|
||||
imageAlt: "Dental implants procedure",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-doing-check-up-patient_23-2149206230.jpg", imageAlt: "Dental implants procedure"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-teenage-girl-with-glasses-braces_169016-51974.jpg?_wi=1",
|
||||
imageAlt: "Orthodontics treatment",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-teenage-girl-with-glasses-braces_169016-51974.jpg", imageAlt: "Orthodontics treatment"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -134,61 +114,29 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Professional Cleaning",
|
||||
description: "Expert dental hygiene and professional cleaning for optimal oral health and fresh breath.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-treats-childs-tooth-using-rubber-dam-closeup-tooth-treatment_169016-66923.jpg?_wi=2",
|
||||
imageAlt: "Professional dental cleaning",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking",
|
||||
},
|
||||
title: "Professional Cleaning", description: "Expert dental hygiene and professional cleaning for optimal oral health and fresh breath.", imageSrc: "http://img.b2bpic.net/free-photo/dentist-treats-childs-tooth-using-rubber-dam-closeup-tooth-treatment_169016-66923.jpg", imageAlt: "Professional dental cleaning", buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking"},
|
||||
{
|
||||
title: "Teeth Whitening",
|
||||
description: "Advanced whitening treatments to brighten your smile and boost your confidence.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-sitting-chair-office_1303-21028.jpg?_wi=2",
|
||||
imageAlt: "Teeth whitening service",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking",
|
||||
},
|
||||
title: "Teeth Whitening", description: "Advanced whitening treatments to brighten your smile and boost your confidence.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-sitting-chair-office_1303-21028.jpg", imageAlt: "Teeth whitening service", buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking"},
|
||||
{
|
||||
title: "Dental Implants",
|
||||
description: "Modern implant solutions for replacing missing teeth with natural-looking, permanent results.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-doing-check-up-patient_23-2149206230.jpg?_wi=2",
|
||||
imageAlt: "Dental implants procedure",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking",
|
||||
},
|
||||
title: "Dental Implants", description: "Modern implant solutions for replacing missing teeth with natural-looking, permanent results.", imageSrc: "http://img.b2bpic.net/free-photo/dentist-doing-check-up-patient_23-2149206230.jpg", imageAlt: "Dental implants procedure", buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking"},
|
||||
{
|
||||
title: "Orthodontics",
|
||||
description: "Professional braces and alignment treatments to perfect your smile for all ages.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-teenage-girl-with-glasses-braces_169016-51974.jpg?_wi=2",
|
||||
imageAlt: "Orthodontics treatment",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking",
|
||||
},
|
||||
title: "Orthodontics", description: "Professional braces and alignment treatments to perfect your smile for all ages.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-teenage-girl-with-glasses-braces_169016-51974.jpg", imageAlt: "Orthodontics treatment", buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking"},
|
||||
{
|
||||
title: "Root Canal Treatment",
|
||||
description: "Expert endodontic treatment to save your tooth and eliminate pain and infection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-treats-childs-tooth-using-rubber-dam-closeup-tooth-treatment_169016-66923.jpg?_wi=3",
|
||||
imageAlt: "Root canal treatment",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking",
|
||||
},
|
||||
title: "Root Canal Treatment", description: "Expert endodontic treatment to save your tooth and eliminate pain and infection.", imageSrc: "http://img.b2bpic.net/free-photo/dentist-treats-childs-tooth-using-rubber-dam-closeup-tooth-treatment_169016-66923.jpg", imageAlt: "Root canal treatment", buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking"},
|
||||
{
|
||||
title: "Emergency Dental Care",
|
||||
description: "Prompt, professional emergency dental services available when you need us most.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dentist-examining-female-patient_107420-65393.jpg?_wi=2",
|
||||
imageAlt: "Emergency dental care",
|
||||
buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking",
|
||||
},
|
||||
title: "Emergency Dental Care", description: "Prompt, professional emergency dental services available when you need us most.", imageSrc: "http://img.b2bpic.net/free-photo/dentist-examining-female-patient_107420-65393.jpg", imageAlt: "Emergency dental care", buttonIcon: ArrowRight,
|
||||
buttonHref: "/booking"},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule Today",
|
||||
href: "/booking",
|
||||
},
|
||||
text: "Schedule Today", href: "/booking"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -198,24 +146,16 @@ export default function HomePage() {
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "About",
|
||||
},
|
||||
type: "text", content: "About"},
|
||||
{
|
||||
type: "text",
|
||||
content: "AJ Dental Clinic",
|
||||
},
|
||||
type: "text", content: "AJ Dental Clinic"},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Contact Us", href: "#contact"},
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "/booking",
|
||||
},
|
||||
text: "Book Now", href: "/booking"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -230,41 +170,17 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
handle: "@sarahj_smiles",
|
||||
testimonial: "AJ Dental Clinic provided exceptional care during my implant procedure. The staff was incredibly professional and compassionate. My new smile has transformed my confidence!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman_23-2149153863.jpg",
|
||||
imageAlt: "Sarah Johnson",
|
||||
},
|
||||
id: "1", name: "Sarah Johnson", handle: "@sarahj_smiles", testimonial: "AJ Dental Clinic provided exceptional care during my implant procedure. The staff was incredibly professional and compassionate. My new smile has transformed my confidence!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman_23-2149153863.jpg", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
handle: "@michaelc_dental",
|
||||
testimonial: "Been coming to AJ Dental for 5 years. The entire team is amazing, and they always make me feel comfortable. Highly recommend their teeth whitening service!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12663.jpg",
|
||||
imageAlt: "Michael Chen",
|
||||
},
|
||||
id: "2", name: "Michael Chen", handle: "@michaelc_dental", testimonial: "Been coming to AJ Dental for 5 years. The entire team is amazing, and they always make me feel comfortable. Highly recommend their teeth whitening service!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12663.jpg", imageAlt: "Michael Chen"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
handle: "@emilyrodriguez",
|
||||
testimonial: "My family loves Dr. AJ and the team. They're so patient with the kids and explain everything clearly. Best dental clinic in the area by far!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-doctor-smiling_1098-139.jpg",
|
||||
imageAlt: "Emily Rodriguez",
|
||||
},
|
||||
id: "3", name: "Emily Rodriguez", handle: "@emilyrodriguez", testimonial: "My family loves Dr. AJ and the team. They're so patient with the kids and explain everything clearly. Best dental clinic in the area by far!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-doctor-smiling_1098-139.jpg", imageAlt: "Emily Rodriguez"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
handle: "@davidkim_wellness",
|
||||
testimonial: "From my first visit to my emergency root canal, AJ Dental has been consistently excellent. Professional, caring, and reasonably priced. Five stars!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/headshot-beautiful-dark-skinned-female-with-happy-expression-has-afro-hairstyle-demonstrates-perfect-white-even-teeth-has-pleased-smile-stylish-young-african-american-woman-rests-indoor_273609-2384.jpg",
|
||||
imageAlt: "David Kim",
|
||||
},
|
||||
id: "4", name: "David Kim", handle: "@davidkim_wellness", testimonial: "From my first visit to my emergency root canal, AJ Dental has been consistently excellent. Professional, caring, and reasonably priced. Five stars!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/headshot-beautiful-dark-skinned-female-with-happy-expression-has-afro-hairstyle-demonstrates-perfect-white-even-teeth-has-pleased-smile-stylish-young-african-american-woman-rests-indoor_273609-2384.jpg", imageAlt: "David Kim"},
|
||||
]}
|
||||
showRating={true}
|
||||
textboxLayout="default"
|
||||
@@ -279,32 +195,21 @@ export default function HomePage() {
|
||||
description="Have questions or want to schedule an appointment? Contact us today. We're here to help and provide the best dental care for you."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Full Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Full Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email Address",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Your Email Address", required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone Number",
|
||||
required: true,
|
||||
name: "phone", type: "tel", placeholder: "Your Phone Number", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your dental needs or questions...",
|
||||
rows: 5,
|
||||
name: "message", placeholder: "Tell us about your dental needs or questions...", rows: 5,
|
||||
required: true,
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/computer-screen-showing-financial-information-office-workspace_53876-16526.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/computer-screen-showing-financial-information-office-workspace_53876-16526.jpg"
|
||||
imageAlt="AJ Dental Clinic contact information"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
|
||||
@@ -1,51 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fontFamily?: string;
|
||||
fill?: string;
|
||||
strokeWidth?: number;
|
||||
stroke?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
className = '',
|
||||
fontSize = 48,
|
||||
fontFamily = 'Arial, sans-serif',
|
||||
fill = 'currentColor',
|
||||
strokeWidth = 0,
|
||||
stroke = 'none',
|
||||
}) => {
|
||||
const textLength = text.length;
|
||||
const estimatedWidth = textLength * (fontSize * 0.6);
|
||||
const estimatedHeight = fontSize * 1.5;
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox={`0 0 ${estimatedWidth} ${estimatedHeight}`}
|
||||
className={className}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x="50%"
|
||||
y="50%"
|
||||
fontSize={fontSize}
|
||||
fontFamily={fontFamily}
|
||||
fill={fill}
|
||||
stroke={stroke}
|
||||
strokeWidth={strokeWidth}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user