Merge branch 'master' of ssh://stash.dyson.global.corp:7999/~thowitz/tremor-tracker i think this works?!
This commit is contained in:
IZZY
commit
8f70ac60c6
489
src/app/page.tsx
489
src/app/page.tsx
@ -1,315 +1,214 @@
|
||||
"use client";
|
||||
import useSWR from "swr";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { TbHexagon } from "react-icons/tb";
|
||||
import useSWR from "swr";
|
||||
import BottomFooter from "@components/BottomFooter";
|
||||
import { createPoster } from "@utils/axiosHelpers";
|
||||
import getMagnitudeColor from "@utils/getMagnitudeColour";
|
||||
import { TbHexagon } from "react-icons/tb";
|
||||
|
||||
// formats the date
|
||||
function getRelativeDate(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
if (diffDays === 0) return "today";
|
||||
if (diffDays === 1) return "yesterday";
|
||||
return date.toLocaleDateString();
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
if (diffDays === 0) return "today";
|
||||
if (diffDays === 1) return "yesterday";
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
// copied from sidebar
|
||||
function MagnitudeNumber({ magnitude }: { magnitude: number }) {
|
||||
const magnitudeStr = magnitude.toFixed(1);
|
||||
const [whole, decimal] = magnitudeStr.split(".");
|
||||
|
||||
return (
|
||||
<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
|
||||
<TbHexagon size={40} className="drop-shadow-sm" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex items-baseline font-mono font-bold tracking-tight">
|
||||
<span className="text-xl -mr-1">{whole}</span>
|
||||
<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
|
||||
<span className="text-xs -mr-[1px]">{decimal}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const magnitudeStr = magnitude.toFixed(1);
|
||||
const [whole, decimal] = magnitudeStr.split(".");
|
||||
return (
|
||||
<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
|
||||
<TbHexagon size={40} className="drop-shadow-sm" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex items-baseline font-mono font-bold tracking-tight">
|
||||
<span className="text-xl -mr-1">{whole}</span>
|
||||
<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
|
||||
<span className="text-xs -mr-[1px]">{decimal}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 }));
|
||||
const { data, error, isLoading } = useSWR(
|
||||
"/api/earthquakes",
|
||||
createPoster({ rangeDaysPrev: 6 })
|
||||
);
|
||||
// Take 5 most recent
|
||||
const recents = (data?.earthquakes ?? [])
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
.slice(0, 5);
|
||||
|
||||
// Take 5 most recent
|
||||
const recents = (data?.earthquakes ?? [])
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
.slice(0, 5);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen text-black">
|
||||
<div className="w-full relative">
|
||||
<div>
|
||||
<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
|
||||
<div className="absolute inset-0 top-[30%]">
|
||||
<Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2"></p>
|
||||
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
|
||||
<Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Log new earthquakes with their required details or search past seismic events
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/observatories"
|
||||
className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
|
||||
>
|
||||
<Image height={100} width={100} src="/observe.png" alt="Research Icon" className="h-40 w-40 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Find recently active observatories, and newly opened/closed sites
|
||||
</p>
|
||||
</Link>
|
||||
<Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/artefact.png" alt="Technology Icon" className="h-40 w-40 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
View or purchase recently discovered artefacts from seismic events
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="mt-18"></p>
|
||||
<section className="min-h-screen text-black">
|
||||
<div className="w-full relative z-40">
|
||||
<div>
|
||||
<Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg" />
|
||||
</div>
|
||||
<div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
|
||||
<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
|
||||
<h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
|
||||
Welcome to Tremor Tracker
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission
|
||||
is seismic education and preparation for all
|
||||
</p>
|
||||
<p className="mt-20"></p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
|
||||
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range
|
||||
in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of
|
||||
earthquakes happen every day—but most are too small to feel.
|
||||
</p>
|
||||
<p className="mt-20"></p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
How do we log earthquakes?
|
||||
</p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
What information are we interested in?
|
||||
</p>
|
||||
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
|
||||
<p className="mt-20"></p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
What are observatories?
|
||||
</p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p>
|
||||
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
|
||||
return (
|
||||
<main className="min-h-screen text-black">
|
||||
<div className="w-full relative">
|
||||
<div>
|
||||
<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
|
||||
<div className="absolute inset-0 top-[30%]">
|
||||
<Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2"></p>
|
||||
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
|
||||
<Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Log new earthquakes with their required details or search past seismic events
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/observatories"
|
||||
className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
|
||||
>
|
||||
<Image height={100} width={100} src="/observe.png" alt="Research Icon" className="h-40 w-40 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Find recently active observatories, and newly opened/closed sites
|
||||
</p>
|
||||
</Link>
|
||||
<Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/artefact.png" alt="Technology Icon" className="h-40 w-40 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
View or purchase recently discovered artefacts from seismic events
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="mt-18"></p>
|
||||
<section className="min-h-screen text-black">
|
||||
<div className="w-full relative z-40">
|
||||
<div>
|
||||
<Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg" />
|
||||
</div>
|
||||
<div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
|
||||
<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
|
||||
<h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
|
||||
Welcome to Tremor Tracker
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission
|
||||
is seismic education and preparation for all
|
||||
</p>
|
||||
<p className="mt-20"></p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
|
||||
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range
|
||||
in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of
|
||||
earthquakes happen every day—but most are too small to feel.
|
||||
</p>
|
||||
<p className="mt-20"></p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
How do we log earthquakes?
|
||||
</p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
What information are we interested in?
|
||||
</p>
|
||||
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
|
||||
<p className="mt-20"></p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
What are observatories?
|
||||
</p>
|
||||
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p>
|
||||
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<p className="mt-20"></p>
|
||||
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
|
||||
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
|
||||
Recent Earthquake Events
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-black drop-shadow-md">
|
||||
Learn about the most recent earthquake events from around the world:
|
||||
</p>
|
||||
</section>
|
||||
<p className="mt-6"></p>
|
||||
<div className="mx-auto w-5/6 px-2">
|
||||
{error && (
|
||||
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
|
||||
<p>Failed to load earthquakes.</p>
|
||||
</div>
|
||||
)}
|
||||
{isLoading && (
|
||||
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && recents.length === 0 && (
|
||||
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
|
||||
<p>No earthquakes found.</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-4">
|
||||
{recents.map((eq) => (
|
||||
<div
|
||||
key={eq.code}
|
||||
className="flex items-center justify-between p-4 bg-white rounded-xl shadow border"
|
||||
>
|
||||
<div>
|
||||
<div className="font-semibold">
|
||||
Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{getRelativeDate(eq.date)}
|
||||
</div>
|
||||
<p className="mt-20"></p>
|
||||
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
|
||||
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
|
||||
Recent Earthquake Events
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-black drop-shadow-md">
|
||||
Learn about the most recent earthquake events from around the world:
|
||||
</p>
|
||||
</section>
|
||||
<p className="mt-6"></p>
|
||||
<div className="mx-auto w-5/6 px-2">
|
||||
{error && (
|
||||
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
|
||||
<p>Failed to load earthquakes.</p>
|
||||
</div>
|
||||
)}
|
||||
{isLoading && (
|
||||
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && recents.length === 0 && (
|
||||
<div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
|
||||
<p>No earthquakes found.</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-4">
|
||||
{recents.map((eq) => (
|
||||
<div
|
||||
key={eq.code}
|
||||
className="flex items-center justify-between p-4 bg-white rounded-xl shadow border"
|
||||
>
|
||||
<div>
|
||||
<div className="font-semibold">
|
||||
Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">{getRelativeDate(eq.date)}</div>
|
||||
</div>
|
||||
<MagnitudeNumber magnitude={eq.magnitude} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<MagnitudeNumber magnitude={eq.magnitude} />
|
||||
<p className="mt-20"></p>
|
||||
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
|
||||
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
|
||||
Contact Information
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-black drop-shadow-md">
|
||||
Learn about Tremor Tracker's mission, our team or contact us directly:
|
||||
</p>
|
||||
</section>
|
||||
<p className="mt-2"></p>
|
||||
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
|
||||
<Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Visit our socials or leave us a message via phone or email.
|
||||
</p>
|
||||
</Link>
|
||||
<Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Find out more about our purpose and the features we offer.
|
||||
</p>
|
||||
</Link>
|
||||
<Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Learn about our team leads and their responsibilities.
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-20"></p>
|
||||
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
|
||||
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
|
||||
Contact Information
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-black drop-shadow-md">
|
||||
Learn about Tremor Tracker's mission, our team or contact us directly:
|
||||
</p>
|
||||
</section>
|
||||
<p className="mt-2"></p>
|
||||
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
|
||||
<Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Visit our socials or leave us a message via phone or email.
|
||||
</p>
|
||||
</Link>
|
||||
<Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Find out more about our purpose and the features we offer.
|
||||
</p>
|
||||
</Link>
|
||||
<Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
|
||||
<p className="text-md text-black text-center max-w-xs opacity-90">
|
||||
Learn about our team leads and their responsibilities.
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="mt-10"></p>
|
||||
<section style={{ height: 500 }} className="text-black">
|
||||
<div className="w-full relative overflow-hidden z=10">
|
||||
<div>
|
||||
<Image height={800} width={1500} alt="Background Image" src="/team.PNG" />
|
||||
</div>
|
||||
<BottomFooter />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
|
||||
|
||||
// return (
|
||||
// <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
// <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
|
||||
// <Image
|
||||
// className="dark:invert"
|
||||
// src="/next.svg"
|
||||
// alt="Next.js logo"
|
||||
// width={180}
|
||||
// height={38}
|
||||
// priority
|
||||
// />
|
||||
// <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
// <li className="mb-2">
|
||||
// Get started by editing{" "}
|
||||
// <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
|
||||
// src/app/page.tsx
|
||||
// </code>
|
||||
// .
|
||||
// </li>
|
||||
// <li>Save and see your changes instantly.</li>
|
||||
// </ol>
|
||||
|
||||
// <div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
// <a
|
||||
// className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
|
||||
// href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// >
|
||||
// <Image
|
||||
// className="dark:invert"
|
||||
// src="/vercel.svg"
|
||||
// alt="Vercel logomark"
|
||||
// width={20}
|
||||
// height={20}
|
||||
// />
|
||||
// Deploy now
|
||||
// </a>
|
||||
// <a
|
||||
// className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
|
||||
// href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// >
|
||||
// Read our docs
|
||||
// </a>
|
||||
// </div>
|
||||
// </main>
|
||||
// <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
|
||||
// <a
|
||||
// className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
// href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// >
|
||||
// <Image
|
||||
// aria-hidden
|
||||
// src="/file.svg"
|
||||
// alt="File icon"
|
||||
// width={16}
|
||||
// height={16}
|
||||
// />
|
||||
// Learn
|
||||
// </a>
|
||||
// <a
|
||||
// className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
// href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// >
|
||||
// <Image
|
||||
// aria-hidden
|
||||
// src="/window.svg"
|
||||
// alt="Window icon"
|
||||
// width={16}
|
||||
// height={16}
|
||||
// />
|
||||
// Examples
|
||||
// </a>
|
||||
// <a
|
||||
// className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
// href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// >
|
||||
// <Image
|
||||
// aria-hidden
|
||||
// src="/globe.svg"
|
||||
// alt="Globe icon"
|
||||
// width={16}
|
||||
// height={16}
|
||||
// />
|
||||
// Go to nextjs.org →
|
||||
// </a>
|
||||
// </footer>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
<p className="mt-10"></p>
|
||||
<section style={{ height: 500 }} className="text-black">
|
||||
<div className="w-full relative overflow-hidden z=10">
|
||||
<div>
|
||||
<Image height={800} width={1500} alt="Background Image" src="/team.PNG" />
|
||||
</div>
|
||||
<BottomFooter />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user