vojtech.mares/backup-websites-2024-01
Archived
1
0
Fork 0
Code Activity

feat: change color palette from blue to amber and reduce number of font sizes

Browse source 
- color change blue theme -> amber theme
- text color changes: grays to black & few grays
- font changes: less sizes (small -> normal)
This commit is contained in:
Vojtěch Mareš 2023-01-10 10:07:24 +01:00
parent 5f2c7d313b
commit 8d0450011a
14 changed files with 72 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

32
components/Button.tsx
View file

@ -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],

4
components/CallToAction.tsx
View file

@ -5,14 +5,14 @@ export function CallToAction() {
return (
<section
id="get-started-today"
className="relative overflow-hidden bg-blue-600 py-32"
className="relative overflow-hidden bg-amber-500 py-32"
>
<Container className="relative">
<div className="mx-auto max-w-xl text-center">
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
Posuňte svoji aplikaci už dnes
</h2>
<p className="mt-4 text-lg tracking-tight text-white">
<p className="mt-4 text-lg tracking-tight text-slate-100">
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.

8
components/Environment.tsx
View file

@ -106,11 +106,11 @@ function Feature({ feature, className, ...props }: FeatureProps) {
color={feature.iconColor}
alt=""
/>
<h3 className="mt-6 text-lg font-medium text-blue-600">{feature.name}</h3>
<p className="font-display mt-2 text-xl text-slate-900">
<h3 className="mt-6 text-lg font-medium text-amber-500">{feature.name}</h3>
<p className="font-display mt-2 text-xl text-black">
{feature.summary}
</p>
<p className="mt-4 text-sm text-slate-600">{feature.description}</p>
<p className="mt-4 text-slate-700">{feature.description}</p>
</div>
);
}
@ -150,7 +150,7 @@ export function Environment() {
>
<Container>
<div className="mx-auto max-w-2xl md:text-center">
<h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
<h2 className="font-display text-3xl tracking-tight text-black sm:text-4xl">
Jakákoliv platforma, kdekoliv
</h2>
<p className="mt-4 text-lg tracking-tight text-slate-700">

4
components/Faqs.tsx
View file

@ -76,7 +76,7 @@ export function Faqs() {
<div className="mx-auto max-w-2xl lg:mx-0">
<h2
id="faq-title"
className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
className="font-display text-3xl tracking-tight text-black sm:text-4xl"
>
Frequently asked questions
</h2>
@ -94,7 +94,7 @@ export function Faqs() {
<ul role="list" className="flex flex-col gap-y-8">
{column.map((faq, faqIndex) => (
<li key={faqIndex}>
<h3 className="font-display text-lg leading-7 text-slate-900">
<h3 className="font-display text-lg leading-7 text-black">
{faq.question}
</h3>
<p className="mt-4 text-sm text-slate-700">{faq.answer}</p>

8
components/Footer.tsx
View file

@ -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"
>
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
</svg>
@ -133,7 +133,7 @@ export function Footer() {
>
<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"
>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
</svg>
@ -146,13 +146,13 @@ export function Footer() {
>
<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"
>
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
</svg>
</Link>
</div>
<p className="mt-6 text-sm text-slate-500 sm:mt-0">
<p className="mt-6 text-slate-700 sm:mt-0">
Copyright &copy; {new Date().getFullYear()} Vojtěch Mareš. Všechna
práva vyhrazena.
</p>

2
components/Header.tsx
View file

@ -22,7 +22,7 @@ export function Header() {
</div>
</div>
<div className="flex items-center gap-x-5 md:gap-x-8">
<Button href="mailto:iam@vojtechmares.com" color="blue">
<Button href="mailto:iam@vojtechmares.com" color="amber">
<span className="text-lg">
Napište mi{" "}
<span className="hidden lg:inline">ještě dnes</span>

8
components/Hero.tsx
View file

@ -29,13 +29,13 @@ export function Hero() {
<Container className="pt-5 lg:pt-8">
<div className="md:flex md:justify-between md:items-center">
<div>
<h1 className="font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl leading-10">
<h1 className="font-display text-5xl font-medium tracking-tight text-black sm:text-7xl leading-10">
Jsem{" "}
<span className="relative whitespace-nowrap text-blue-600">
<span className="relative whitespace-nowrap text-amber-500">
<svg
aria-hidden="true"
viewBox="0 0 418 42"
className="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70"
className="absolute top-2/3 left-0 h-[0.58em] w-full fill-amber-300/70"
preserveAspectRatio="none"
>
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
@ -61,7 +61,7 @@ export function Hero() {
</Button>
</div>
<div className="mt-10 "> {/* mt-36 lg:mt-44 */}
<p className="font-display text-lg tracking-tight text-slate-900">
<p className="font-display text-lg tracking-tight text-slate-700">
Moji spokojení klienti, přidejte se k nim i Vy.
</p>
<ul

2
components/NavLink.tsx
View file

@ -10,7 +10,7 @@ export function NavLink({ href, children }: Props) {
return (
<Link
href={href}
className="inline-block rounded-lg py-1 px-2 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-slate-900"
className="inline-block rounded-lg py-1 px-2 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black"
>
{children}
</Link>

10
components/Pricing.tsx
View file

@ -43,8 +43,8 @@ function Plan({
<section
className={clsx(
"flex flex-col rounded-3xl px-6 sm:px-8",
featured ? "order-first bg-blue-600 py-8 lg:order-none" : "lg:py-8",
featured ? "hover:bg-blue-700" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent",
featured ? "order-first bg-amber-500 py-8 lg:order-none" : "lg:py-8",
featured ? "hover:bg-amber-600" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent",
"transition ease-in-out duration-300 md:hover:-translate-y-1 md:hover:scale-110"
)}
>
@ -55,7 +55,7 @@ function Plan({
<p
className={clsx(
"mt-2 text-base",
featured ? "text-white" : "text-slate-400"
featured ? "text-slate-100" : "text-slate-400"
)}
>
{description}
@ -78,13 +78,13 @@ export function Pricing() {
<section
id="pricing"
aria-label="Pricing"
className="bg-slate-900 py-20 sm:py-32"
className="bg-black py-20 sm:py-32"
>
<Container>
<div className="md:text-center">
<h3 className="font-display text-xl tracking-tight text-white sm:text-4xl">
<span className="relative whitespace-nowrap">
<SwirlyDoodle className="absolute top-1/2 left-0 h-[1em] w-full fill-blue-400" />
<SwirlyDoodle className="absolute top-1/2 left-0 h-[1em] w-full fill-amber-400" />
<span className="relative">Co pro Vás,</span>
</span>{" "}
můžu udělat.

10
components/PrimaryFeatures.tsx
View file

@ -30,14 +30,14 @@ export function PrimaryFeatures() {
<section
id="features"
aria-label="Features for running your books"
className="relative overflow-hidden bg-blue-600 pt-20 pb-28 sm:py-32"
className="relative overflow-hidden bg-gradient-to-br to-amber-600 via-amber-500 from-amber-500 pt-20 pb-28 sm:py-32"
>
<Container className="relative">
<div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
Z nuly do cloudu.
</h2>
<p className="mt-6 text-lg tracking-tight text-blue-100">
<p className="mt-6 text-lg tracking-tight text-slate-100">
Vše co budete potřebovat, od začátku až do cíle.
</p>
</div>
@ -62,15 +62,15 @@ export function PrimaryFeatures() {
) : null}
<div className="group relative flex items-start">
<span className="flex h-9 items-center" aria-hidden="true">
<span className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 border-blue-600 bg-white">
<span className="h-3 w-3 rounded-full bg-blue-600" />
<span className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 border-amber-500 bg-white">
<span className="h-3 w-3 rounded-full bg-amber-500" />
</span>
</span>
<span className="ml-4 flex min-w-0 flex-col">
<span className="text-2xl font-normal text-white">
{step.name}
</span>
<span className="text-lg text-blue-200">
<span className="text-lg text-slate-100">
{step.description}
</span>
</span>

10
components/TechStack.tsx
View file

@ -102,22 +102,22 @@ function Feature({ feature, isActive, className, ...props }: FeatureProps) {
className={clsx(
// 'w-32',
"flex justify-center rounded-lg p-2"
// isActive ? 'fill-blue-600' : 'fill-slate-500'
// isActive ? 'fill-amber-500' : 'fill-slate-500'
)}
alt=""
/>
<h3
className={clsx(
"mt-6 text-lg font-medium",
isActive ? "text-blue-600" : "text-slate-600"
isActive ? "text-amber-500" : "text-slate-700"
)}
>
{feature.name}
</h3>
<p className="font-display mt-2 text-xl text-slate-900">
<p className="font-display mt-2 text-xl text-black">
{feature.summary}
</p>
<p className="mt-4 text-sm text-slate-600">{feature.description}</p>
<p className="mt-4 text-slate-700">{feature.description}</p>
</div>
);
}
@ -213,7 +213,7 @@ export function TechStack() {
>
<Container>
<div className="mx-auto max-w-2xl md:text-center">
<h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
<h2 className="font-display text-3xl tracking-tight text-black sm:text-4xl">
Open Source DevOps stack
</h2>
<p className="mt-4 text-lg tracking-tight text-slate-700">

8
components/Testimonials.tsx
View file

@ -45,7 +45,7 @@ export function Testimonials() {
>
<Container>
<div className="mx-auto max-w-2xl md:text-center">
<h2 className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl">
<h2 className="font-display text-3xl tracking-tight text-black sm:text-4xl">
Napsali o mně
</h2>
<p className="mt-4 text-lg tracking-tight text-slate-700">
@ -64,16 +64,16 @@ export function Testimonials() {
<figure className="relative rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10">
<QuoteIcon className="absolute top-6 left-6 fill-slate-100" />
<blockquote className="relative">
<p className="text-lg tracking-tight text-slate-900">
<p className="text-lg tracking-tight text-black">
{testimonial.content}
</p>
</blockquote>
<figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
<div>
<div className="font-display text-base text-slate-900">
<div className="font-display text-base text-black">
{testimonial.author.name}
</div>
<div className="mt-1 text-sm text-slate-500">
<div className="mt-1 text-sm text-slate-700">
{testimonial.author.role}
</div>
</div>

26
components/Training.tsx
View file

@ -17,7 +17,7 @@ export const Training = ({ training }: Props) => {
return (
<>
<div className="pb-14 sm:pb-20 lg:pb-32">
<div className="bg-slate-900 pt-16 pb-16">
<div className="bg-black pt-16 pb-16">
<Container className="flex justify-around">
<Image
src={training.logo}
@ -52,16 +52,16 @@ export const Training = ({ training }: Props) => {
className="h-5 w-5 text-blue-400"
>
<path
fill-rule="evenodd"
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
clip-rule="evenodd"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3">
<p className="text-blue-700">
<p className="text-blue-600">
Toto školení je{" "}
<span className="font-medium text-blue-700">
<span className="font-medium">
dvoudenní.
</span>
</p>
@ -73,25 +73,25 @@ export const Training = ({ training }: Props) => {
)}
<div className="mt-8 overflow-hidden rounded-lg bg-slate-50 shadow md:mt-0">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg font-medium leading-6 text-slate-900">
<h3 className="text-lg font-medium leading-6 text-black">
Cena za školení
</h3>
</div>
<div className="border-t border-gray-200 px-4 py-5">
<dl className="sm:divide-y sm:divide-gray-200">
<div className="border-t border-slate-100 px-4 py-5">
<dl className="sm:divide-y sm:divide-slate-400">
<div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
<dt className="font-medium text-gray-500">
<dt className="font-medium text-slate-700">
Veřejný termín
</dt>
<dd className="mt-1 text-gray-900 sm:mt-0">
<dd className="mt-1 text-black sm:mt-0">
{formatter.format(training.priceOpen)} bez DPH
</dd>
</div>
<div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
<dt className="font-medium text-gray-500">
<dt className="font-medium text-slate-700">
Firemní školení
</dt>
<dd className="mt-1 text-gray-900 sm:mt-0">
<dd className="mt-1 text-black sm:mt-0">
{formatter.format(training.priceCompany)} bez DPH
</dd>
</div>
@ -101,7 +101,7 @@ export const Training = ({ training }: Props) => {
<div className="mt-8">
<Button
variant="solid"
color="blue"
color="amber"
className="w-full text-lg font-medium"
href="mailto:iam@vojtechmares.com"
>

11
components/TrainingListGrid.tsx
View file

@ -21,8 +21,8 @@ const TrainingDetail = ({
className={clsx(
className,
"rounded-3xl py-8 px-6 shadow sm:px-8",
training.featured ? "bg-blue-600 py-8" : "",
training.featured ? "hover:bg-blue-700" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent",
training.featured ? "bg-amber-500 py-8" : "",
training.featured ? "hover:bg-amber-600" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent",
"transition ease-in-out duration-300 md:hover:-translate-y-1 md:hover:scale-110 "
)}
{...props}
@ -54,10 +54,7 @@ const TrainingDetail = ({
</p>
</div>
<p
className={clsx(
"text-md mt-4",
training.featured ? "text-white" : "text-slate-200"
)}
className="text-md mt-4 text-slate-100"
>
{training.description.split(" ").splice(0, 40).join(" ") + "..."}
</p>
@ -117,7 +114,7 @@ export const TrainingListGrid = ({ trainingList }: TrainingListProps) => {
<section
id="training-list"
aria-label="Seznam školení"
className="bg-slate-900 pt-16 pb-14 sm:pb-20 sm:pt-24 lg:pb-32"
className="bg-black pt-16 pb-14 sm:pb-20 sm:pt-24 lg:pb-32"
>
<Container>
<div className="mx-auto max-w-2xl md:text-center">