Merge version_1 into main #1
180
src/app/page.tsx
180
src/app/page.tsx
@@ -29,21 +29,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Natural Hazards",
|
||||
id: "hazards",
|
||||
},
|
||||
name: "Natural Hazards", id: "hazards"},
|
||||
{
|
||||
name: "Marine Life",
|
||||
id: "marine-life",
|
||||
},
|
||||
name: "Marine Life", id: "marine-life"},
|
||||
{
|
||||
name: "Safety Guide",
|
||||
id: "safety",
|
||||
},
|
||||
name: "Safety Guide", id: "safety"},
|
||||
]}
|
||||
brandName="OceanSafety"
|
||||
/>
|
||||
@@ -52,65 +44,40 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Respect the Power of the Ocean"
|
||||
description="The sea is vast, unpredictable, and majestic. Understanding its hazards is the first step toward true maritime safety and awareness."
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn Safety",
|
||||
href: "#safety",
|
||||
},
|
||||
text: "Learn Safety", href: "#safety"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-seaside-waves_23-2150527965.jpg"
|
||||
imageAlt="Powerful ocean wave"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/dramatic-ocean-waves-cloudy-day_84443-81819.jpg",
|
||||
alt: "Expert sailor A",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/dramatic-ocean-waves-cloudy-day_84443-81819.jpg", alt: "Expert sailor A"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-seaside-waves_23-2150527975.jpg",
|
||||
alt: "Expert sailor B",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-seaside-waves_23-2150527975.jpg", alt: "Expert sailor B"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/wave-crashing-against-majestic-wet-rock-formation-generative-ai_188544-12661.jpg",
|
||||
alt: "Expert sailor C",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/wave-crashing-against-majestic-wet-rock-formation-generative-ai_188544-12661.jpg", alt: "Expert sailor C"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-waves_58702-10913.jpg",
|
||||
alt: "Expert sailor D",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-waves_58702-10913.jpg", alt: "Expert sailor D"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/seniors-sailing_1098-15800.jpg",
|
||||
alt: "Expert sailor E",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/seniors-sailing_1098-15800.jpg", alt: "Expert sailor E"},
|
||||
]}
|
||||
avatarText="Trusted by 500+ maritime safety professionals"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Safety First",
|
||||
},
|
||||
type: "text", text: "Safety First"},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-sky_58702-10539.jpg",
|
||||
alt: "Marquee item 1",
|
||||
},
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-sky_58702-10539.jpg", alt: "Marquee item 1"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Know the Tides",
|
||||
},
|
||||
type: "text", text: "Know the Tides"},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-sky_58702-10540.jpg",
|
||||
alt: "Marquee item 2",
|
||||
},
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-sky_58702-10540.jpg", alt: "Marquee item 2"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Protect the Coast",
|
||||
},
|
||||
type: "text", text: "Protect the Coast"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -122,35 +89,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Rip Currents",
|
||||
description: "Powerful, narrow channels of fast-moving water. If caught, swim parallel to the shore.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-waves_58702-16430.jpg",
|
||||
imageAlt: "Rip current warning",
|
||||
},
|
||||
title: "Rip Currents", description: "Powerful, narrow channels of fast-moving water. If caught, swim parallel to the shore.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-photo-sea-waves_58702-16430.jpg", imageAlt: "Rip current warning"},
|
||||
{
|
||||
title: "Rogue Waves",
|
||||
description: "Unexpectedly large and dangerous waves that can appear suddenly in calm or rough seas.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tall-foamy-waves-atlantic-ocean-near-nazare-municipality-portugal_181624-36848.jpg",
|
||||
imageAlt: "Rogue wave",
|
||||
},
|
||||
title: "Rogue Waves", description: "Unexpectedly large and dangerous waves that can appear suddenly in calm or rough seas.", imageSrc: "http://img.b2bpic.net/free-photo/tall-foamy-waves-atlantic-ocean-near-nazare-municipality-portugal_181624-36848.jpg", imageAlt: "Rogue wave"},
|
||||
{
|
||||
title: "Maritime Storms",
|
||||
description: "Rapid shifts in weather patterns can lead to catastrophic maritime conditions.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dolphin-digital-art_23-2151529287.jpg",
|
||||
imageAlt: "Maritime storm",
|
||||
},
|
||||
title: "Maritime Storms", description: "Rapid shifts in weather patterns can lead to catastrophic maritime conditions.", imageSrc: "http://img.b2bpic.net/free-photo/dolphin-digital-art_23-2151529287.jpg", imageAlt: "Maritime storm"},
|
||||
{
|
||||
title: "Tsunamis",
|
||||
description: "High-impact waves triggered by undersea seismic activity, requiring immediate evacuation to high ground.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-sea_181624-13107.jpg",
|
||||
imageAlt: "Tsunami warning",
|
||||
},
|
||||
title: "Tsunamis", description: "High-impact waves triggered by undersea seismic activity, requiring immediate evacuation to high ground.", imageSrc: "http://img.b2bpic.net/free-photo/people-sea_181624-13107.jpg", imageAlt: "Tsunami warning"},
|
||||
{
|
||||
title: "Shifting Sands",
|
||||
description: "Coastal erosion creates unpredictable underwater topography that can trap swimmers.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/marine-life-abstract-oil_23-2148227175.jpg",
|
||||
imageAlt: "Shifting coastal sands",
|
||||
},
|
||||
title: "Shifting Sands", description: "Coastal erosion creates unpredictable underwater topography that can trap swimmers.", imageSrc: "http://img.b2bpic.net/free-photo/marine-life-abstract-oil_23-2148227175.jpg", imageAlt: "Shifting coastal sands"},
|
||||
]}
|
||||
title="Natural Marine Hazards"
|
||||
description="Hidden dangers lie within the tides. Be prepared by recognizing these critical environmental threats."
|
||||
@@ -159,58 +106,23 @@ export default function LandingPage() {
|
||||
|
||||
<div id="marine-life" data-section="marine-life">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Great White Shark",
|
||||
price: "High Risk",
|
||||
variant: "Predator",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dangerous-shark-underwater_23-2150318487.jpg",
|
||||
imageAlt: "Great White Shark",
|
||||
},
|
||||
id: "1", name: "Great White Shark", price: "High Risk", variant: "Predator", imageSrc: "http://img.b2bpic.net/free-photo/dangerous-shark-underwater_23-2150318487.jpg", imageAlt: "Great White Shark"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Box Jellyfish",
|
||||
price: "Extreme Risk",
|
||||
variant: "Venomous",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-cyanea-water_181624-56414.jpg",
|
||||
imageAlt: "Box Jellyfish",
|
||||
},
|
||||
id: "2", name: "Box Jellyfish", price: "Extreme Risk", variant: "Venomous", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-cyanea-water_181624-56414.jpg", imageAlt: "Box Jellyfish"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Stonefish",
|
||||
price: "High Risk",
|
||||
variant: "Camouflaged",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fresh-fish-sale_23-2148263850.jpg",
|
||||
imageAlt: "Stonefish",
|
||||
},
|
||||
id: "3", name: "Stonefish", price: "High Risk", variant: "Camouflaged", imageSrc: "http://img.b2bpic.net/free-photo/close-up-fresh-fish-sale_23-2148263850.jpg", imageAlt: "Stonefish"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Lionfish",
|
||||
price: "Moderate Risk",
|
||||
variant: "Venomous",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-large-shark-swimming-underwater-reefs-with-scuba-diver-background_181624-9546.jpg",
|
||||
imageAlt: "Lionfish",
|
||||
},
|
||||
id: "4", name: "Lionfish", price: "Moderate Risk", variant: "Venomous", imageSrc: "http://img.b2bpic.net/free-photo/closeup-large-shark-swimming-underwater-reefs-with-scuba-diver-background_181624-9546.jpg", imageAlt: "Lionfish"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Blue-Ringed Octopus",
|
||||
price: "Fatal Risk",
|
||||
variant: "Small",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cloud-blue-ink-splattered-water_23-2147744719.jpg",
|
||||
imageAlt: "Octopus",
|
||||
},
|
||||
id: "5", name: "Blue-Ringed Octopus", price: "Fatal Risk", variant: "Small", imageSrc: "http://img.b2bpic.net/free-photo/cloud-blue-ink-splattered-water_23-2147744719.jpg", imageAlt: "Octopus"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Stingray",
|
||||
price: "Moderate Risk",
|
||||
variant: "Defense",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-puffer-fish_23-2150777170.jpg",
|
||||
imageAlt: "Stingray",
|
||||
},
|
||||
id: "6", name: "Stingray", price: "Moderate Risk", variant: "Defense", imageSrc: "http://img.b2bpic.net/free-photo/view-puffer-fish_23-2150777170.jpg", imageAlt: "Stingray"},
|
||||
]}
|
||||
title="Dangerous Marine Life"
|
||||
description="Know the species that command caution. These inhabitants are essential to the ecosystem, but dangerous to humans."
|
||||
@@ -234,22 +146,14 @@ export default function LandingPage() {
|
||||
description="Have questions about maritime safety standards or need specific advice for your next voyage? Contact our team."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message here...",
|
||||
rows: 4,
|
||||
name: "message", placeholder: "Your message here...", rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/underwater-portrait-scuba-diver-exploring-sea-world_23-2151456205.jpg"
|
||||
@@ -263,29 +167,19 @@ export default function LandingPage() {
|
||||
logoText="OceanSafety"
|
||||
columns={[
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "Hazards Guide",
|
||||
href: "#hazards",
|
||||
},
|
||||
label: "Hazards Guide", href: "#hazards"},
|
||||
{
|
||||
label: "Marine Life Index",
|
||||
href: "#marine-life",
|
||||
},
|
||||
label: "Marine Life Index", href: "#marine-life"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Safety",
|
||||
items: [
|
||||
title: "Safety", items: [
|
||||
{
|
||||
label: "Swimming Protocols",
|
||||
href: "#safety",
|
||||
},
|
||||
label: "Swimming Protocols", href: "#safety"},
|
||||
{
|
||||
label: "Emergency Info",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Emergency Info", href: "#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user