From 8d0450011a3de6fe80a9f0cf98f5a64b0ffd6d1f Mon Sep 17 00:00:00 2001 From: Vojtech Mares Date: Tue, 10 Jan 2023 10:07:24 +0100 Subject: [PATCH] feat: change color palette from blue to amber and reduce number of font sizes - color change blue theme -> amber theme - text color changes: grays to black & few grays - font changes: less sizes (small -> normal) --- components/Button.tsx | 32 ++++++++++++++++++-------------- components/CallToAction.tsx | 4 ++-- components/Environment.tsx | 8 ++++---- components/Faqs.tsx | 4 ++-- components/Footer.tsx | 8 ++++---- components/Header.tsx | 2 +- components/Hero.tsx | 8 ++++---- components/NavLink.tsx | 2 +- components/Pricing.tsx | 10 +++++----- components/PrimaryFeatures.tsx | 10 +++++----- components/TechStack.tsx | 10 +++++----- components/Testimonials.tsx | 8 ++++---- components/Training.tsx | 26 +++++++++++++------------- components/TrainingListGrid.tsx | 11 ++++------- 14 files changed, 72 insertions(+), 71 deletions(-) diff --git a/components/Button.tsx b/components/Button.tsx index 1b46fe6..3288369 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -11,33 +11,33 @@ const baseStyles = { const variantStyles = { solid: { - slate: - "bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900", - blue: "bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600", + black: + "bg-black text-white hover:bg-slate-700 active:bg-slate-800 focus-visible:outline-slate-900", + amber: + "bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-800 focus-visible:outline-amber-500", white: - "bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white", + "bg-white text-black hover:bg-amber-50 active:bg-amber-200 focus-visible:outline-white", }, outline: { - slate: - "ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300", + black: + "ring-slate-200 text-black hover:ring-slate-300 active:bg-slate-100 focus-visible:outline-amber-500 focus-visible:ring-slate-300", white: - "ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white", - // Supress TypeScript error - blue: "", // TODO: fix properly + "ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 focus-visible:outline-white", + amber: "", // Outline buttons cannot be amber }, }; const transitionStyle = "transition duration-150 ease-in-out"; const sizeStyles = { - default: "px-4 py-2 text-sm", + medium: "px-4 py-2 text-sm", large: "px-8 py-4 text-base", }; type Props = { variant?: "solid" | "outline"; - color?: "slate" | "white" | "blue"; - size?: "default" | "large"; + color?: "black" | "white" | "amber"; + size?: "medium" | "large"; className?: string; href?: string; children?: ReactNode; @@ -45,12 +45,16 @@ type Props = { export function Button({ variant = "solid", - color = "slate", - size = "default", + color = "black", + size = "medium", className, href, children, }: Props) { + if (variant === "outline" && color === "amber") { + throw new Error("Outline buttons cannot be amber"); + } + className = clsx( baseStyles[variant], variantStyles[variant][color], diff --git a/components/CallToAction.tsx b/components/CallToAction.tsx index 8821935..9129a11 100644 --- a/components/CallToAction.tsx +++ b/components/CallToAction.tsx @@ -5,14 +5,14 @@ export function CallToAction() { return (

Posuňte svoji aplikaci už dnes

-

+

Je na čase pozvednout vaši infrastrukturu na dnešní standardy. Vaše infrastruktura by měla nabídnout Vaši aplikaci světu, ne ji držet zpátky. diff --git a/components/Environment.tsx b/components/Environment.tsx index 5b3fcc3..cb8f1f7 100644 --- a/components/Environment.tsx +++ b/components/Environment.tsx @@ -106,11 +106,11 @@ function Feature({ feature, className, ...props }: FeatureProps) { color={feature.iconColor} alt="" /> -

{feature.name}

-

+

{feature.name}

+

{feature.summary}

-

{feature.description}

+

{feature.description}

); } @@ -150,7 +150,7 @@ export function Environment() { >
-

+

Jakákoliv platforma, kdekoliv

diff --git a/components/Faqs.tsx b/components/Faqs.tsx index 6d7faf7..b73ec94 100644 --- a/components/Faqs.tsx +++ b/components/Faqs.tsx @@ -76,7 +76,7 @@ export function Faqs() {

Frequently asked questions

@@ -94,7 +94,7 @@ export function Faqs() {
    {column.map((faq, faqIndex) => (
  • -

    +

    {faq.question}

    {faq.answer}

    diff --git a/components/Footer.tsx b/components/Footer.tsx index 7ca1702..324365c 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -120,7 +120,7 @@ export function Footer() { // viewBox="0 0 24 24" // xmlns="http://www.w3.org/2000/svg" aria-hidden="true" - className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700" + className="h-6 w-6 fill-black group-hover:fill-slate-700" > @@ -133,7 +133,7 @@ export function Footer() { > @@ -146,13 +146,13 @@ export function Footer() { >
-

+

Copyright © {new Date().getFullYear()} Vojtěch Mareš. Všechna práva vyhrazena.

diff --git a/components/Header.tsx b/components/Header.tsx index ab5df79..5ee30ff 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -22,7 +22,7 @@ export function Header() {
-
{/* mt-36 lg:mt-44 */} -

+

Moji spokojení klienti, přidejte se k nim i Vy.

    {children} diff --git a/components/Pricing.tsx b/components/Pricing.tsx index f91a7f9..00d50b9 100644 --- a/components/Pricing.tsx +++ b/components/Pricing.tsx @@ -43,8 +43,8 @@ function Plan({
    @@ -55,7 +55,7 @@ function Plan({

    {description} @@ -78,13 +78,13 @@ export function Pricing() {

    - + Co pro Vás, {" "} můžu udělat. diff --git a/components/PrimaryFeatures.tsx b/components/PrimaryFeatures.tsx index 50c98ca..9449912 100644 --- a/components/PrimaryFeatures.tsx +++ b/components/PrimaryFeatures.tsx @@ -30,14 +30,14 @@ export function PrimaryFeatures() {

    Z nuly do cloudu.

    -

    +

    Vše co budete potřebovat, od začátku až do cíle.

    @@ -62,15 +62,15 @@ export function PrimaryFeatures() { ) : null}
    ); } @@ -213,7 +213,7 @@ export function TechStack() { >
    -

    +

    Open Source DevOps stack

    diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx index 962cd69..33de162 100644 --- a/components/Testimonials.tsx +++ b/components/Testimonials.tsx @@ -45,7 +45,7 @@ export function Testimonials() { >

    -

    +

    Napsali o mně

    @@ -64,16 +64,16 @@ export function Testimonials() {

    -

    +

    {testimonial.content}

    -
    +
    {testimonial.author.name}
    -
    +
    {testimonial.author.role}
    diff --git a/components/Training.tsx b/components/Training.tsx index f617c3a..194b01d 100644 --- a/components/Training.tsx +++ b/components/Training.tsx @@ -17,7 +17,7 @@ export const Training = ({ training }: Props) => { return ( <>
    -
    +
    { className="h-5 w-5 text-blue-400" >
    -

    +

    Toto školení je{" "} - + dvoudenní.

    @@ -73,25 +73,25 @@ export const Training = ({ training }: Props) => { )}
    -

    +

    Cena za školení

    -
    -
    +
    +
    -
    +
    Veřejný termín
    -
    +
    {formatter.format(training.priceOpen)} bez DPH
    -
    +
    Firemní školení
    -
    +
    {formatter.format(training.priceCompany)} bez DPH
    @@ -101,7 +101,7 @@ export const Training = ({ training }: Props) => {

    {training.description.split(" ").splice(0, 40).join(" ") + "..."}

    @@ -117,7 +114,7 @@ export const TrainingListGrid = ({ trainingList }: TrainingListProps) => {