Update src/app/features/page.tsx

Merge version_7 into main

src/app/features/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function FeaturesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="largeSizeMediumTitles"
+        background="aurora"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Features", id: "/features" },
+              { name: "Impact", id: "/" },
+              { name: "FAQ", id: "/" },
+              { name: "Contact", id: "/" },
+            ]}
+            brandName="OceanImpact"
+          />
+        </div>
+
+        <div id="features" data-section="features">
+          <FeatureCardTwelve
+            animationType="slide-up"
+            textboxLayout="split-description"
+            title="Environmental Impacts of Cruise Ships"
+            description="An in-depth look at how the cruise ship industry affects our oceans and coastal ecosystems."
+            useInvertedBackground={false}
+            features={[
+              {
+                id: "f1",                label: "Marine Health",                title: "Water Pollution",                items: [
+                  "Illegal discharge of bilge water containing oils and hazardous chemicals.",                  "Release of sewage contaminated with fecal matter, nutrients, and heavy metals.",                  "Microplastic and plastics contamination through wastewater treatment systems."
+                ]
+              },
+              {
+                id: "f2",                label: "Atmosphere",                title: "Air Quality & Emissions",                items: [
+                  "Heavy fuel oil combustion releasing massive sulfur dioxide (SO2) amounts.",                  "High carbon emissions contributing to localized climate warming and glacier melt.",                  "Health hazards for coastal cities and port residents from particulate matter (PM)."
+                ]
+              },
+              {
+                id: "f3",                label: "Ecology",                title: "Physical Ecosystem Damage",                items: [
+                  "Physical destruction of coral reefs through anchor drops and propeller wash.",                  "Disruption of marine life behavioral patterns due to continuous underwater noise pollution.",                  "Invasive species spread through untreated ballast water discharge and hurts ecosystems."
+                ]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="OceanImpact: Cruise Ships"
+            columns={[
+              { title: "Resources", items: [{ label: "Research", href: "#" }, { label: "Policies", href: "#" }] },
+              { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Contact", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,6 +33,8 @@ export default function LandingPage() {
       navItems={[
         {
           name: "Home",          id: "hero"},
+        {
+          name: "Features",          id: "/features"},
         {
           name: "Impact",          id: "pollution"},
         {
@@ -51,7 +53,7 @@ export default function LandingPage() {
       tag="Environmental Research"
       buttons={[
         {
-          text: "Learn More",          href: "#pollution"},
+          text: "Learn More",          href: "/features"},
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARLkjU9t1ru27ZaFOKNjNfRfIu/uploaded-1776534908646-pya809c0.jpg"
       showBlur={true}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #020617;
-  --card: #0f172a;
-  --foreground: #e2e8f0;
-  --primary-cta: #c4d8f9;
-  --primary-cta-text: #020617;
-  --secondary-cta: #041633;
-  --secondary-cta-text: #e2e8f0;
-  --accent: #2d30f3;
-  --background-accent: #1d4ed8;
+  --background: #fbfaff;
+  --card: #f7f5ff;
+  --foreground: #0f0022;
+  --primary-cta: #8b5cf6;
+  --primary-cta-text: #fbfaff;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #0f0022;
+  --accent: #d8cef5;
+  --background-accent: #c4a8f9;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);