Skip to content

Commit

Permalink
desktop layout done
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronmcadam
aaronmcadam committed Aug 1, 2024
1 parent ba8ebac commit 82d9173
Show file tree
Hide file tree
Showing 7 changed files with 268 additions and 22 deletions.
Binary file added public/images/erectile-dysfunction.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/hair-loss.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
207 changes: 191 additions & 16 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Logo } from "@/components/ui/logo";
import { FacebookLogo } from "@/components/ui/logos/facebook-logo";
import { GoogleLogo } from "@/components/ui/logos/google-logo";
import { ManualLogo } from "@/components/ui/logos/manual-logo";
import { TwitterLogo } from "@/components/ui/logos/twitter-logo";
import Image from "next/image";

export default function Home() {
return (
<main>
{/* Hero */}
<div className="flex pt-8 bg-brand/25">
<div className="mx-auto max-w-2xl">
<div>
<span className="sr-only">Manual</span>
<Logo />
<ManualLogo />
</div>
<div className="mt-28">
<h2 className="font-medium tracking-tight text-8xl text-brand">
<h1 className="font-medium tracking-tight text-8xl text-brand">
Be good
<br /> to yourself
</h2>
</h1>
<p className="mt-5 text-lg text-brand">
We’re working around the clock to bring you a holistic approach to
your wellness. From top to bottom, inside and out.
Expand All @@ -27,25 +31,196 @@ export default function Home() {
</div>
<Image
src="/images/hero-bg.png"
alt="Hero Logo"
alt="Hero Background"
className="flex-none mt-8 mr-8"
width={596}
height={697}
priority
/>
</div>

<div className="flex flex-col items-center mt-8">
<h3 className="font-medium text-xl">What we can help with</h3>
<h4>Hair loss</h4>
<h5 className="font-medium text-lg">
Hair loss needn’t be irreversible. We can help!
</h5>
<p>
We’re working around the clock to bring you a holistic approach to
your wellness. From top to bottom, inside and out.
</p>
{/* Treatments */}
<div className="flex flex-col items-center pt-16 pb-24">
<h2 className="font-medium text-brand tracking-tight text-4xl">
What we can help with
</h2>
<div className="mt-16">
<div className="flex items-center relative">
<Image
src="/images/hair-loss.png"
className="z-10"
alt="Hair loss"
width={370}
height={445}
priority
/>
<span className="select-none text-brand/5 text-[450px] leading-none absolute left-[30%] z-0">
01
</span>
<div className="pl-32 z-10">
<div className="flex flex-col max-w-80">
<h3 className="font-bold text-xs text-brand/75 uppercase tracking-wider">
Hair loss
</h3>
<h4 className="font-medium text-2xl text-brand mt-2">
Hair loss needn’t be irreversible. We can help!
</h4>
<p className="mt-5 text-brand">
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 items-center relative mt-44">
<span className="select-none text-brand/5 text-[450px] leading-none absolute right-[30%] z-0">
02
</span>
<div className="pr-32 z-10">
<div className="flex flex-col max-w-80">
<h3 className="font-bold text-xs text-brand/75 uppercase tracking-wider">
Erectile dysfunction
</h3>
<h4 className="font-medium text-2xl text-brand mt-2">
Erections can be a tricky thing. But no need to feel down!
</h4>
<p className="mt-5 text-brand">
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>
<Image
src="/images/erectile-dysfunction.png"
className="z-10"
alt="Erectile dysfunction"
width={370}
height={445}
priority
/>
</div>
</div>
</div>
<Footer />
</main>
);
}

const footerNavigation = {
product: [
{ name: "Popular", href: "#" },
{ name: "Trending", href: "#" },
{ name: "Guided", href: "#" },
{ name: "Products", href: "#" },
],
company: [
{ name: "Press", href: "#" },
{ name: "Mission", href: "#" },
{ name: "Strategy", href: "#" },
{ name: "About", href: "#" },
],
info: [
{ name: "Support", href: "#" },
{ name: "Customer Service", href: "#" },
{ name: "Get started", href: "#" },
],
};

function Footer() {
return (
<footer aria-labelledby="footer-heading" className="bg-brand/10">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="mx-auto max-w-7xl px-6 py-20 sm:py-24 lg:px-8">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<ManualLogo size={75} />
<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">
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"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-10 md:mt-0">
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
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"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</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">
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"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-10 md:mt-0">
<h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
Follow us
</h3>
<ul role="list" className="mt-6 flex gap-5">
<li>
<a href="#" className="leading-6 ">
<FacebookLogo className="text-primary hover:text-primary/70" />
</a>
</li>
<li>
<a href="#" className="leading-6 ">
<GoogleLogo className="text-primary hover:text-primary/70" />
</a>
</li>
<li>
<a href="#" className="leading-6 ">
<TwitterLogo className="text-primary hover:text-primary/70" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="mx-auto max-w-7xl border-brand/10 border-t">
<p className="text-center text-brand p-6">
&copy; 2024 Manual. All rights reserved.
</p>
</div>
</footer>
);
}
21 changes: 21 additions & 0 deletions src/components/ui/logos/facebook-logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
type FacebookLogoProps = {
size?: number;
className: string;
};

export function FacebookLogo({ size = 24, className }: FacebookLogoProps) {
return (
<svg
className={className}
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
>
<path
fill="currentColor"
d="M9.52866 22L9.5 13.25H5.75V9.5H9.5V7C9.5 3.626 11.5894 2 14.5992 2C16.041 2 17.2801 2.10734 17.6412 2.15531V5.68134L15.5537 5.68229C13.9168 5.68229 13.5998 6.46012 13.5998 7.60155V9.5H18.25L17 13.25H13.5998V22H9.52866Z"
/>
</svg>
);
}
21 changes: 21 additions & 0 deletions src/components/ui/logos/google-logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
type GoogleLogoProps = {
size?: number;
className: string;
};

export function GoogleLogo({ size = 24, className }: GoogleLogoProps) {
return (
<svg
className={className}
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
>
<path
fill="currentColor"
d="M20.9016 10.3612H12.1796V14.0439H17.122C16.3329 16.499 14.3808 17.3173 12.138 17.3173C11.2696 17.3185 10.4137 17.1132 9.64294 16.7189C8.8722 16.3246 8.20936 15.753 7.71066 15.0525C7.21197 14.3521 6.89213 13.5434 6.7783 12.6952C6.66446 11.847 6.75997 10.9843 7.05674 10.1802C7.35351 9.37611 7.84277 8.65442 8.48302 8.07634C9.12327 7.49827 9.8956 7.08088 10.7345 6.85958C11.5734 6.63828 12.4541 6.61961 13.3019 6.80514C14.1497 6.99068 14.9395 7.37495 15.6044 7.92535L18.3207 5.37695C17.2269 4.38545 15.904 3.67186 14.4669 3.2981C13.0298 2.92434 11.5218 2.9017 10.0738 3.23214C8.6258 3.56258 7.2815 4.23612 6.15754 5.19432C5.03358 6.15253 4.16392 7.36645 3.62401 8.73077C3.08409 10.0951 2.89024 11.5686 3.05926 13.0234C3.22828 14.4783 3.75507 15.8705 4.59393 17.0794C5.43279 18.2882 6.55837 19.2771 7.87302 19.9604C9.18768 20.6436 10.6517 21.0004 12.138 21C17.1764 21 21.7322 17.7265 20.9016 10.3612Z"
/>
</svg>
);
}
20 changes: 14 additions & 6 deletions src/components/ui/logo.tsx → src/components/ui/logos/manual-logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
type LogoProps = {
type ManualLogoProps = {
size?: number;
color?: string;
className?: string;
};

// TODO: Import the brand colour from the tailwind theme
export function Logo({ size = 40, color = "#0B3B3C" }: LogoProps) {
export function ManualLogo({
size = 40,
className = "text-brand",
}: ManualLogoProps) {
return (
<svg width={size} height={size} viewBox="0 0 40 40" fill="none">
<svg
className={className}
width={size}
height={size}
viewBox="0 0 40 40"
fill="none"
>
<path
fill={color}
fill="currentColor"
fillRule="evenodd"
d="M10.7 37.038c-.678 0-1.102-.514-1.102-1.356 0-3.976 7.89-13.009 15.761-20.665-1.33 8.599-10.124 22.021-14.66 22.021ZM38.944 1.503c-1.083.026-3.305.11-5.254.138-.686.01-.96.318-.872.76.104.521.447.907.964.92.665.018 1.556-.093 2.699-.149-2.598 1.999-5.74 4.625-8.983 7.548-.38-2.94-1.744-5.292-4.426-5.292-3.898 0-7.796 5.932-9.491 9.237-.17-2.711-1.356-5.254-3.898-5.254C4.397 9.411 0 21.44 0 23.24c0 .615.704 1.087 1.127 1.087.509 0 .674-.254.844-.847 2.203-7.203 5.508-12.204 7.712-12.204 1.101 0 1.949 1.272 1.949 4.238 0 2.182-.372 3.507-.372 4.024 0 .808.71 1.23 1.134 1.23.509 0 .678-.254.933-.847 2.542-6.272 6.694-12.543 9.66-12.543 1.461 0 2.455 1.866 2.537 5.149C16.63 20.776 7.67 30.718 7.67 35.609c0 2.035 1.123 3.209 2.944 3.209 6.538 0 16.77-16.25 16.993-25.952 3.638-3.423 7.107-6.413 9.604-8.315-.384.954-.772 1.881-.969 2.574-.144.506-.056 1.063.566 1.306.394.153.745-.07.9-.51.938-2.676 1.421-3.774 1.995-5.306.375-1.002.335-1.138-.76-1.112Z"
clipRule="evenodd"
Expand Down
21 changes: 21 additions & 0 deletions src/components/ui/logos/twitter-logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
type TwitterLogoProps = {
size?: number;
className: string;
};

export function TwitterLogo({ size = 24, className }: TwitterLogoProps) {
return (
<svg
className={className}
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
>
<path
fill="currentColor"
d="M19.995 6.68799C20.8914 6.15208 21.5622 5.30823 21.882 4.31399C21.0397 4.81379 20.118 5.16587 19.157 5.35499C17.8246 3.94552 15.7135 3.60251 14.0034 4.51764C12.2933 5.43277 11.4075 7.37948 11.841 9.26999C8.39062 9.09676 5.17598 7.4669 2.99702 4.78599C1.85986 6.74741 2.44097 9.25477 4.32502 10.516C3.64373 10.4941 2.97754 10.3096 2.38202 9.97799C2.38202 9.99599 2.38202 10.014 2.38202 10.032C2.38241 12.0751 3.82239 13.8351 5.82502 14.24C5.19308 14.4119 4.53022 14.4372 3.88702 14.314C4.45022 16.0613 6.06057 17.2583 7.89602 17.294C6.37585 18.4871 4.49849 19.1342 2.56602 19.131C2.22349 19.1315 1.88123 19.1118 1.54102 19.072C3.50341 20.333 5.78738 21.0023 8.12002 21C11.3653 21.0223 14.484 19.7429 16.7787 17.448C19.0734 15.1531 20.3526 12.0342 20.33 8.78899C20.33 8.60299 20.3257 8.41799 20.317 8.23399C21.1575 7.62659 21.8828 6.87414 22.459 6.01199C21.676 6.35905 20.8455 6.58691 19.995 6.68799Z"
/>
</svg>
);
}

0 comments on commit 82d9173

Please sign in to comment.