Skip to content

Commit

Permalink
adjust colours
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronmcadam
aaronmcadam committed Aug 6, 2024
1 parent 5fe8a31 commit e00f4e6
Show file tree
Hide file tree
Showing 8 changed files with 40 additions and 36 deletions.
8 changes: 5 additions & 3 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,11 @@
}

:root {
--brand: 181 69% 14%;
--brand-600: 166 12% 48%;
--brand-300: 167 11% 69%;
--brand-50: 135 20% 96%;
--brand-100: 129 18% 92%;
--brand-300: 167 11% 69%;
--brand-600: 166 12% 48%;
--brand-800: 181 69% 14%;
--brand-hero: 109 13% 67%;
}
}
46 changes: 23 additions & 23 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@ export default function Home() {
return (
<main>
{/* Hero */}
<div className="flex flex-col md:flex-row pt-8 px-6 lg:px-0 bg-brand/25">
<div className="flex flex-col md:flex-row pt-8 px-6 lg:px-0 bg-brand-hero">
<div className="mx-auto max-w-2xl">
<div>
<span className="sr-only">Manual</span>
<ManualLogo className="w-10 h-10" />
</div>
<div className="my-8 sm:mt-28">
<h1 className="font-medium tracking-tight text-6xl sm:text-8xl text-brand">
<h1 className="font-medium tracking-tight text-6xl sm:text-8xl text-brand-800">
Be good
<br /> to yourself
</h1>
<p className="mt-5 text-lg text-brand">
<p className="mt-5 text-lg text-brand-800">
We’re working around the clock to bring you a holistic approach to
your wellness. From top to bottom, inside and out.
</p>
Expand All @@ -40,7 +40,7 @@ export default function Home() {

{/* Treatments */}
<div className="flex flex-col items-center pt-10 sm:pt-16 pb-20 sm:pb-24 px-6 lg:px-0">
<h2 className="font-medium text-center text-brand tracking-tight text-3xl sm:text-4xl">
<h2 className="font-medium text-center text-brand-800 tracking-tight text-3xl sm:text-4xl">
What we can help with
</h2>
<div className="mt-8 sm:mt-16">
Expand All @@ -53,37 +53,37 @@ export default function Home() {
height={445}
priority
/>
<span className="hidden sm:inline select-none text-brand/5 text-[450px] leading-none sm:absolute sm:left-[30%] sm:z-0">
<span className="hidden sm:inline select-none text-brand-50 text-[450px] leading-none sm:absolute sm:left-[30%] sm:z-0">
01
</span>
<div className="sm:pl-32 sm:z-10">
<div className="flex flex-col max-w-80 mt-4 sm:mt-0">
<h3 className="font-bold text-xs text-brand/75 uppercase tracking-wider">
<h3 className="font-bold text-xs text-brand-600 uppercase tracking-wider">
Hair loss
</h3>
<h4 className="font-medium text-xl sm:text-2xl text-brand mt-2">
<h4 className="font-medium text-xl sm:text-2xl text-brand-800 mt-2">
Hair loss needn’t be irreversible. We can help!
</h4>
<p className="mt-5 text-brand">
<p className="mt-5 text-brand-800">
We’re working around the clock to bring you a holistic
approach to your wellness. From top to bottom, inside and out.
</p>
</div>
</div>
</div>
<div className="flex flex-col-reverse sm:flex-row sm:items-center sm:relative mt-20 sm:mt-44">
<span className="hidden sm:inline select-none text-brand/5 text-[450px] leading-none sm:absolute sm:left-[30%] sm:z-0">
<span className="hidden sm:inline select-none text-brand-50 text-[450px] leading-none sm:absolute sm:right-[30%] sm:z-0">
02
</span>
<div className="sm:pl-32 sm:z-10">
<div className="sm:pr-32 sm:z-10">
<div className="flex flex-col max-w-80 mt-4 sm:mt-0">
<h3 className="font-bold text-xs text-brand/75 uppercase tracking-wider">
<h3 className="font-bold text-xs text-brand-600 uppercase tracking-wider">
Erectile dysfunction
</h3>
<h4 className="font-medium text-xl sm:text-2xl text-brand mt-2">
<h4 className="font-medium text-xl sm:text-2xl text-brand-800 mt-2">
Erections can be a tricky thing. But no need to feel down!
</h4>
<p className="mt-5 text-brand">
<p className="mt-5 text-brand-800">
We’re working around the clock to bring you a holistic
approach to your wellness. From top to bottom, inside and out.
</p>
Expand Down Expand Up @@ -127,7 +127,7 @@ const footerNavigation = {

function Footer() {
return (
<footer aria-labelledby="footer-heading" className="bg-brand/10">
<footer aria-labelledby="footer-heading" className="bg-brand-100">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
Expand All @@ -137,15 +137,15 @@ function Footer() {
<div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand-800">
Product
</h3>
<ul role="list" className="mt-6 space-y-5">
{footerNavigation.product.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="leading-6 text-brand hover:text-brand/70"
className="leading-6 text-brand-800 hover:text-brand-600"
>
{item.name}
</a>
Expand All @@ -154,15 +154,15 @@ function Footer() {
</ul>
</div>
<div className="mt-10 md:mt-0">
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand-800">
Company
</h3>
<ul role="list" className="mt-6 space-y-5">
{footerNavigation.company.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="leading-6 text-brand hover:text-brand/70"
className="leading-6 text-brand-800 hover:text-brand-600"
>
{item.name}
</a>
Expand All @@ -173,15 +173,15 @@ function Footer() {
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand-800">
Info
</h3>
<ul role="list" className="mt-6 space-y-5">
{footerNavigation.info.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="leading-6 text-brand hover:text-brand/70"
className="leading-6 text-brand-800 hover:text-brand-600"
>
{item.name}
</a>
Expand All @@ -190,7 +190,7 @@ function Footer() {
</ul>
</div>
<div className="mt-10 md:mt-0">
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand-800">
Follow us
</h3>
<ul role="list" className="mt-6 flex gap-5">
Expand All @@ -215,8 +215,8 @@ function Footer() {
</div>
</div>
</div>
<div className="mx-auto max-w-7xl border-brand/10 border-t">
<p className="text-center text-brand p-6">
<div className="mx-auto max-w-7xl border-brand-300/50 border-t">
<p className="text-center text-brand-800 p-6">
&copy; 2024 Manual. All rights reserved.
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/quiz-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export function QuizButton() {
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle className="text-brand">
<DialogTitle className="text-brand-800">
Is Manual Right For You?
</DialogTitle>
<DialogDescription className="text-brand">
<DialogDescription className="text-brand-800">
Help us provide you with the best possible care by answering a few
quick questions.
</DialogDescription>
Expand Down
2 changes: 1 addition & 1 deletion src/components/quiz-navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function QuizNavigation({
aria-hidden="true"
className="absolute inset-0 flex items-center"
>
<div className="h-0.5 w-full bg-brand/50" />
<div className="h-0.5 w-full bg-brand-50" />
</div>
<button
onClick={() => onButtonClick(questionIndex)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/quiz.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export function Quiz() {
}));
}}
/>
<h3 className="font-medium text-2xl text-center mt-6 sm:mt-16">
<h3 className="font-medium text-brand-800 text-2xl text-center mt-6 sm:mt-16">
{currentQuestion.title}
</h3>
<div
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-brand/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-brand-800/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
{...props}
Expand Down Expand Up @@ -59,7 +59,7 @@ const DialogHeader = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left bg-brand/10 p-4",
"flex flex-col space-y-1.5 text-center sm:text-left bg-brand-100 p-4",
className,
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/logos/manual-logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ type ManualLogoProps = {
className?: string;
};

export function ManualLogo({ className = "text-brand" }: ManualLogoProps) {
export function ManualLogo({ className = "text-brand-800" }: ManualLogoProps) {
return (
<svg className={className} viewBox="0 0 40 40" fill="none">
<path
Expand Down
8 changes: 5 additions & 3 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,12 @@ const config = {
foreground: "hsl(var(--card-foreground))",
},
brand: {
DEFAULT: "hsl(var(--brand))",
600: "hsl(var(--brand-600))",
300: "hsl(var(--brand-300))",
50: "hsl(var(--brand-50))",
100: "hsl(var(--brand-100))",
300: "hsl(var(--brand-300))",
600: "hsl(var(--brand-600))",
800: "hsl(var(--brand-800))",
hero: "hsl(var(--brand-hero))",
},
},
borderRadius: {
Expand Down

0 comments on commit e00f4e6

Please sign in to comment.