Dr. Vasiliki Gkika - Psychologist Website

A professional website for Dr. Vasiliki Gkika, a clinical psychologist, built with Next.js, React, TypeScript, and SCSS.

Features

• Responsive Design: Mobile-first approach with beautiful layouts for all devices
• Professional Styling: Clean, calming design appropriate for a mental health professional
• Modern Tech Stack: Built with Next.js 14, React 18, TypeScript, and SCSS
• SEO Optimized: Proper meta tags and semantic HTML structure
• Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation

Pages

• Home: Hero section, about preview, services overview, testimonials, and call-to-action
• About: Detailed information about Dr. Gkika, credentials, and therapeutic approach
• Services: Comprehensive list of therapeutic services, process, and pricing
• Contact: Contact form, office information, and location details

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser

Build for Production

npm run build
npm start

Project Structure

├── app/                    # Next.js app directory
│   ├── globals.scss       # Global styles and variables
│   ├── layout.tsx         # Root layout component
│   ├── page.tsx           # Homepage
│   ├── about/             # About page
│   ├── services/          # Services page
│   └── contact/           # Contact page
├── components/            # React components
│   ├── Header.tsx         # Navigation header
│   ├── Footer.tsx         # Site footer
│   ├── Hero.tsx           # Homepage hero section
│   ├── AboutPreview.tsx   # About section for homepage
│   ├── ServicesPreview.tsx # Services section for homepage
│   ├── Testimonials.tsx   # Client testimonials
│   ├── CTA.tsx            # Call-to-action section
│   └── [Page Components]  # Individual page components
└── public/                # Static assets

Customization

Colors

The color scheme can be customized in app/globals.scss:

$primary-color: #2c5aa0; // Main brand color
$secondary-color: #4a90a4; // Secondary color
$accent-color: #7bb3d3; // Accent color

Content

• Update personal information in components
• Replace placeholder images with actual photos
• Modify service offerings and pricing
• Update contact information

Technologies Used

• Next.js 14: React framework with App Router
• React 18: UI library
• TypeScript: Type safety
• SCSS: Enhanced CSS with variables and nesting
• Responsive Design: Mobile-first approach

License

This project is for Dr. Vasiliki Gkika's professional use.