diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 5d12634..0000000 --- a/.editorconfig +++ /dev/null @@ -1,13 +0,0 @@ -# editorconfig.org -root = true - -[*] -indent_style = space -indent_size = 2 -end_of_line = lf -charset = utf-8 -trim_trailing_whitespace = true -insert_final_newline = true - -[*.md] -trim_trailing_whitespace = false diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index bffb357..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "next/core-web-vitals" -} diff --git a/.gitignore b/.gitignore index 1437c53..f4f89e5 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,4 @@ yarn-error.log* # vercel .vercel +.env*.local diff --git a/.playwright-mcp/rates-cta-with-avatar.png b/.playwright-mcp/rates-cta-with-avatar.png new file mode 100644 index 0000000..97c6de6 Binary files /dev/null and b/.playwright-mcp/rates-cta-with-avatar.png differ diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..e83b6d1 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,118 @@ +# Project Guidelines + +## Tech Stack + +- **Framework:** Next.js 16 with React 19 +- **Language:** TypeScript 5 +- **Styling:** Tailwind CSS 4.1 with PostCSS +- **Fonts:** Instrument Serif (display), Inter (body) + +## Package Manager + +Always use **yarn** instead of npm for installing dependencies. + +```bash +# Correct +yarn add +yarn install + +# Incorrect +npm install +``` + +## Project Structure + +``` +/src + /app # Next.js app router pages + /components + /elements # Reusable UI components (button, link, wallpaper, etc.) + /sections # Page sections (hero, features, footer, navbar) + /icons # SVG icon components +/public/img # Images, logos, avatars +``` + +--- + +## Color System + +### Base Palette: "Mist" (OKLCH) + +The primary color scale used throughout the site: + +| Token | Light Mode Usage | Dark Mode Usage | +|-------|------------------|-----------------| +| `mist-50` | Page backgrounds | - | +| `mist-100` | Icon backgrounds, subtle fills | - | +| `mist-200` | Borders, dividers | - | +| `mist-300` | - | Button backgrounds, body text | +| `mist-400` | - | Secondary text | +| `mist-500` | Mid-tone accents | Mid-tone accents | +| `mist-600` | Body text, icons | - | +| `mist-700` | Secondary headings | - | +| `mist-800` | - | Icon backgrounds | +| `mist-900` | - | Card backgrounds | +| `mist-950` | Headings, button backgrounds | Page backgrounds | + +### Wallpaper Colors by Section + +Each therapy service has an assigned color for visual consistency. **These mappings must be maintained:** + +| Service/Page | Wallpaper | Light Gradient | Dark Gradient | +|--------------|-----------|----------------|---------------| +| **Home Hero** | `sunset` | `#c4956a` → `#d4917a` | `#4a3828` → `#4d2f2a` | +| **About** | `sunset` | `#c4956a` → `#d4917a` | `#4a3828` → `#4d2f2a` | +| **Services Overview** | `sunset` | `#c4956a` → `#d4917a` | `#4a3828` → `#4d2f2a` | +| **Relationships** | `sunset` | `#c4956a` → `#d4917a` | `#4a3828` → `#4d2f2a` | +| **Anxiety** | `protea` | `#b87d7d` → `#a66b6b` | `#4a2d2d` → `#3d2525` | +| **Depression** | `blue` | `#637c86` → `#778599` | `#243a42` → `#232f40` | +| **Substance Abuse** | `green` | `#9ca88f` → `#596352` | `#333a2b` → `#26361b` | + +### Reserved Wallpaper Colors (Available for Future Use) + +| Name | Light Gradient | Dark Gradient | +|------|----------------|---------------| +| `purple` | `#7b627d` → `#8f6976` | `#412c42` → `#3c1a26` | +| `brown` | `#8d7359` → `#765959` | `#382d23` → `#3d2323` | + +### Color Psychology + +- **Sunset (Orange/Peach):** Warm, welcoming, approachable - main brand identity and relationships +- **Blue (Cool Gray-Blue):** Calm, stable, professional - depression/emotional support +- **Green (Earthy):** Natural, growth, recovery - substance abuse recovery +- **Protea (Rose/Mauve):** Gentle, soothing - anxiety management + +--- + +## Component Guidelines + +### Wallpaper Usage + +```tsx +import { Wallpaper } from '@/components/elements/wallpaper' + +// Always use the assigned color for each service + // Home, About, Services, Relationships + // Anxiety + // Depression + // Substance Abuse +``` + +### Button Variants + +- `dark/light` (default): Primary CTA buttons +- `light`: Secondary buttons on dark backgrounds +- `soft`: Translucent style for subtle actions +- `plain`: Text-only buttons + +--- + +## Key Files + +| Purpose | File Path | +|---------|-----------| +| Theme & Colors | `src/app/globals.css` | +| Wallpaper System | `src/components/elements/wallpaper.tsx` | +| Button Styles | `src/components/elements/button.tsx` | +| Root Layout | `src/app/layout.tsx` | +| Theme Toggle | `src/components/elements/theme-toggle.tsx` | diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..482f68b --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,129 @@ +# Tailwind Plus License + +## Personal License + +Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates. + +The license grants permission to **one individual** (the Licensee) to access and use the Components and Templates. + +You **can**: + +- Use the Components and Templates to create unlimited End Products. +- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license. +- Use the Components and Templates to create unlimited End Products for unlimited Clients. +- Use the Components and Templates to create End Products where the End Product is sold to End Users. +- Use the Components and Templates to create End Products that are open source and freely available to End Users. + +You **cannot**: + +- Use the Components and Templates to create End Products that are designed to allow an End User to build their own End Products using the Components and Templates or derivatives of the Components and Templates. +- Re-distribute the Components and Templates or derivatives of the Components and Templates separately from an End Product, neither in code or as design assets. +- Share your access to the Components and Templates with any other individuals. +- Use the Components and Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc. + +### Example usage + +Examples of usage **allowed** by the license: + +- Creating a personal website by yourself. +- Creating a website or web application for a client that will be owned by that client. +- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application. +- Creating a commercial self-hosted web application that is sold to end users for a one-time fee. +- Creating a web application where the primary purpose is clearly not to simply re-distribute the components (like a conference organization app that uses the components for its UI for example) that is free and open source, where the source code is publicly available. + +Examples of usage **not allowed** by the license: + +- Creating a repository of your favorite Tailwind Plus components or templates (or derivatives based on Tailwind Plus components or templates) and publishing it publicly. +- Creating a React or Vue version of Tailwind Plus and making it available either for sale or for free. +- Create a Figma or Sketch UI kit based on the Tailwind Plus component designs. +- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind Plus. +- Creating a theme, template, or project starter kit using the components or templates and making it available either for sale or for free. +- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free. + +In simple terms, use Tailwind Plus for anything you like as long as it doesn't compete with Tailwind Plus. + +### Personal License Definitions + +Licensee is the individual who has purchased a Personal License. + +Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind Plus license. + +End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates. + +End User is a user of an End Product. + +Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document. + +## Team License + +Tailwind Labs Inc. grants you an on-going, non-exclusive license to use the Components and Templates. + +The license grants permission for **up to 25 Employees and Contractors of the Licensee** to access and use the Components and Templates. + +You **can**: + +- Use the Components and Templates to create unlimited End Products. +- Modify the Components and Templates to create derivative components and templates. Those components and templates are subject to this license. +- Use the Components and Templates to create unlimited End Products for unlimited Clients. +- Use the Components and Templates to create End Products where the End Product is sold to End Users. +- Use the Components and Templates to create End Products that are open source and freely available to End Users. + +You **cannot**: + +- Use the Components or Templates to create End Products that are designed to allow an End User to build their own End Products using the Components or Templates or derivatives of the Components or Templates. +- Re-distribute the Components or Templates or derivatives of the Components or Templates separately from an End Product. +- Use the Components or Templates to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee. +- Use the Components or Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc. + +### Example usage + +Examples of usage **allowed** by the license: + +- Creating a website for your company. +- Creating a website or web application for a client that will be owned by that client. +- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application. +- Creating a commercial self-hosted web application that is sold to end users for a one-time fee. +- Creating a web application where the primary purpose is clearly not to simply re-distribute the components or templates (like a conference organization app that uses the components or a template for its UI for example) that is free and open source, where the source code is publicly available. + +Examples of use **not allowed** by the license: + +- Creating a repository of your favorite Tailwind Plus components or template (or derivatives based on Tailwind Plus components or templates) and publishing it publicly. +- Creating a React or Vue version of Tailwind Plus and making it available either for sale or for free. +- Creating a "website builder" project where end users can build their own websites using components or templates included with or derived from Tailwind Plus. +- Creating a theme or template using the components or templates and making it available either for sale or for free. +- Creating an admin panel tool (like [Laravel Nova](https://nova.laravel.com/) or [ActiveAdmin](https://activeadmin.info/)) that is made available either for sale or for free. +- Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tailwind Plus license to build their own websites or side projects. + +### Team License Definitions + +Licensee is the business entity who has purchased a Team License. + +Components and Templates are the source code and design assets made available to the Licensee after purchasing a Tailwind Plus license. + +End Product is any artifact produced that incorporates the Components or Templates or derivatives of the Components or Templates. + +End User is a user of an End Product. + +Employee is a full-time or part-time employee of the Licensee. + +Contractor is an individual or business entity contracted to perform services for the Licensee. + +Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity. Customers of software-as-a-service products are not considered clients for the purpose of this document. + +## Enforcement + +If you are found to be in violation of the license, access to your Tailwind Plus account will be terminated, and a refund may be issued at our discretion. When license violation is blatant and malicious (such as intentionally redistributing the Components or Templates through private warez channels), no refund will be issued. + +The copyright of the Components and Templates is owned by Tailwind Labs Inc. You are granted only the permissions described in this license; all other rights are reserved. Tailwind Labs Inc. reserves the right to pursue legal remedies for any unauthorized use of the Components or Templates outside the scope of this license. + +## Liability + +Tailwind Labs Inc.’s liability to you for costs, damages, or other losses arising from your use of the Components or Templates — including third-party claims against you — is limited to a refund of your license fee. Tailwind Labs Inc. may not be held liable for any consequential damages related to your use of the Components or Templates. + +This Agreement is governed by the laws of the Province of Ontario and the applicable laws of Canada. Legal proceedings related to this Agreement may only be brought in the courts of Ontario. You agree to service of process at the e-mail address on your original order. + +## Questions? + +Unsure which license you need, or unsure if your use case is covered by our licenses? + +Email us at [support@tailwindcss.com](mailto:support@tailwindcss.com) with your questions. diff --git a/README.md b/README.md deleted file mode 100644 index 90dc910..0000000 --- a/README.md +++ /dev/null @@ -1,20 +0,0 @@ -## Storyblok Next.js Multi-language Blog - -This is the example repository for building a multi-language blog with Storyblok. - -Follow our [The Complete Guide to Build a Full Blown Multilanguage Website with Next.js](https://www.storyblok.com/tp/next-js-react-guide) tutorial to set it up - -1. Clone the example space with this link: -2. Enter your preview token in the `util/storyblok.js` file -3. Install dependencies and start the development server `npm install && npm run dev` -4. Add your [http://localhost:3000](http://localhost:3000) as the **default location URL** in your Storyblok space settings - - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Add a headless CMS to Next.js in 5 minutes](https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes) - Tutorial to get started with Next.js & Storyblok -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - diff --git a/assets/images/logo-block.svg b/assets/images/logo-block.svg deleted file mode 100644 index ef2de7e..0000000 --- a/assets/images/logo-block.svg +++ /dev/null @@ -1,177 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/components/BlogPost.js b/components/BlogPost.js deleted file mode 100644 index 6b4ebcb..0000000 --- a/components/BlogPost.js +++ /dev/null @@ -1,28 +0,0 @@ -import React, { useState } from "react"; -import SbEditable from "storyblok-react"; -import { render } from "storyblok-rich-text-react-renderer"; -import Image from "next/image"; - -const BlogPost = ({ blok }) => { - return ( - -
-

- {blok.title} -

- -
- {blok.image.alt} -
-
{render(blok.long_text)}
-
- - ); -}; - -export default BlogPost; diff --git a/components/CallToAction.js b/components/CallToAction.js deleted file mode 100644 index b5a7733..0000000 --- a/components/CallToAction.js +++ /dev/null @@ -1,31 +0,0 @@ -/* This example requires Tailwind CSS v2.0+ */ -import React from "react"; -import SbEditable from "storyblok-react"; -import { render } from "storyblok-rich-text-react-renderer"; -import Link from "next/link"; - -export default function CallToAction({ blok }) { - return ( - -
-
-
-

- {blok.title} -

-
{render(blok.description)}
-
- -
-
- - ); -} diff --git a/components/ContactForm.js b/components/ContactForm.js deleted file mode 100644 index 1b177bc..0000000 --- a/components/ContactForm.js +++ /dev/null @@ -1,377 +0,0 @@ -import React, { useState } from "react"; -import SbEditable from "storyblok-react"; -import { render } from "storyblok-rich-text-react-renderer"; -import { MailIcon, PhoneIcon } from "@heroicons/react/outline"; -import { useRouter } from "next/router"; -import { useFormspark } from "@formspark/use-formspark"; - -const FORMSPARK_FORM_ID = "d9x4tlQD"; - -function transactionID() { - return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) { - var r = (Math.random() * 16) | 0, - v = c == "x" ? r : (r & 0x3) | 0x8; - return v.toString(16); - }); -} - -export default function ContactForm({ blok }) { - const router = useRouter(); - const { locale } = router; - const initialValues = { - firstname: "", - lastname: "", - email: "", - phone: "", - message: "", - language: locale, - }; - - const trans = { - contact: { - en: "Contact Information", - af: "Kontakbesonderhede", - }, - submit: { - en: "Submit", - af: "Stuur", - }, - name: { - en: "First name", - af: "Naame", - }, - surname: { - en: "Last name", - af: "Van", - }, - email: { - en: "Email", - af: "E-pos", - }, - cellphone: { - en: "Cellphone", - af: "Selfoon", - }, - message: { - en: "Message", - af: "Boodskap", - }, - max: { - en: "Max. 500 characters", - af: "Maximum 500 letters", - }, - }; - - const [submit, submitting] = useFormspark({ - formId: FORMSPARK_FORM_ID, - }); - - const [values, setValues] = useState(initialValues); - - const handleInputChange = (e) => { - const { name, value } = e.target; - setValues({ - ...values, - [name]: value, - }); - }; - - const onSubmit = async (e) => { - e.preventDefault(); - values.language = locale; - await submit({ ...values }); - router.push(`/${locale}/thank-you?transaction_id=${transactionID()}`); - }; - - return ( - -
-
-
-

Contact us

- -
- {/* Contact information */} -
- - - -

- {trans.contact[locale]} -

-
- {render(blok.description)} -
- -
- {render(blok.address)} -
-
-
- Phone number -
- {/*
-
*/} -
- Email -
-
-
-
-
- {render(blok.additional_info)} -
-
- - {/* Contact form */} -
-

- {blok.title} -

-
- -
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
-
- -
-
- -
-
- - - {trans.max[locale]} - -
-
-