diff --git a/app/accupuncture/page.tsx b/app/accupuncture/page.tsx new file mode 100644 index 0000000..0652fd4 --- /dev/null +++ b/app/accupuncture/page.tsx @@ -0,0 +1,5 @@ +const Accupuncture = () => { + return
Accupuncture
; +}; + +export default Accupuncture; diff --git a/app/articles/page.tsx b/app/articles/page.tsx new file mode 100644 index 0000000..6339cdc --- /dev/null +++ b/app/articles/page.tsx @@ -0,0 +1,5 @@ +const Articles = () => { + return
Articles
; +}; + +export default Articles; diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/globals.css b/app/globals.css index 6e2d3db..4e4cdd3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,29 +1,16 @@ +@import url(https://fonts.bunny.net/css?family=abel:400|cormorant:700|frank-ruhl-libre:300); + @tailwind base; @tailwind components; @tailwind utilities; -@import url(https://fonts.bunny.net/css?family=abel:400|cormorant:400|frank-ruhl-libre:300); - -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; +@layer base { + html { + scroll-behavior: smooth; + } + body { + @apply bg-primary-100; + @apply text-primary-500; + @apply font-abel; } } - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} diff --git a/app/layout.tsx b/app/layout.tsx index ae84562..bfed42d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,22 +1,26 @@ -import './globals.css' -import type { Metadata } from 'next' -import { Inter } from 'next/font/google' - -const inter = Inter({ subsets: ['latin'] }) +import Navbar from "@/components/Navbar"; +import "./globals.css"; +import type { Metadata } from "next"; export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', -} + title: "Dr. Richard Feely", + description: `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, especially back pain, neck pain and headaches.`, +}; export default function RootLayout({ children, }: { - children: React.ReactNode + children: React.ReactNode; }) { return ( - {children} + + + {children} + - ) + ); } diff --git a/app/nor/page.tsx b/app/nor/page.tsx new file mode 100644 index 0000000..ec4e8f6 --- /dev/null +++ b/app/nor/page.tsx @@ -0,0 +1,5 @@ +const NeuroOcularRelease = () => { + return
NeuroOcularRelease
; +}; + +export default NeuroOcularRelease; diff --git a/app/osteopathy/page.tsx b/app/osteopathy/page.tsx new file mode 100644 index 0000000..2ec7b9f --- /dev/null +++ b/app/osteopathy/page.tsx @@ -0,0 +1,5 @@ +const Osteopathy = () => { + return
Osteopathy
; +}; + +export default Osteopathy; diff --git a/app/page.tsx b/app/page.tsx index f3a3b8e..8ca06e8 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,113 +1,5 @@ -import Image from 'next/image' +const Home = () => { + return
Home
; +}; -export default function Home() { - return ( -
-
-

- Get started by editing  - app/page.tsx -

-
- - By{' '} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Explore the Next.js 13 playground. -

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ) -} +export default Home; diff --git a/components/Navbar/NavLink.tsx b/components/Navbar/NavLink.tsx new file mode 100644 index 0000000..6ce3df0 --- /dev/null +++ b/components/Navbar/NavLink.tsx @@ -0,0 +1,37 @@ +import Link from "next/link"; +import { ReactNode } from "react"; + +interface Props { + page: string; + currentPage: string; + setCurrentPage: (page: string) => void; + currentPageClasses: string; + children: ReactNode; +} + +const NavLink = ({ + page, + currentPage, + setCurrentPage, + currentPageClasses, + children, +}: Props) => { + const defaultClasses = + "font-bold drop-shadow hover:text-primary-100 transition-all duration-500 "; + + return ( + setCurrentPage(page)} + > + {children} + + ); +}; + +export default NavLink; diff --git a/components/Navbar/NavPages.tsx b/components/Navbar/NavPages.tsx new file mode 100644 index 0000000..fb48de8 --- /dev/null +++ b/components/Navbar/NavPages.tsx @@ -0,0 +1,56 @@ +import { useState } from "react"; +import NavLink from "./NavLink"; + +interface Props { + currentPageClasses: string; +} + +const NavPages = ({ currentPageClasses }: Props) => { + const [currentPage, setCurrentPage] = useState("/"); + return ( + <> + + Home + + + Osteopathy + + + Accupuncture + + + Articles + + + Neuro Ocular Release + + + ); +}; + +export default NavPages; diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx new file mode 100644 index 0000000..4d61a3d --- /dev/null +++ b/components/Navbar/index.tsx @@ -0,0 +1,45 @@ +"use client"; + +import { useState } from "react"; +import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid"; +import NavPages from "./NavPages"; + +const Navbar = () => { + const [menuActive, setMenuActive] = useState(false); + + return ( + + ); +}; + +export default Navbar; diff --git a/next.config.js b/next.config.js index 767719f..658404a 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,4 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {} +const nextConfig = {}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/package.json b/package.json index 86f39bc..244a0e4 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@heroicons/react": "^2.0.18", "@types/node": "20.4.4", "@types/react": "18.2.15", "@types/react-dom": "18.2.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0327424..e74d706 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@heroicons/react': + specifier: ^2.0.18 + version: 2.0.18(react@18.2.0) '@types/node': specifier: 20.4.4 version: 20.4.4 @@ -98,6 +101,14 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: false + /@heroicons/react@2.0.18(react@18.2.0): + resolution: {integrity: sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==} + peerDependencies: + react: '>= 16' + dependencies: + react: 18.2.0 + dev: false + /@humanwhocodes/config-array@0.11.10: resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==} engines: {node: '>=10.10.0'} diff --git a/postcss.config.js b/postcss.config.js index 33ad091..12a703d 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,4 +3,4 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 4332876..282ced6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,7 +29,28 @@ module.exports = { cormorant: ["Cormorant", "serif"], frankRuhl: ["Frank Ruhl Libre", "serif"], }, + screens: { + lg: "1100px", + md: "900px", + }, + keyframes: { + fadeIn: { + "0%": { opacity: "0" }, + "100%": { opacity: "1" }, + }, + fadeOut: { + "0%": { opacity: "1" }, + "100%": { opacity: "0" }, + }, + }, + animation: { + fadeIn: "fadeIn 75ms ease-in", + fadeOut: "fadeOut 500ms ease-out", + }, }, }, plugins: [], + future: { + hoverOnlyWhenSupported: true, + }, };