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 = () => { const Accupuncture = () => {
return <main>Accupuncture</main>; return (
<main>
<div className="h-screen">Accupuncture</div>
</main>
);
}; };
export default Accupuncture; export default Accupuncture;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,12 +1,23 @@
const Accomplishments = () => { const Accomplishments = () => {
return ( 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="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="w-11/12 lg:w-5/6 mx-auto flex items-center flex-col md:flex-row">
<div className="lg:basis-60"> <div className="lg:basis-60">
<h1 className="z-[45] text-7xl lg:text-9xl font-cormorant pb-10"> <h1 className="z-[45] text-7xl lg:text-9xl font-cormorant pb-10">
Richard A. Feely, DO Richard A. Feely, DO
</h1> </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> </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 ( 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="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="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="relative">
<div className="before:absolute before:-left-52 before:-top-44 before:z-[-1] before:content-textAccent"> <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"> <h1 className="text-7xl lg:text-7xl font-cormorant pb-10">
@ -11,19 +11,19 @@ const Landing = () => {
</h1> </h1>
</div> </div>
</div> </div>
<h2 className="text-2xl"> <p className="text-2xl">
Dr. Feely is a highly accomplished physician with over 25 years of Dr. Feely is a highly accomplished physician with over 25 years of
experience in osteopathic medicine, acupuncture, herbal medicine, experience in osteopathic medicine, acupuncture, herbal medicine,
and family practice. He specializes in the treatment of and family practice. He specializes in the treatment of
neuromusculoskeletal pain&mdash;especially back pain, neck pain neuromusculoskeletal pain&mdash;especially back pain, neck pain
and headaches. and headaches.
</h2> </p>
</div> </hgroup>
<div className="basis-4/12 flex justify-center"> <div className="basis-4/12 flex justify-center">
<img <img
className="shadow-superPortrait shadow-secondary-500 rounded-3xl max-w-sm w-full" className="shadow-superPortraitR shadow-secondary-500 rounded-3xl max-w-sm w-full"
src="/dr_feely_cutout_headshot_2.png" src="/dr_feely_headshot.png"
alt="Picture of Dr. Feely" alt="Headshot of Dr. Feely"
/> />
</div> </div>
</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 " + "bg-primary-500 text-primary-100 fixed top-0 w-full " +
(isTopOfPage (isTopOfPage
? "bg-transparent" ? "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"> <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", fadeOut: "fadeOut 500ms ease-out",
}, },
boxShadow: { boxShadow: {
superPortrait: "75px 75px 250px 0px", superPortraitR: "75px 75px 250px 0px",
superPortraitL: "-75px 75px 250px 0px",
}, },
content: { content: {
textAccent: "url('/text_accent.png')", textAccent: "url('/text_accent.png')",
textAccent2: "url('/text_accent_2.png')",
quote: "url('/quote.png')",
textAccent3: "url('/text_accent_3.png')",
}, },
}, },
}, },