Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -9,7 +9,9 @@ import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
 import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import BlogCardOne from "@/components/sections/blog/BlogCardOne";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 import {
   TrendingUp,
   BarChart3,
@@ -24,7 +26,93 @@ import {
   Quote,
 } from "lucide-react";
 
+interface NewsItem {
+  id: string;
+  category: string;
+  title: string;
+  excerpt: string;
+  imageSrc: string;
+  imageAlt?: string;
+  authorName: string;
+  authorAvatar: string;
+  date: string;
+}
+
 export default function HomePage() {
+  const [newsItems, setNewsItems] = useState<NewsItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchNews = async () => {
+      try {
+        const response = await fetch(
+          "https://newsapi.org/v2/everything?q=economy+OR+stocks+OR+commodities&sortBy=publishedAt&language=en&pageSize=6",          {
+            headers: {
+              "X-Api-Key": process.env.NEXT_PUBLIC_NEWS_API_KEY || ""},
+          }
+        );
+        const data = await response.json();
+
+        if (data.articles) {
+          const transformedNews: NewsItem[] = data.articles.map(
+            (article: any, index: number) => ({
+              id: `${index}`,
+              category: "Markets",              title: article.title || "Market Update",              excerpt:
+                article.description ||
+                article.content?.substring(0, 150) ||
+                "New market insights and economic data.",              imageSrc:
+                article.urlToImage ||
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/a-sophisticated-financial-analytics-dash-1772905169454-6a395dc8.png?_wi=1",              imageAlt: article.title || "News article image",              authorName: article.author || "MacroPulse",              authorAvatar:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-confident-fin-1772905169205-67b33284.png",              date: new Date(article.publishedAt).toLocaleDateString("en-US", {
+                year: "numeric",                month: "short",                day: "numeric"}),
+            })
+          );
+          setNewsItems(transformedNews);
+        }
+      } catch (error) {
+        console.error("Error fetching news:", error);
+        setNewsItems(getDemoNewsItems());
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchNews();
+  }, []);
+
+  const getDemoNewsItems = (): NewsItem[] => [
+    {
+      id: "1",      category: "Markets",      title: "S&P 500 Reaches New All-Time High",      excerpt:
+        "The stock market continues its upward trajectory with major indices posting strong gains amid positive economic data.",      imageSrc:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/an-animated-market-ticker-showing-stock--1772905169008-f6c878de.png?_wi=1",      imageAlt: "Market ticker",      authorName: "MacroPulse",      authorAvatar:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-confident-fin-1772905169205-67b33284.png",      date: "Today"},
+    {
+      id: "2",      category: "Commodities",      title: "Oil Prices Rally on Supply Concerns",      excerpt:
+        "Crude oil futures jumped 3% following reports of potential production delays in major oil-producing regions.",      imageSrc:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/a-comprehensive-chart-showing-commodity--1772905170329-d43eb2c6.png?_wi=1",      imageAlt: "Commodity chart",      authorName: "MacroPulse",      authorAvatar:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-confident-fin-1772905169205-67b33284.png",      date: "Yesterday"},
+    {
+      id: "3",      category: "Economic Data",      title: "CPI Inflation Moderates Below Expectations",      excerpt:
+        "Consumer Price Index report shows inflation cooling faster than anticipated, signaling potential Fed policy shifts.",      imageSrc:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/a-dashboard-showing-key-economic-indicat-1772905170137-bcb35709.png?_wi=1",      imageAlt: "Economic indicators",      authorName: "MacroPulse",      authorAvatar:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-confident-fin-1772905169205-67b33284.png",      date: "2 days ago"},
+    {
+      id: "4",      category: "Markets",      title: "Tech Stocks Lead Market Recovery",      excerpt:
+        "Major technology companies drive broader market gains as investors rotate into growth-oriented sectors.",      imageSrc:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/an-animated-market-ticker-showing-stock--1772905169008-f6c878de.png?_wi=2",      imageAlt: "Tech stocks",      authorName: "MacroPulse",      authorAvatar:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-confident-fin-1772905169205-67b33284.png",      date: "3 days ago"},
+    {
+      id: "5",      category: "Commodities",      title: "Gold Hits Six-Month High Amid Geopolitical Tensions",      excerpt:
+        "Precious metals gain momentum as investors seek safe-haven assets during periods of global uncertainty.",      imageSrc:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/a-comprehensive-chart-showing-commodity--1772905170329-d43eb2c6.png?_wi=2",      imageAlt: "Gold prices",      authorName: "MacroPulse",      authorAvatar:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-confident-fin-1772905169205-67b33284.png",      date: "4 days ago"},
+    {
+      id: "6",      category: "Economic Data",      title: "Unemployment Rate Stays Near Historic Lows",      excerpt:
+        "Labor market remains resilient with jobless claims continuing their downward trend, supporting economic outlook.",      imageSrc:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/a-dashboard-showing-key-economic-indicat-1772905170137-bcb35709.png?_wi=2",      imageAlt: "Employment data",      authorName: "MacroPulse",      authorAvatar:
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-confident-fin-1772905169205-67b33284.png",      date: "5 days ago"},
+  ];
+
   const navItems = [
     { name: "Markets", id: "/markets" },
     { name: "Commodities", id: "commodities" },
@@ -232,6 +320,10 @@ export default function HomePage() {
               id: "1",              name: "Marcus Chen",              role: "Portfolio Manager",              testimonial:
                 "MacroPulse transformed how we track macro trends. The correlation analysis between commodities and equities is invaluable for our hedge fund operations.",              imageSrc:
                 "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-confident-fin-1772905169205-67b33284.png?_wi=1",              imageAlt: "Marcus Chen"},
+            {
+              id: "6",              name: "Victoria Santos",              role: "Hedge Fund Manager",              testimonial:
+                "The economic calendar and correlation analysis tools have become critical to our macro strategy. MacroPulse is an excellent addition to our analytics toolkit.",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-female-financ-1772905169322-0e76fff3.png?_wi=2",              imageAlt: "Victoria Santos"},
             {
               id: "2",              name: "Sarah Williams",              role: "Financial Analyst",              testimonial:
                 "The real-time economic indicator updates keep us ahead of market movements. It's like having Bloomberg Terminal integrated with modern web design.",              imageSrc:
@@ -248,10 +340,6 @@ export default function HomePage() {
               id: "5",              name: "James Kim",              role: "Risk Analyst",              testimonial:
                 "MacroPulse provides institutional-quality analytics at a fraction of traditional terminal costs. Highly recommended for serious market participants.",              imageSrc:
                 "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-confident-fin-1772905169205-67b33284.png?_wi=2",              imageAlt: "James Kim"},
-            {
-              id: "6",              name: "Victoria Santos",              role: "Hedge Fund Manager",              testimonial:
-                "The economic calendar and correlation analysis tools have become critical to our macro strategy. MacroPulse is an excellent addition to our analytics toolkit.",              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcwKjmqX8hXdoaRHFrjpfUV87p/professional-headshot-of-a-female-financ-1772905169322-0e76fff3.png?_wi=2",              imageAlt: "Victoria Santos"},
           ]}
           animationType="blur-reveal"
           title="Trusted by Financial Professionals"
@@ -264,6 +352,24 @@ export default function HomePage() {
         />
       </div>
 
+      {/* News Feed Section */}
+      {!loading && newsItems.length > 0 && (
+        <div id="news" data-section="news">
+          <BlogCardOne
+            blogs={newsItems}
+            animationType="slide-up"
+            title="Latest Market News"
+            description="Stay informed with real-time market updates, economic data releases, and financial insights."
+            tag="Market Updates"
+            tagIcon={Bell}
+            tagAnimation="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            carouselMode="buttons"
+          />
+        </div>
+      )}
+
       {/* Contact/CTA Section */}
       <div id="contact" data-section="contact">
         <ContactCTA
@@ -293,4 +399,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}