added consult page

Arbourmy · Mar 31, 2024 · ba500f8 · ba500f8
1 parent 85cdb8f
commit ba500f8
Show file tree

Hide file tree

Showing 12 changed files with 297 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -8,10 +8,10 @@
     "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
     "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
     "build:server": "tsc --project tsconfig.server.json",
-	"build:next": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NEXT_BUILD=true node dist/server.js",
+    "build:next": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NEXT_BUILD=true node dist/server.js",
     "build": "cross-env NODE_ENV=production pnpm build:payload && pnpm build:server && pnpm copyfiles && pnpm build:next",
     "start": "copyfiles -u dist/next.config.js /app && cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/ && copyfiles next.config.js dist/  ", 
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/ && copyfiles next.config.js dist/  ",
     "lint": "next lint"
   },
   "resolutions": {
@@ -52,6 +52,7 @@
     "lucide-react": "^0.363.0",
     "next": "14.1.4",
     "payload": "^2.11.2",
+    "pigeon-maps": "^0.21.4",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.2",
@@ -64,6 +65,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.8",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/...ite. The scene should depict a welcoming medical environment with a .webp:Zone.Identifier b/...ite. The scene should depict a welcoming medical environment with a .webp:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://chat.openai.com/
diff --git a/public/hero.webp b/public/hero.webp
diff --git a/src/app/consult/page.tsx b/src/app/consult/page.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import MapContainer from "@/components/MapContainer"
+import MaxWidthWrapper from "@/components/MaxWidthWrapper"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import Image from "next/image"
+import Link from "next/link"
+
+const Page = () => {
+	return (
+		<>
+
+			<section className="relative bg-cover bg-center bg-no-repeat">
+				<Image
+					fill
+					src="/hero.webp"
+					className="absolute inset-0 w-full h-full object-cover"
+					alt="thank you for your order"
+				/>
+				<div className="absolute inset-0 bg-blue-400/75 sm:bg-transparent sm:from-blue-400/95 sm:to-blue-400/50 ltr:sm:bg-gradient-to-r sm:bg-gradient-to-l"></div>
+
+				<div className="relative mx-auto max-w-screen-xl px-4 py-32 sm:px-6 lg:flex lg:h-screen lg:items-center lg:px-8">
+					<div className="max-w-xl text-center ltr:sm:text-left m:text-right">
+						<h1 className="text-3xl font-extrabold sm:text-5xl text-white">
+							Let us guide you to your
+							<strong className="block font-extrabold text-blue-600"> Perfect Health Partner </strong>
+						</h1>
+
+						<p className="mt-4 max-w-lg sm:text-xl text-left text-white font-medium">
+							Find your ideal health ally with us, where personalized care meets expertise. Start your journey to wellness today with a consultation that understands you.
+						</p>
+
+						<div className="mt-8 flex flex-wrap gap-4 text-center">
+							<Link
+								href='#map'
+								className={
+									cn(buttonVariants({
+									variant: 'default',
+									size: 'lg',
+								}), "w-full px-12 sm:w-auto")}>
+								Get Started
+							</Link>
+
+							<a
+								href="#"
+								className="block w-full rounded border-white border-2 bg-transparent px-12 py-3 text-sm text-white font-medium hover:bg-white shadow hover:text-blue-700 ease-in-out focus:outline-none focus:ring active:text-blue-500 sm:w-auto"
+							>
+								Learn More
+							</a>
+						</div>
+					</div>
+				</div>
+			</section>
+			{/* <MaxWidthWrapper className="mt-12"> */}
+			<MapContainer />
+			{/* </MaxWidthWrapper> */}
+		</>
+	)
+}
+
+export default Page
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -103,3 +103,31 @@
 .wallet-adapter-button-trigger {
   @apply !px-3 text-gray-700 h-10 hover:!bg-accent inline-flex items-center justify-center whitespace-nowrap rounded-md text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
 }
+
+.hero {
+	@apply min-h-full bg-cover;
+	background: linear-gradient(
+		0deg,
+		rgba(113, 205, 248, 0.3),
+		rgba(9, 121, 248, 0.3)
+		),
+		url(https://picsum.photos/id/1043/800/600);
+}
+
+.leaflet-container {
+	width: 100%;
+	height: 100vh;
+  }
+
+.leaflet-bottom,
+.leaflet-control,
+.leaflet-pane,
+.leaflet-top {
+  z-index: 0 !important;
+}
+
+.map-ui {
+	top: 40%;
+	left: 50%;
+	transform: translateX(-50%);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,30 +13,37 @@ const inter = Inter({ subsets: ["latin"] });
 export const metadata = constructMetadata
 
 export default function RootLayout({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }) {
-  return (
-    <WalletContextProvider>
-      <html lang="en" className="h-full">
-        <body
-          className={cn(
-            "relative h-full font-sans antialiased",
-            inter.className
-          )}
-        >
-          <main className="relative flex flex-col min-h-screen">
-            <Providers>
-              <Navbar />
-              <div className="flex-grow flex-1">{children}</div>
-              <Footer />
-            </Providers>
-          </main>
+	return (
+		<WalletContextProvider>
+			<html lang="en" className="h-full">
+				<head>
+					<link
+						rel="stylesheet"
+						href="https://unpkg.com/[email protected]/dist/leaflet.css"
+						integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+					/>
+				</head>
+				<body
+					className={cn(
+						"relative h-full font-sans antialiased",
+						inter.className
+					)}
+				>
+					<main className="relative flex flex-col min-h-screen">
+						<Providers>
+							<Navbar />
+							<div className="flex-grow flex-1">{children}</div>
+							<Footer />
+						</Providers>
+					</main>
 
-          <Toaster position="top-center" richColors />
-        </body>
-      </html>
-    </WalletContextProvider>
-  );
+					<Toaster position="top-center" richColors />
+				</body>
+			</html>
+		</WalletContextProvider>
+	);
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -36,7 +36,7 @@ const Footer = () => {
 
                 <div className='text-center relative mx-auto max-w-sm'>
                   <h3 className='font-semibold text-gray-900'>
-                    Become a seller
+                    Join us
                   </h3>
                   <p className='mt-2 text-sm text-muted-foreground'>
                     If you&apos;d like to sell high-quality

diff --git a/src/components/MapContainer.tsx b/src/components/MapContainer.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Map, Marker } from 'pigeon-maps';
+import COORDS from '@/config';
+import { Button } from './ui/button';
+
+export function MapContainer() {
+	const [showPrompt, setShowPrompt] = useState(true);
+
+	const hidePrompt = () => {
+		setShowPrompt(false);
+	};
+
+	return (
+		<div className='relative bg-cover bg-center bg-no-repeat' id="map">
+			{showPrompt && (
+				<>
+					<div className="z-[1000] absolute map-ui text-center">
+						<p className='text-3xl text-white mb-2 italic font-semibold'>Find your nearest clinic</p>
+						<Button onClick={hidePrompt} size="lg" className="px-12 w-full sm:w-auto border-[2.5px] border-blue-600 bg-transparent font-semibold" variant="default">Show me</Button>
+					</div>
+					<div className="z-[999] absolute inset-x-0 top-[-1px] bottom-0 bg-blue-600/75 sm:bg-transparent sm:from-blue-500/95 sm:to-blue-500/25 ltr:sm:bg-gradient-to-r sm:bg-gradient-to-l"></div>
+				</>
+			)}
+			<div className='pt-0'>
+				<Map height={500} defaultCenter={[3.1390, 101.6869]} defaultZoom={11}>
+					{COORDS.map((coordinate, index) => (
+						<Marker key={index} width={50} anchor={coordinate as [number, number]} />
+					))}
+				</Map>
+			</div>
+		</div>
+	);
+}
+
+export default MapContainer;
diff --git a/src/components/NavItems.tsx b/src/components/NavItems.tsx
@@ -4,54 +4,67 @@ import { PRODUCT_CATEGORIES } from "@/config";
 import { useEffect, useRef, useState } from "react";
 import NavItem from "./NavItem";
 import { useOnClickOutside } from "@/hooks/use-on-click-outside";
+import { buttonVariants } from "./ui/button";
+import Link from "next/link";
 
 const NavItems = () => {
-  const [activeIndex, setActiveIndex] = useState<null | number>(null);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        setActiveIndex(null);
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-
-  const isAnyOpen = activeIndex !== null;
-
-  const navRef = useRef<HTMLDivElement | null>(null);
-
-  useOnClickOutside(navRef, () => setActiveIndex(null));
-
-  return (
-    <div className="flex gap-4 h-full" ref={navRef}>
-      {PRODUCT_CATEGORIES.map((category, i) => {
-        const handleOpen = () => {
-          if (activeIndex === i) {
-            setActiveIndex(null);
-          } else {
-            setActiveIndex(i);
-          }
-        };
-
-        const isOpen = i === activeIndex;
-        return (
-          <NavItem
-            category={category}
-            handleOpen={handleOpen}
-            isOpen={isOpen}
-            key={category.value}
-            isAnyOpen={isAnyOpen}
-          />
-        );
-      })}
-    </div>
-  );
+	const [activeIndex, setActiveIndex] = useState<null | number>(null);
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				setActiveIndex(null);
+			}
+		};
+
+		document.addEventListener("keydown", handleKeyDown);
+
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, []);
+
+	const isAnyOpen = activeIndex !== null;
+
+	const navRef = useRef<HTMLDivElement | null>(null);
+
+	useOnClickOutside(navRef, () => setActiveIndex(null));
+
+	return (
+		<div className="flex gap-4 h-full" ref={navRef}>
+			{PRODUCT_CATEGORIES.map((category, i) => {
+				const handleOpen = () => {
+					if (activeIndex === i) {
+						setActiveIndex(null);
+					} else {
+						setActiveIndex(i);
+					}
+				};
+
+				const isOpen = i === activeIndex;
+				return (
+					<NavItem
+						category={category}
+						handleOpen={handleOpen}
+						isOpen={isOpen}
+						key={category.value}
+						isAnyOpen={isAnyOpen}
+					/>
+				);
+			})}
+			<div className="flex">
+				<div className="relative flex items-center">
+					<Link
+						href='/consult'
+						className={buttonVariants({
+							variant: 'ghost',
+						})}>
+						Consult us
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export default NavItems;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -15,7 +15,7 @@ const Navbar = async () => {
   const { user } = await getServerSideUser(nextCookies)
 
   return (
-    <div className='bg-white sticky z-50 top-0 inset-x-0 h-16'>
+    <div className='bg-white sticky z-50 top-0 inset-x-0 h-16 z-[10000]'>
       <header className='relative bg-white'>
         <MaxWidthWrapper>
           <div className='border-b border-gray-200'>