Astra Dental Template

cd astra-template
npm install
npm run dev
# Open http://localhost:3000

astra-template/
├── app/
│   ├── globals.css                 # Theme colors & global styles
│   ├── layout.tsx                  # Root layout
│   ├── not-found.tsx              # 404 page
│   └── (marketing)/               # Route group
│       ├── layout.tsx             # Marketing layout
│       ├── page.tsx               # Homepage
│       ├── about/page.tsx
│       ├── appointment/page.tsx
│       ├── blog/
│       │   ├── page.tsx           # Blog listing
│       │   └── [slug]/page.tsx    # Blog post
│       ├── case-studies/
│       │   ├── page.tsx           # Case studies listing
│       │   └── [slug]/page.tsx    # Case study detail
│       ├── contact/page.tsx
│       ├── faq/page.tsx
│       ├── pricing/page.tsx
│       ├── services/
│       │   ├── page.tsx           # Services listing
│       │   └── [slug]/page.tsx    # Service detail
│       ├── team/page.tsx
│       └── testimonials/page.tsx
├── components/
│   ├── forms/
│   │   ├── BookingForm.tsx
│   │   ├── ContactForm.tsx
│   │   └── NewsletterForm.tsx
│   ├── layout/
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   ├── sections/
│   │   ├── home/                  # Homepage sections
│   │   │   ├── Hero.tsx
│   │   │   ├── Services.tsx
│   │   │   ├── About.tsx
│   │   │   ├── BeforeAfter.tsx
│   │   │   ├── Testimonials.tsx
│   │   │   ├── Team.tsx
│   │   │   ├── Pricing.tsx
│   │   │   ├── Blog.tsx
│   │   │   ├── FAQ.tsx
│   │   │   ├── Booking.tsx
│   │   │   ├── CTA.tsx
│   │   │   └── Banner.tsx
│   │   ├── about/
│   │   ├── blog/
│   │   ├── case-studies/
│   │   ├── contact/
│   │   ├── faq/
│   │   ├── services/
│   │   ├── team/
│   │   └── testimonials/
│   ├── shared/
│   │   ├── PageHero.tsx
│   │   ├── PageTransition.tsx
│   │   ├── Breadcrumbs.tsx
│   │   ├── BlogCard.tsx
│   │   ├── ServiceCard.tsx
│   │   ├── CaseStudyCard.tsx
│   │   ├── TeamMemberCard.tsx
│   │   ├── TestimonialCard.tsx
│   │   ├── PricingCard.tsx
│   │   ├── CTACard.tsx
│   │   ├── ValueCard.tsx
│   │   ├── VideoCard.tsx
│   │   ├── Logo.tsx
│   │   ├── SocialLinks.tsx
│   │   └── TrustLogos.tsx
│   └── ui/
│       ├── Accordion.tsx
│       ├── Button.tsx
│       ├── Icon.tsx
│       ├── Input.tsx
│       ├── Select.tsx
│       └── Textarea.tsx
├── config/
│   ├── site.config.ts             # Business info
│   ├── navigation.config.ts       # Menu structure
│   └── seo.config.ts              # SEO defaults
├── content/
│   ├── blog/                      # MDX blog posts
│   │   ├── benefits-of-dental-implants.mdx
│   │   ├── child-first-dentist-visit.mdx
│   │   ├── invisalign-vs-braces.mdx
│   │   ├── oral-health-overall-wellness.mdx
│   │   ├── overcome-dental-anxiety.mdx
│   │   ├── teeth-whitening-guide.mdx
│   │   └── tips-for-healthy-teeth.mdx
│   ├── case-studies/              # MDX case studies
│   │   ├── overcoming-anxiety.mdx
│   │   ├── restoring-confidence.mdx
│   │   ├── smile-makeover.mdx
│   │   └── transforming-smiles.mdx
│   ├── services/                  # MDX services
│   │   ├── cosmetic-dentistry.mdx
│   │   ├── dental-implants.mdx
│   │   ├── emergency-dental.mdx
│   │   ├── orthodontics.mdx
│   │   ├── preventive-care.mdx
│   │   └── teeth-whitening.mdx
│   ├── team.ts                    # Team members
│   ├── testimonials.ts            # Reviews
│   ├── pricing.ts                 # Pricing plans
│   ├── faq.ts                     # FAQ items
│   ├── values.ts                  # Company values
│   ├── benefits.ts                # Service benefits
│   ├── contact.ts                 # Contact info
│   └── partners.ts                # Trust logos
├── lib/
│   ├── mdx.ts                     # MDX utilities
│   ├── mdx-components.tsx         # Custom MDX components
│   ├── utils.ts                   # Helper functions
│   └── types/index.ts             # TypeScript types
└── public/
    └── images/

export const siteConfig = {
  name: "Astra Dental",
  description: "Professional dental care for the whole family",
  url: "https://yourdomain.com",
  
  // Contact
  phone: "(555) 123-4567",
  email: "info@astradental.com",
  address: "123 Dental Way, Suite 100, City, State 12345",
  
  // Business hours
  hours: {
    weekdays: "8:00 AM - 6:00 PM",
    saturday: "9:00 AM - 2:00 PM",
    sunday: "Closed",
  },
  
  // Social links
  social: {
    facebook: "https://facebook.com/astradental",
    instagram: "https://instagram.com/astradental",
    twitter: "https://twitter.com/astradental",
    linkedin: "https://linkedin.com/company/astradental",
  },
};

export const navigationConfig = {
  mainNav: [
    { label: "Home", href: "/" },
    { label: "Services", href: "/services" },
    { label: "About", href: "/about" },
    { label: "Team", href: "/team" },
    { label: "Blog", href: "/blog" },
    { label: "Contact", href: "/contact" },
  ],
  ctaButton: {
    label: "Book Appointment",
    href: "/appointment",
  },
};

---
title: "5 Tips for Healthy Teeth"
slug: "tips-for-healthy-teeth"
excerpt: "Simple daily habits for a healthier smile."
date: "2024-01-15"
author: "Dr. Jane Smith"
image: "/images/blog/healthy-teeth.jpg"
tags: ["dental care", "tips", "oral health"]
readTime: "5 min read"
---
 
Your blog content here...

---
title: "Teeth Whitening"
slug: "teeth-whitening"
excerpt: "Professional whitening for a brighter smile."
icon: "Sparkle"
image: "/images/services/whitening.jpg"
price: "From $299"
duration: "1-2 hours"
featured: true
order: 1
---
 
Service description and details...

---
title: "Complete Smile Makeover"
slug: "smile-makeover"
excerpt: "Transforming Sarah's confidence with veneers."
patient: "Sarah M."
age: "34"
treatment: "Veneers & Whitening"
duration: "3 months"
beforeImage: "/images/cases/sarah-before.jpg"
afterImage: "/images/cases/sarah-after.jpg"
featured: true
---
 
Case study details...

export interface TeamMember {
  id: string;
  name: string;
  role: string;
  bio: string;
  image: string;
  specialties?: string[];
  education?: string[];
  social?: {
    linkedin?: string;
    twitter?: string;
  };
}
 
export const team: TeamMember[] = [
  {
    id: "dr-jane-smith",
    name: "Dr. Jane Smith",
    role: "Lead Dentist & Founder",
    bio: "Dr. Smith has over 20 years of experience...",
    image: "/images/team/jane-smith.jpg",
    specialties: ["Cosmetic Dentistry", "Implants"],
    education: ["DDS, UCLA", "Cosmetic Certification"],
  },
];

export interface Testimonial {
  id: string;
  name: string;
  content: string;
  rating: number;
  treatment?: string;
  image?: string;
}
 
export const testimonials: Testimonial[] = [
  {
    id: "1",
    name: "John D.",
    content: "Amazing experience! The team was so professional...",
    rating: 5,
    treatment: "Dental Implants",
  },
];

export interface PricingPlan {
  id: string;
  name: string;
  description: string;
  price: string;
  features: string[];
  highlighted?: boolean;
  cta?: string;
}
 
export const pricing: PricingPlan[] = [
  {
    id: "cleaning",
    name: "Basic Cleaning",
    description: "Regular dental checkup",
    price: "$99",
    features: ["Exam", "Cleaning", "X-rays"],
  },
];

export interface FAQ {
  id: string;
  question: string;
  answer: string;
  category?: string;
}
 
export const faq: FAQ[] = [
  {
    id: "insurance",
    question: "Do you accept insurance?",
    answer: "Yes, we accept most major dental plans...",
    category: "Insurance",
  },
];

import { BookingForm, ContactForm, NewsletterForm } from "@/components/forms";
 
<BookingForm />
<ContactForm />
<NewsletterForm />

import { Button, Input, Select, Textarea, Accordion, Icon } from "@/components/ui";
 
// Buttons
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
 
// Icons (Phosphor)
<Icon name="Tooth" size={24} />
<Icon name="Phone" />
<Icon name="Calendar" />

import {
  PageHero,
  PageTransition,
  Breadcrumbs,
  BlogCard,
  ServiceCard,
  TeamMemberCard,
  TestimonialCard,
  PricingCard,
  CaseStudyCard,
} from "@/components/shared";

import { PageTransition } from "@/components/shared";
 
export default function Page() {
  return (
    <PageTransition>
      <YourPageContent />
    </PageTransition>
  );
}

import { Icon } from "@/components/ui";
 
// Usage
<Icon name="Tooth" />
<Icon name="Phone" />
<Icon name="MapPin" />
<Icon name="Calendar" />
<Icon name="Star" />
<Icon name="Heart" />

:root {
  /* Primary brand color */
  --primary: #0ea5e9;
  --primary-dark: #0284c7;
  
  /* Secondary accent */
  --secondary: #8b5cf6;
  
  /* Backgrounds */
  --background: #ffffff;
  --background-secondary: #f8fafc;
  
  /* Text */
  --foreground: #0f172a;
  --foreground-muted: #64748b;
  
  /* Functional */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
}

npm run build
npm start