landing page revisions, second view done

This commit is contained in:
Noah Swerhun 2023-07-26 23:40:20 -05:00
parent 2babbc167d
commit d87223cb4a
29 changed files with 208 additions and 38 deletions

View file

@ -1,5 +1,9 @@
const Accupuncture = () => {
return <main>Accupuncture</main>;
return (
<main>
<div className="h-screen">Accupuncture</div>
</main>
);
};
export default Accupuncture;

View file

@ -1,5 +1,9 @@
const Articles = () => {
return <main>Articles</main>;
return (
<main>
<div className="h-screen">Articles</div>
</main>
);
};
export default Articles;

View file

@ -1,6 +1,7 @@
import Navbar from "@/components/Navbar";
import "./globals.css";
import type { Metadata } from "next";
import Footer from "@/components/Footer";
export const metadata: Metadata = {
title: "Dr. Richard Feely | Home",
@ -20,6 +21,7 @@ export default function RootLayout({
<body>
<Navbar></Navbar>
{children}
<Footer></Footer>
</body>
</html>
);

View file

@ -1,5 +1,9 @@
const NeuroOcularRelease = () => {
return <main>NeuroOcularRelease</main>;
return (
<main>
<div className="h-screen">NeuroOcularRelease</div>
</main>
);
};
export default NeuroOcularRelease;

View file

@ -1,5 +1,9 @@
const Osteopathy = () => {
return <main>Osteopathy</main>;
return (
<main>
<div className="h-screen">Osteopathy</div>
</main>
);
};
export default Osteopathy;

View file

@ -1,12 +1,12 @@
import Accomplishments from "./views/Accomplishments";
import Bio from "./views/Bio";
import Landing from "./views/Landing";
import ClinicalPhilosophy from "./views/ClinicalPhilosophy";
import Introduction from "./views/Introduction";
const Home = () => {
return (
<main>
<Landing></Landing>
<Bio></Bio>
<Introduction></Introduction>
<ClinicalPhilosophy></ClinicalPhilosophy>
<Accomplishments></Accomplishments>
</main>
);

View file

@ -1,12 +1,23 @@
const Accomplishments = () => {
return (
<section className="text-primary-500">
<section className="text-primary-500" id="accomplishments">
<div className="h-screen w-full bg-primary-300 flex items-center">
<div className="w-11/12 lg:w-5/6 mx-auto flex items-center flex-col md:flex-row">
<div className="lg:basis-60">
<h1 className="z-[45] text-7xl lg:text-9xl font-cormorant pb-10">
Richard A. Feely, DO
</h1>
<p className="">
Richard is also widely known for his work in osteopathic
manipulation, cranial osteopathy, and acupuncture. He is a
sought-after lecturer, educator, and author. He has written about
integrative medical treatments and has edited several prestigious
medical journals, including{" "}
<span className="italic">
Clinical Cranial Osteopathy: Selected Readings
</span>
.
</p>
</div>
</div>
</div>

View file

@ -1,17 +0,0 @@
const Bio = () => {
return (
<section className="text-primary-500">
<div className="h-screen w-full bg-primary-100 flex items-center">
<div className="w-11/12 lg:w-5/6 mx-auto flex items-center flex-col md:flex-row">
<div className="basis-2/5">
<h1 className="z-[45] text-7xl lg:text-9xl font-cormorant pb-10">
Richard A. Feely, DO
</h1>
</div>
</div>
</div>
</section>
);
};
export default Bio;

View file

@ -0,0 +1,66 @@
const ClinicalPhilosophy = () => {
return (
<section className="text-primary-500" id="philosophy">
<div className="min-h-screen w-full bg-primary-100 flex items-center relative z-[-2] overflow-hidden">
<div className="w-11/12 lg:w-5/6 mt-32 mb-16 md:my-12 lg:mb-16 mx-auto flex flex-col gap-12 items-center">
<div className="relative">
<div className="before:absolute lg:before:content-textAccent3 before:z-[-1] before:-left-16 before:-top-8">
<h2 className="font-cormorant text-6xl mb-4 text-center">
A <span className="text-secondary-500">unique</span> approach to
medicine, since 1981.
</h2>
</div>
</div>
<div className="flex items-center flex-col gap-12 md:gap-4 md:flex-row md:justify-around">
<div className="basis-4/12">
<img
className="shadow-lg shadow-tertiary-400 rounded-3xl max-w-sm w-full"
src="/dr_feely_brick_wall.webp"
alt="Picture of Dr. Feely"
/>
</div>
<div className="basis-6/12 flex flex-col gap-5 md:gap-10 text-lg">
<div className="relative">
<div className="before:absolute before:-right-48 before:-top-32 before:z-[-1] before:content-textAccent2">
<p className="">
Dr. Richard Feely has served the Chicago area with high
quality medical care marked by a holistic approach. As a
specialist in osteopathic medicine, Dr. Feely views your
health in the context of your lifestyle and environment,
providing you with comprehensive care that has lasting
results.
</p>
</div>
</div>
<p className="">
After an evaluation, Dr. Feely will give you access to every
health resource you need, enabling you to not only feel better
in the short term, but live a healthier lifestyle and acheive
optimal health.
</p>
<div className="relative">
<div className="before:absolute before:content-quote before:z-[2] before:-left-2 before:top-2">
<div className="bg-gray-200 rounded-sm drop-shadow-md mx-4 bg-opacity-75">
<p className="p-5 font-cormorant text-xl">
As an osteopathic physician, my education and philosophy
of care centers around treating the whole person. I dont
look at or treat only the symptoms you may present with. I
consider everything about you and your life.
</p>
<p className="px-5 pb-5 text-right italic">
&mdash;Dr. Richard Feely
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default ClinicalPhilosophy;

View file

@ -1,9 +1,9 @@
const Landing = () => {
const Introduction = () => {
return (
<section className="text-primary-100">
<section className="text-primary-100" id="introduction">
<div className="min-h-screen w-full bg-primary-500 flex items-center relative z-[-2] overflow-hidden">
<div className="w-11/12 lg:w-5/6 mt-32 my-14 md:mt-12 md:my-0 mx-auto flex items-center flex-col gap-12 md:gap-4 md:flex-row md:justify-around">
<div className="basis-6/12">
<hgroup className="basis-6/12">
<div className="relative">
<div className="before:absolute before:-left-52 before:-top-44 before:z-[-1] before:content-textAccent">
<h1 className="text-7xl lg:text-7xl font-cormorant pb-10">
@ -11,19 +11,19 @@ const Landing = () => {
</h1>
</div>
</div>
<h2 className="text-2xl">
<p className="text-2xl">
Dr. Feely is a highly accomplished physician with over 25 years of
experience in osteopathic medicine, acupuncture, herbal medicine,
and family practice. He specializes in the treatment of
neuromusculoskeletal pain&mdash;especially back pain, neck pain
and headaches.
</h2>
</div>
</p>
</hgroup>
<div className="basis-4/12 flex justify-center">
<img
className="shadow-superPortrait shadow-secondary-500 rounded-3xl max-w-sm w-full"
src="/dr_feely_cutout_headshot_2.png"
alt="Picture of Dr. Feely"
className="shadow-superPortraitR shadow-secondary-500 rounded-3xl max-w-sm w-full"
src="/dr_feely_headshot.png"
alt="Headshot of Dr. Feely"
/>
</div>
</div>
@ -32,4 +32,4 @@ const Landing = () => {
);
};
export default Landing;
export default Introduction;

88
components/Footer.tsx Normal file
View file

@ -0,0 +1,88 @@
const Footer = () => {
return (
<footer className="w-full bg-neutral-800 text-neutral-300">
<div className="px-6 py-12">
<div className="flex justify-evenly gap-10 flex-col ml-8 md:m-0 md:flex-row">
<div className="">
<h3 className="text-xl font-bold">Home</h3>
<ul className="text-sm">
<li>
<a href="/#introduction">Introduction</a>
</li>
<li>
<a href="/#philosophy">Clinical Philosophy</a>
</li>
<li>
<a href="/#accomplishments">Biography & Accomplishments</a>
</li>
</ul>
</div>
<div className="">
<h3 className="text-xl font-bold">Osteopathy</h3>
<ul className="text-sm">
<li>
<a href="/osteopathy/#">a</a>
</li>
<li>
<a href="/osteopathy/#">b</a>
</li>
<li>
<a href="/osteopathy/#">c</a>
</li>
</ul>
</div>
<div className="">
<h3 className="text-xl font-bold">Accupuncture</h3>
<ul className="text-sm">
<li>
<a href="/accupuncture/#">a</a>
</li>
<li>
<a href="/accupuncture/#">b</a>
</li>
<li>
<a href="/accupuncture/#">c</a>
</li>
</ul>
</div>
<div className="">
<h3 className="text-xl font-bold">Articles</h3>
<ul className="text-sm">
<li>
<a href="/articles/#">a</a>
</li>
<li>
<a href="/articles/#">b</a>
</li>
<li>
<a href="/articles/#">c</a>
</li>
</ul>
</div>
<div className="">
<h3 className="text-xl font-bold">NOR</h3>
<ul className="text-sm">
<li>
<a href="/nor/#">a</a>
</li>
<li>
<a href="/nor/#">b</a>
</li>
<li>
<a href="/nor/#">c</a>
</li>
</ul>
</div>
</div>
<div className="flex justify-center mt-8">
<p>Copyright (C) {new Date().getFullYear()} Richard A. Feely, DO</p>
</div>
<div className="flex justify-center">
<a href="/licenses">Licenses & Credits</a>
</div>
</div>
</footer>
);
};
export default Footer;

View file

@ -27,7 +27,7 @@ const Navbar = () => {
"bg-primary-500 text-primary-100 fixed top-0 w-full " +
(isTopOfPage
? "bg-transparent"
: "z-40 bg-opacity-60 backdrop-blur-sm drop-shadow")
: "z-40 bg-opacity-75 backdrop-blur-sm drop-shadow")
}
>
<div className="mx-auto w-11/12 lg:w-5/6 flex justify-between items-center">

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 MiB

Binary file not shown.

View file

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 466 KiB

BIN
public/quote.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
public/text_accent_2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/text_accent_3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

View file

@ -48,10 +48,14 @@ module.exports = {
fadeOut: "fadeOut 500ms ease-out",
},
boxShadow: {
superPortrait: "75px 75px 250px 0px",
superPortraitR: "75px 75px 250px 0px",
superPortraitL: "-75px 75px 250px 0px",
},
content: {
textAccent: "url('/text_accent.png')",
textAccent2: "url('/text_accent_2.png')",
quote: "url('/quote.png')",
textAccent3: "url('/text_accent_3.png')",
},
},
},