Update src/app/blog/page.tsx

Merge version_2 into main

src/app/about-us/page.tsx

@@ -8,6 +8,28 @@ import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSp
 import { Instagram, Linkedin, Twitter } from "lucide-react";
 
 export default function AboutUsPage() {
+  const commonNavItems = [
+    { name: "Home", id: "/" },
+    { name: "About Us", id: "/about-us" },
+    { name: "Founder Story", id: "/founder-story" },
+    { name: "Mission & Vision", id: "/mission-vision" },
+    { name: "Features", id: "/#features" },
+    { name: "Explore Ecosystems", id: "/#explore" },
+    { name: "AI Species Comparison", id: "/ai-species-comparison" },
+    { name: "Dinosaur Universe", id: "/dinosaur-universe" },
+    { name: "Metrics", id: "/#metrics" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "Partners", id: "/#partners" },
+    { name: "FAQ", id: "/faq" },
+    { name: "Contact Us", id: "/contact-us" },
+    { name: "User Profiles", id: "/user-profiles" },
+    { name: "Saved Species", id: "/saved-species" },
+    { name: "Favorite Lists", id: "/favorite-lists" },
+    { name: "Discussion Forums", id: "/forums" },
+    { name: "Expert Articles", id: "/articles" },
+    { name: "Blog", id: "/blog" }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -24,27 +46,14 @@ export default function AboutUsPage() {
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarStyleFullscreen
-            navItems={[
+            navItems={commonNavItems}
-              { name: "Home", id: "/" },
-              { name: "About Us", id: "/about-us" },
-              { name: "Founder Story", id: "/founder-story" },
-              { name: "Mission & Vision", id: "/mission-vision" },
-              { name: "Team", id: "/team" },
-              { name: "Features", id: "#features" },
-              { name: "Explore", id: "#explore" },
-              { name: "Metrics", id: "#metrics" },
-              { name: "Testimonials", id: "#testimonials" },
-              { name: "Partners", id: "#partners" },
-              { name: "FAQ", id: "#faq" },
-              { name: "Contact Us", id: "/contact-us" }
-            ]}
             logoSrc="http://img.b2bpic.net/free-vector/gradient-electronics-logos-pack_23-2148971491.jpg"
             logoAlt="LifeAtlas X"
             brandName="LifeAtlas X"
             bottomLeftText="Global Community"
             bottomRightText="explore@lifeatlasx.com"
             button={{
-              text: "Begin Your Exploration",              href: "#hero"}}
+              text: "Begin Your Exploration",              href: "/#hero"}}
           />
         </div>
 
@@ -84,4 +93,4 @@ export default function AboutUsPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/ai-species-comparison/page.tsx

@@ -8,6 +8,28 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import { Zap, Gauge, Brain, Shield, Leaf, Skull, Handshake, Home, Star, Twitter, Linkedin, Instagram } from "lucide-react";
 
 export default function AISpeciesComparisonPage() {
+  const commonNavItems = [
+    { name: "Home", id: "/" },
+    { name: "About Us", id: "/about-us" },
+    { name: "Founder Story", id: "/founder-story" },
+    { name: "Mission & Vision", id: "/mission-vision" },
+    { name: "Features", id: "/#features" },
+    { name: "Explore Ecosystems", id: "/#explore" },
+    { name: "AI Species Comparison", id: "/ai-species-comparison" },
+    { name: "Dinosaur Universe", id: "/dinosaur-universe" },
+    { name: "Metrics", id: "/#metrics" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "Partners", id: "/#partners" },
+    { name: "FAQ", id: "/faq" },
+    { name: "Contact Us", id: "/contact-us" },
+    { name: "User Profiles", id: "/user-profiles" },
+    { name: "Saved Species", id: "/saved-species" },
+    { name: "Favorite Lists", id: "/favorite-lists" },
+    { name: "Discussion Forums", id: "/forums" },
+    { name: "Expert Articles", id: "/articles" },
+    { name: "Blog", id: "/blog" }
+  ];
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -24,35 +46,14 @@ export default function AISpeciesComparisonPage() {
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarStyleFullscreen
-            navItems={[
+            navItems={commonNavItems}
-              {
-                name: "Home",                id: "#home"},
-              {
-                name: "About",                id: "#about"},
-              {
-                name: "Features",                id: "#features"},
-              {
-                name: "Explore",                id: "#explore"},
-              {
-                name: "AI Species Comparison",                id: "/ai-species-comparison"},
-              {
-                name: "Metrics",                id: "#metrics"},
-              {
-                name: "Testimonials",                id: "#testimonials"},
-              {
-                name: "Partners",                id: "#partners"},
-              {
-                name: "FAQ",                id: "#faq"},
-              {
-                name: "Contact",                id: "#contact"},
-            ]}
             logoSrc="http://img.b2bpic.net/free-vector/gradient-electronics-logos-pack_23-2148971491.jpg"
             logoAlt="LifeAtlas X"
             brandName="LifeAtlas X"
             bottomLeftText="Global Community"
             bottomRightText="explore@lifeatlasx.com"
             button={{
-              text: "Begin Your Exploration",              href: "#hero"}}
+              text: "Begin Your Exploration",              href: "/#hero"}}
           />
         </div>
 
@@ -97,4 +98,4 @@ export default function AISpeciesComparisonPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/articles/page.tsx

@@ -5,21 +5,24 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 export default function ArticlesPage() {
   const commonNavItems = [
     { name: "Home", id: "/" },
-    { name: "About", id: "#about" },
+    { name: "About Us", id: "/about-us" },
-    { name: "Features", id: "#features" },
+    { name: "Founder Story", id: "/founder-story" },
-    { name: "Explore", id: "#explore" },
+    { name: "Mission & Vision", id: "/mission-vision" },
-    { name: "Metrics", id: "#metrics" },
+    { name: "Features", id: "/#features" },
-    { name: "Testimonials", id: "#testimonials" },
+    { name: "Explore Ecosystems", id: "/#explore" },
-    { name: "Partners", id: "#partners" },
+    { name: "AI Species Comparison", id: "/ai-species-comparison" },
-    { name: "FAQ", id: "#faq" },
+    { name: "Dinosaur Universe", id: "/dinosaur-universe" },
-    { name: "Contact", id: "#contact" },
+    { name: "Metrics", id: "/#metrics" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "Partners", id: "/#partners" },
+    { name: "FAQ", id: "/faq" },
+    { name: "Contact Us", id: "/contact-us" },
     { name: "User Profiles", id: "/user-profiles" },
     { name: "Saved Species", id: "/saved-species" },
     { name: "Favorite Lists", id: "/favorite-lists" },
     { name: "Discussion Forums", id: "/forums" },
     { name: "Expert Articles", id: "/articles" },
-    { name: "Wildlife Challenges", id: "/challenges" },
+    { name: "Blog", id: "/blog" }
-    { name: "Careers", id: "/careers" }
   ];
 
   return (

src/app/blog/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Linkedin, Twitter } from "lucide-react";
+
+export default function BlogPage() {
+  const commonNavItems = [
+    { name: "Home", id: "/" },
+    { name: "About Us", id: "/about-us" },
+    { name: "Founder Story", id: "/founder-story" },
+    { name: "Mission & Vision", id: "/mission-vision" },
+    { name: "Features", id: "/#features" },
+    { name: "Explore Ecosystems", id: "/#explore" },
+    { name: "AI Species Comparison", id: "/ai-species-comparison" },
+    { name: "Dinosaur Universe", id: "/dinosaur-universe" },
+    { name: "Metrics", id: "/#metrics" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "Partners", id: "/#partners" },
+    { name: "FAQ", id: "/faq" },
+    { name: "Contact Us", id: "/contact-us" },
+    { name: "User Profiles", id: "/user-profiles" },
+    { name: "Saved Species", id: "/saved-species" },
+    { name: "Favorite Lists", id: "/favorite-lists" },
+    { name: "Discussion Forums", id: "/forums" },
+    { name: "Expert Articles", id: "/articles" },
+    { name: "Blog", id: "/blog" }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="mediumLargeSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={commonNavItems}
+            logoSrc="http://img.b2bpic.net/free-vector/gradient-electronics-logos-pack_23-2148971491.jpg"
+            logoAlt="LifeAtlas X Logo"
+            brandName="LifeAtlas X"
+            bottomLeftText="Global Community"
+            bottomRightText="explore@lifeatlasx.com"
+            button={{
+              text: "Begin Your Exploration",              href: "/"}}
+          />
+        </div>
+
+        <div id="blog-page-content" data-section="blog-page-content">
+          <BlogCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Latest Insights from LifeAtlas X"
+            description="Dive into our articles on biodiversity, AI in science, conservation efforts, and exciting new discoveries."
+            blogs={[
+              {
+                id: "1",                category: "Biodiversity",                title: "The Secret Life of Deep-Sea Hydrothermal Vents",                excerpt: "Explore the extreme ecosystems thriving in the darkest depths of our oceans, powered by chemosynthesis rather than sunlight.",                imageSrc: "http://img.b2bpic.net/free-photo/view-planet-earth-sea-light-reflection_1157-12349.jpg",                imageAlt: "Deep-sea hydrothermal vent",                authorName: "Dr. Elena Petrova",                authorAvatar: "http://img.b2bpic.net/free-photo/young-beautiful-woman-pink-ribbon-breast-cancer-awareness-concept_23-2148750849.jpg",                date: "Oct 26, 2024"},
+              {
+                id: "2",                category: "AI & Science",                title: "How AI is Revolutionizing Species Identification",                excerpt: "Learn how artificial intelligence is accelerating the discovery and classification of new species, from microscopic organisms to unknown plants.",                imageSrc: "http://img.b2bpic.net/free-photo/ai-generated-brain-illustration_23-2149503933.jpg",                imageAlt: "AI brain illustration",                authorName: "Markus Jensen",                authorAvatar: "http://img.b2bpic.net/free-photo/handsome-young-scientist-working-modern-laboratory_23-2148680190.jpg",                date: "Oct 20, 2024"},
+              {
+                id: "3",                category: "Conservation",                title: "The Race to Save the World's Endangered Frogs",                excerpt: "Discover the challenges and innovative solutions being employed globally to protect amphibian populations from extinction.",                imageSrc: "http://img.b2bpic.net/free-photo/red-eyed-tree-frog-agalychnis-callidryas-pennsylvania_11702-866.jpg",                imageAlt: "Red-eyed tree frog",                authorName: "Sophie Dubois",                authorAvatar: "http://img.b2bpic.net/free-photo/pretty-brunette-woman-using-her-laptop_23-2147775560.jpg",                date: "Oct 15, 2024"},
+              {
+                id: "4",                category: "Ecology",                title: "Understanding Keystone Species and Their Ecological Impact",                excerpt: "Explore the critical role certain species play in maintaining the balance and health of their ecosystems, and what happens when they disappear.",                imageSrc: "http://img.b2bpic.net/free-photo/european-wildcat-walking-forest_117188-755.jpg",                imageAlt: "Keystone species illustration",                authorName: "Dr. Alex Chen",                authorAvatar: "http://img.b2bpic.net/free-photo/man-looking-digital-tablet_23-2148641957.jpg",                date: "Oct 10, 2024"},
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="LifeAtlas X"
+            copyrightText="© 2024 LifeAtlas X. All rights reserved."
+            socialLinks={[
+              {
+                icon: Twitter,
+                href: "#",                ariaLabel: "Twitter"},
+              {
+                icon: Linkedin,
+                href: "#",                ariaLabel: "LinkedIn"},
+              {
+                icon: Instagram,
+                href: "#",                ariaLabel: "Instagram"},
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact-us/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import { Twitter, Linkedin, Instagram } from "lucide-react";
+
+export default function ContactUsPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "#about" },
+    { name: "Features", id: "#features" },
+    { name: "Explore", id: "#explore" },
+    { name: "Metrics", id: "#metrics" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "Partners", id: "#partners" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact Us", id: "/contact-us" },
+    { name: "Privacy Policy", id: "/privacy-policy" },
+    { name: "Terms of Service", id: "/terms-of-service" },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="mediumLargeSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-vector/gradient-electronics-logos-pack_23-2148971491.jpg"
+            logoAlt="LifeAtlas X Logo"
+            brandName="LifeAtlas X"
+            bottomLeftText="Global Community"
+            bottomRightText="explore@lifeatlasx.com"
+            button={{
+              text: "Begin Your Exploration",              href: "/"}}
+          />
+        </div>
+
+        <div id="contact-form-section" data-section="contact-form-section">
+          <ContactSplitForm
+            title="Get in Touch"
+            description="We're here to help! Fill out the form below or reach out to us through our social channels."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
+              { name: "email", type: "email", placeholder: "Your Email", required: true },
+            ]}
+            textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
+            buttonText="Send Message"
+            imageSrc="http://img.b2bpic.net/free-photo/communication-connection-technology-internet_1421-43.jpg"
+            imageAlt="People communicating"
+            mediaPosition="right"
+            useInvertedBackground={false}
+            onSubmit={(data) => {
+              console.log("Contact form submitted:", data);
+              alert("Your message has been sent!");
+            }}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="LifeAtlas X"
+            copyrightText="© 2024 LifeAtlas X. All rights reserved."
+            socialLinks={[
+              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+              { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/faq/page.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Linkedin, Twitter } from "lucide-react";
+
+export default function FaqPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="mediumLargeSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Home",                id: "#home"},
+              {
+                name: "About",                id: "#about"},
+              {
+                name: "Features",                id: "#features"},
+              {
+                name: "Explore",                id: "#explore"},
+              {
+                name: "Metrics",                id: "#metrics"},
+              {
+                name: "Testimonials",                id: "#testimonials"},
+              {
+                name: "Partners",                id: "#partners"},
+              {
+                name: "FAQ",                id: "/faq"},
+              {
+                name: "Blog",                id: "/blog"},
+              {
+                name: "Careers",                id: "/careers"},
+              {
+                name: "Support",                id: "/support"},
+              {
+                name: "Contact",                id: "#contact"},
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/gradient-electronics-logos-pack_23-2148971491.jpg"
+            logoAlt="LifeAtlas X Logo"
+            brandName="LifeAtlas X"
+            bottomLeftText="Global Community"
+            bottomRightText="explore@lifeatlasx.com"
+            button={{
+              text: "Begin Your Exploration",              href: "/"}}
+          />
+        </div>
+
+        <div id="faq-page-content" data-section="faq-page-content">
+          <FaqDouble
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Frequently Asked Questions"
+            description="Find answers to common questions about LifeAtlas X, its features, and how to get the most out of your exploration."
+            faqs={[
+              {
+                id: "1",                title: "What is LifeAtlas X?",                content: "LifeAtlas X is an AI-powered digital encyclopedia for exploring Earth's biodiversity. It offers immersive 3D models, real-time data, and interactive tools for students, educators, researchers, and enthusiasts."},
+              {
+                id: "2",                title: "How accurate is the information?",                content: "Our platform synthesizes data from reputable scientific databases, peer-reviewed research, and expert communities, all validated by a team of biologists and AI specialists to ensure high accuracy."},
+              {
+                id: "3",                title: "Can I use LifeAtlas X for my research?",                content: "Absolutely! LifeAtlas X provides advanced comparative analysis tools, extensive data points, and references to scientific literature, making it a powerful resource for academic and professional research."},
+              {
+                id: "4",                title: "Is there a mobile app available?",                content: "Yes, LifeAtlas X is available on both desktop and mobile devices. Our mobile app offers a streamlined experience with full access to 3D models and interactive features on the go."},
+              {
+                id: "5",                title: "How do I report an issue or provide feedback?",                content: "You can report issues or provide feedback directly through our Support Center, accessible from the navigation menu. We highly value user input to continuously improve the platform."},
+              {
+                id: "6",                title: "Are there educational resources for teachers?",                content: "We offer dedicated educational modules, lesson plans, and classroom integration guides for educators. Visit our 'For Educators' section in the Support Center for more details."},
+            ]}
+            faqsAnimation="slide-up"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="LifeAtlas X"
+            copyrightText="© 2024 LifeAtlas X. All rights reserved."
+            socialLinks={[
+              {
+                icon: Twitter,
+                href: "#",                ariaLabel: "Twitter"},
+              {
+                icon: Linkedin,
+                href: "#",                ariaLabel: "LinkedIn"},
+              {
+                icon: Instagram,
+                href: "#",                ariaLabel: "Instagram"},
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}