diff --git a/.github/instructions/css.instructions.md b/.github/instructions/css.instructions.md index 8ac301448..6ea09ecfb 100644 --- a/.github/instructions/css.instructions.md +++ b/.github/instructions/css.instructions.md @@ -10,6 +10,10 @@ applyTo: "**/*.css" - Avoid long selector chains; if you need more specificity, add a single component class rather than stacking selectors. - Avoid `!important` except in vendor CSS and print rules. +- Do not use Tailwind `dark:` variant classes for dark-mode theming. This project uses a custom theme system and CSS variables; use the project's theme tokens and helper classes instead of Tailwind `dark:` utilities. + +- Do not use Tailwind `dark:` variant classes for dark-mode theming. This project uses a custom theme system and CSS variables; use the project's theme tokens and helper classes instead of Tailwind `dark:` utilities. + # Z-index tokens - Do not hard-code numeric `z-index` values. diff --git a/.github/instructions/theme-colors.instructions.md b/.github/instructions/theme-colors.instructions.md index 4982e8902..f63e832fd 100644 --- a/.github/instructions/theme-colors.instructions.md +++ b/.github/instructions/theme-colors.instructions.md @@ -17,6 +17,8 @@ The source of truth for **all** colors in this repo is: - gradient tokens: `from-*`, `via-*`, `to-*` - When using CSS variables, only reference `var(--color-...)` tokens that are defined in `src/styles/theme-inline.css`. +- Do not use Tailwind `dark:` variant classes to implement dark mode. The project uses a custom theme system that relies on CSS variables defined in `src/styles/theme-inline.css`; apply those tokens and the project's theme helpers instead of Tailwind `dark:` utilities. + ## Permission required - If a future change requires a new color token (a new `--color-*` or a new Tailwind color utility name that would require adding a token), **stop and ask for explicit permission before adding it**. diff --git a/_TODO.md b/_TODO.md index 024219af4..1237a3ebf 100644 --- a/_TODO.md +++ b/_TODO.md @@ -321,3 +321,13 @@ We can add a path like `/articles/pdf` or `/articles/deep-dive` for the long-for - Social shares - module CSS doesn't appear correct with nested button hover classes, not sure how network name is generated or styled but it needs improvement. Should be rendered inside article content column, not across both content and TOC columns. - Add a Social Share on some compelling text in each article + +- Move the "What I Deliver" box from the Hero into the Backstage image. Move the Backstage image / video to the hero. + +## Instructions for revamps + +All changes should look good on both light and dark theme, use our tailwind theme colors, and look good on mobile. + +"Condensed" or "Intro" + +Cursor on hovering a link diff --git a/src/actions/contact/domain.ts b/src/actions/contact/domain.ts index 8f3d036d0..a85feba24 100644 --- a/src/actions/contact/domain.ts +++ b/src/actions/contact/domain.ts @@ -47,7 +47,10 @@ export const contactFormInputSchema = z company: optionalTrimmedString(100), phone: optionalTrimmedString(50), project_type: optionalTrimmedString(50), - budget: z.preprocess(trimString, z.enum(['5k-10k', '10k-25k', '25k-50k', '50k+'])), + budget: z.preprocess( + value => emptyStringToUndefined(trimString(value)), + z.enum(['5k-10k', '10k-25k', '25k-50k', '50k+']).optional() + ), timeline: contactTimelineSchema, /** Consent checkbox: value="true" when checked, otherwise missing. */ diff --git a/src/assets/images/site/video-1.jpg b/src/assets/images/site/video-1.jpg new file mode 100644 index 000000000..5c6dd6c30 Binary files /dev/null and b/src/assets/images/site/video-1.jpg differ diff --git a/src/assets/images/site/video-2.jpg b/src/assets/images/site/video-2.jpg new file mode 100644 index 000000000..8ca6d306e Binary files /dev/null and b/src/assets/images/site/video-2.jpg differ diff --git a/src/components/Button/server/index.ts b/src/components/Button/server/index.ts index 7f7b7f20b..2dfe7560e 100644 --- a/src/components/Button/server/index.ts +++ b/src/components/Button/server/index.ts @@ -58,7 +58,7 @@ const baseButtonClasses = const sizeClasses: Record = { small: - 'text-xs leading-4 py-1.5 px-3 sm:py-2 sm:px-4', + 'text-xs leading-4 py-1 px-2', medium: 'text-xs leading-4 py-1.5 px-4 sm:py-3 sm:px-6 lg:px-5', large: @@ -102,10 +102,10 @@ const variantClasses: Record = { 'focus-visible:bg-transparent ' + 'focus-visible:text-x', warning: - 'bg-warning-offset text-white ' + - 'hover:bg-warning ' + - 'focus-visible:bg-warning ' + - 'active:bg-warning', + 'bg-warning text-white ' + + 'hover:bg-warning-offset ' + + 'focus-visible:bg-warning-offset ' + + 'active:bg-warning-offset', } export interface ButtonClassOptions { diff --git a/src/components/CallToAction/Contact/index.astro b/src/components/CallToAction/Contact/index.astro index 04f9acd2a..7566c1dd4 100644 --- a/src/components/CallToAction/Contact/index.astro +++ b/src/components/CallToAction/Contact/index.astro @@ -37,68 +37,57 @@ export interface Props { } const { - id = 'contact-cta', + id, title = 'Ready to Start Your Project?', description = "Let's discuss your goals and create something amazing together.", primaryLink = { href: '/contact', text: 'Get In Touch' }, secondaryLink = { href: '/services', text: 'View Services' }, } = Astro.props -const titleId = `${id}-title` -const descriptionId = `${id}-description` +const idBase = id ?? 'contact-cta' +const titleId = `${idBase}-title` +const descriptionId = `${idBase}-description` ---
- -
-
-
-
-
-
- -
-
-
+
+ {/* Text panel */} +
+

{title}

{description}

+
-
+ {/* Action panel */} +
+
- {primaryLink.text} - + {primaryLink.text} + { secondaryLink && ( {secondaryLink.text} diff --git a/src/components/CallToAction/Newsletter/layouts/home.astro b/src/components/CallToAction/Newsletter/layouts/home.astro index eea02cdaa..d930e1357 100644 --- a/src/components/CallToAction/Newsletter/layouts/home.astro +++ b/src/components/CallToAction/Newsletter/layouts/home.astro @@ -1,8 +1,10 @@ --- +import { Image } from 'astro:assets' import GDPRConsent from '@components/Consent/Checkbox/index.astro' import Confetti from '@components/Animations/Confetti/index.astro' import Icon from '@components/Icon/index.astro' import type { NewsletterProps } from '@components/CallToAction/Newsletter/client/@types' +import newsletterSignupImage from '@assets/images/newsletter-signup.jpg' export type Props = Omit @@ -14,7 +16,7 @@ const { } = Astro.props --- -
+
{/** SVG inlined, provides background pattern for component */} @@ -40,22 +42,13 @@ const {
-