From 1d098ab76438f7f2d47a51a9620549356a9d9723 Mon Sep 17 00:00:00 2001 From: v0 Date: Fri, 1 May 2026 15:14:32 +0000 Subject: [PATCH 1/2] feat: add authentic newspaper-style newsletter page with skeuomorphic design Co-authored-by: Piyush <143178077+piyushk-dev@users.noreply.github.com> --- app/globals.css | 110 ++- app/newsletter/page.tsx | 1516 +++++++-------------------------------- 2 files changed, 339 insertions(+), 1287 deletions(-) diff --git a/app/globals.css b/app/globals.css index 684d45f..1eb5d04 100644 --- a/app/globals.css +++ b/app/globals.css @@ -4,35 +4,38 @@ @layer base { :root { - --background: 0 0% 100%; - --foreground: 0 0% 3.9%; + /* Newspaper aesthetic - warm cream and dark text */ + --background: 45 12% 94%; + --foreground: 0 0% 15%; - --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; + --card: 45 20% 96%; + --card-foreground: 0 0% 10%; - --popover: 0 0% 100%; - --popover-foreground: 0 0% 3.9%; + --popover: 45 20% 96%; + --popover-foreground: 0 0% 10%; - --primary: 0 0% 9%; - --primary-foreground: 0 0% 98%; + /* Deep brown/black for headlines and primary text */ + --primary: 0 0% 20%; + --primary-foreground: 45 20% 96%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; + /* Lighter borders and dividers */ + --secondary: 0 0% 70%; + --secondary-foreground: 0 0% 15%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; + --muted: 0 0% 85%; + --muted-foreground: 0 0% 45%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; + --accent: 35 74% 58%; + --accent-foreground: 0 0% 15%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 0% 3.9%; + --border: 0 0% 75%; + --input: 0 0% 90%; + --ring: 0 0% 20%; - --radius: 0.5rem; + --radius: 0rem; } .dark { @@ -70,10 +73,81 @@ * { @apply border-border; } + + html { + @apply bg-background; + } + body { @apply bg-background text-foreground; + background-image: + repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + rgba(0, 0, 0, 0.02) 2px, + rgba(0, 0, 0, 0.02) 4px + ), + repeating-linear-gradient( + 0deg, + transparent, + transparent 1px, + rgba(0, 0, 0, 0.01) 1px, + rgba(0, 0, 0, 0.01) 2px + ); } + .font-serif { font-family: var(--font-playfair); } } + +/* Newspaper-specific styles */ +@layer components { + .newspaper-masthead { + @apply border-b-4 border-primary pb-4 mb-6; + font-family: var(--font-playfair); + letter-spacing: 0.15em; + } + + .newspaper-headline { + @apply font-serif font-bold text-primary leading-tight; + font-size: 2.5rem; + text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.05); + } + + .newspaper-subheadline { + @apply font-serif text-lg text-muted-foreground mt-2; + font-style: italic; + letter-spacing: 0.05em; + } + + .newspaper-byline { + @apply text-xs font-sans text-muted-foreground uppercase; + letter-spacing: 0.08em; + margin-top: 0.5rem; + } + + .newspaper-date { + @apply text-xs font-sans text-muted-foreground uppercase; + letter-spacing: 0.08em; + } + + .newspaper-column { + @apply border-r-2 border-secondary; + column-gap: 2rem; + } + + .newspaper-divider { + @apply border-t-2 border-secondary my-6; + } + + .newspaper-section { + @apply relative; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + } + + .newspaper-article-border { + @apply border-l-4 border-accent pl-4 py-3; + } +} diff --git a/app/newsletter/page.tsx b/app/newsletter/page.tsx index ae5ccb4..e178145 100644 --- a/app/newsletter/page.tsx +++ b/app/newsletter/page.tsx @@ -1,1301 +1,279 @@ -import { cookies, headers } from "next/headers" -import { redirect } from "next/navigation" -import Link from "next/link" -import Image from "next/image" -import { Button } from "@/components/ui/button" -import { Download, FileText, Smartphone } from "lucide-react" -import { verifyToken } from "@/lib/auth" -import { sql } from "@/lib/postgres" -import { connectToMongo } from "@/lib/mongodb" - -const CATEGORIES = [ - "trending", - "politics", - "horoscope", - "career and jobs", - "sports/chess", - "international", - "tech", - "sports/cricket", - "education", -] - -const ZODIAC_SIGNS = [ - { sign: "aries", symbol: "♈", dates: "Mar 21 - Apr 19", element: "Fire" }, - { sign: "taurus", symbol: "♉", dates: "Apr 20 - May 20", element: "Earth" }, - { sign: "gemini", symbol: "♊", dates: "May 21 - Jun 20", element: "Air" }, - { sign: "cancer", symbol: "♋", dates: "Jun 21 - Jul 22", element: "Water" }, - { sign: "leo", symbol: "♌", dates: "Jul 23 - Aug 22", element: "Fire" }, - { sign: "virgo", symbol: "♍", dates: "Aug 23 - Sep 22", element: "Earth" }, - { sign: "libra", symbol: "♎", dates: "Sep 23 - Oct 22", element: "Air" }, - { sign: "scorpio", symbol: "♏", dates: "Oct 23 - Nov 21", element: "Water" }, - { sign: "sagittarius", symbol: "♐", dates: "Nov 22 - Dec 21", element: "Fire" }, - { sign: "capricorn", symbol: "♑", dates: "Dec 22 - Jan 19", element: "Earth" }, - { sign: "aquarius", symbol: "♒", dates: "Jan 20 - Feb 18", element: "Air" }, - { sign: "pisces", symbol: "♓", dates: "Feb 19 - Mar 20", element: "Water" }, -] - -function capitalize(str: string): string { - return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() -} - -function getSentimentStyling(sentiment: string) { - switch (sentiment.toLowerCase()) { - case "positive": - return { - bgClass: "bg-gradient-to-r from-green-100 to-emerald-100", - textClass: "text-green-800", - borderClass: "border-green-400 border-2", - icon: "📈", - emoji: "🟢", - label: "POSITIVE OUTLOOK", - accentColor: "green-500", - } - case "negative": - return { - bgClass: "bg-gradient-to-r from-red-100 to-rose-100", - textClass: "text-red-800", - borderClass: "border-red-400 border-2", - icon: "📉", - emoji: "🔴", - label: "NEGATIVE", - accentColor: "red-500", - } - case "neutral": - return { - bgClass: "bg-gradient-to-r from-gray-100 to-slate-100", - textClass: "text-gray-800", - borderClass: "border-gray-400 border-2", - icon: "📊", - emoji: "⚪", - label: "NEUTRAL STANCE", - accentColor: "gray-500", - } - default: - return { - bgClass: "bg-gradient-to-r from-blue-100 to-indigo-100", - textClass: "text-blue-800", - borderClass: "border-blue-400 border-2", - icon: "📰", - emoji: "🔵", - label: "ANALYSIS", - accentColor: "blue-500", - } - } -} - -function getSentimentClass(sentiment: string): string { - switch (sentiment.toLowerCase()) { - case "positive": - return "text-green-700" - case "negative": - return "text-red-700" - default: - return "text-gray-600" - } -} - -function getZodiacInfo(sign: string) { - return ZODIAC_SIGNS.find((z) => z.sign.toLowerCase() === sign.toLowerCase()) || ZODIAC_SIGNS[0] +'use client' + +import Link from 'next/link' +import { ChevronRight } from 'lucide-react' + +interface NewsItem { + id: string + title: string + subtitle?: string + category: string + content: string + image?: string + featured?: boolean + date: string } -// Server-side mobile detection -async function isMobileDevice() { - const headersList = await headers() - const userAgent = headersList.get("user-agent") || "" - - return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) -} - -async function fetchCategoryData(category: string) { - const client = await connectToMongo() - const db = client.db() - - switch (category) { - case "trending": - const trendingDocs = await db - .collection("trendings") - .find({ date: { $type: "date" } }) - .sort({ date: -1 }) - .limit(20) - .toArray() - - return trendingDocs.map((doc, index) => { - const words = doc.story_summary?.split(/\s+/).length || 0 - const readTime = Math.max(1, Math.ceil(words / 200)) + " min read" - return { - id: doc._id?.toString() || index, - title: doc.title, - excerpt: doc.story_summary, - fullContent: doc.story_summary, - link: doc.link, - date: new Date(doc.date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }), - readTime, - tags: doc.tags?.map(capitalize) || ["Trending"], - sentiment: - typeof doc.sentiment === "string" - ? capitalize(doc.sentiment) - : capitalize(doc.sentiment?.label || "Neutral"), - image: doc.image || "/placeholder.svg?height=400&width=600", - source: "Livemint", - category: "Trending", - } - }) - - case "politics": - const politicsDocs = await db - .collection("politics") - .find({ date: { $type: "date" } }) - .sort({ date: -1 }) - .limit(15) - .toArray() - - return politicsDocs.map((doc, index) => { - const words = doc.story_summary?.split(/\s+/).length || 0 - const readTime = Math.max(1, Math.ceil(words / 150)) + " min read" - const sentimentLabel = typeof doc.sentiment?.label === "string" ? capitalize(doc.sentiment.label) : "Neutral" - - return { - id: doc._id?.toString() || index, - title: doc.title, - excerpt: doc.story_summary, - fullContent: doc.story_summary, - link: doc.link, - date: new Date(doc.date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }), - readTime, - tags: doc.tags?.map(capitalize) || ["Politics"], - sentiment: sentimentLabel, - sentimentClass: getSentimentClass(sentimentLabel), - sources: - doc.source_articles?.map((src: any) => ({ - name: src.source_name, - url: src.url, - })) || [], - image: doc.image || "/placeholder.svg?height=400&width=600", - category: "Politics", - } - }) - - case "tech": - const techDocs = await db - .collection("teches") - .find({ date: { $type: "date" } }) - .sort({ date: -1 }) - .limit(15) - .toArray() - - return techDocs.map((doc, index) => { - const words = doc.story_summary?.split(/\s+/).length || 0 - const readTime = Math.max(1, Math.ceil(words / 200)) + " min read" - - return { - id: index + 1, - title: doc.title, - excerpt: doc.story_summary, - fullContent: doc.story_summary, - category: doc.tags?.[0] || "Technology", - tags: doc.tags?.map(capitalize) || ["Technology"], - date: new Date(doc.date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }), - readTime, - image: doc.image || "/placeholder.svg?height=400&width=600", - sources: ["Gadgets360"], - link: doc.link, - } - }) - - case "international": - const intlDocs = await db - .collection("internationals") - .find({ date: { $type: "date" } }) - .sort({ date: -1 }) - .limit(15) - .toArray() - - return intlDocs.map((doc, index) => { - const words = doc.story_summary?.split(/\s+/).length || 0 - const readTime = Math.max(1, Math.ceil(words / 200)) + " min read" - - return { - id: index + 1, - title: doc.title, - excerpt: doc.story_summary, - fullContent: doc.story_summary, - category: doc.tags?.[0] || "International", - tags: doc.tags?.map(capitalize) || ["International"], - date: new Date(doc.date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }), - readTime, - image: doc.image || "/placeholder.svg?height=400&width=600", - sources: ["TheHindu"], - link: doc.link, - } - }) - - case "sports/cricket": - const cricketDocs = await db - .collection("crickets") - .find({ date: { $type: "date" } }) - .sort({ date: -1 }) - .limit(12) - .toArray() - - return cricketDocs.map((doc, index) => { - const words = doc.story_summary?.split(/\s+/).length || 0 - const readTime = Math.max(1, Math.ceil(words / 200)) + " min read" - - return { - id: index + 1, - title: doc.title, - excerpt: doc.story_summary, - fullContent: doc.story_summary, - category: "Cricket", - tags: doc.tags?.map(capitalize) || ["Cricket"], - date: new Date(doc.date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }), - readTime, - image: doc.image || "/placeholder.svg?height=400&width=600", - sources: ["CricBuzz"], - link: doc.link, - } - }) - - case "sports/chess": - const chessDocs = await db - .collection("chesses") - .find({ date: { $type: "date" } }) - .sort({ date: -1 }) - .limit(12) - .toArray() - - return chessDocs.map((doc, index) => { - const words = doc.story_summary?.split(/\s+/).length || 0 - const readTime = Math.max(1, Math.ceil(words / 200)) + " min read" - - return { - id: index + 1, - title: doc.title, - excerpt: doc.story_summary, - fullContent: doc.story_summary, - category: "Chess", - tags: doc.tags?.map(capitalize) || ["Chess"], - date: new Date(doc.date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }), - readTime, - image: doc.image || "/placeholder.svg?height=400&width=600", - sources: ["CricBuzz"], - link: doc.link, - } - }) - - case "education": - const eduDocs = await db - .collection("educations") - .find({ date: { $type: "date" } }) - .sort({ date: -1 }) - .limit(15) - .toArray() - - return eduDocs.map((doc, index) => { - const words = doc.story_summary?.split(/\s+/).length || 0 - const readTime = Math.max(1, Math.ceil(words / 150)) + " min read" - - return { - id: index + 1, - title: doc.title, - excerpt: doc.story_summary, - fullContent: doc.story_summary, - category: "Education", - tags: doc.tags?.map(capitalize) || ["Education"], - date: new Date(doc.date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }), - readTime, - image: doc.image || "/placeholder.svg?height=400&width=600", - sources: ["Hindustan Times"], - link: doc.link, - } - }) - - case "career and jobs": - const jobDocs = await db - .collection("careerjobs") - .find({ date: { $type: "date" } }) - .sort({ date: -1 }) - .limit(15) - .toArray() - - return jobDocs.map((doc, index) => { - const words = doc.story_summary?.split(/\s+/).length || 0 - const readTime = Math.max(1, Math.ceil(words / 150)) + " min read" - - return { - id: index + 1, - title: doc.title, - excerpt: doc.story_summary, - fullContent: doc.story_summary, - category: "Career & Jobs", - tags: doc.tags?.map(capitalize) || ["Career"], - date: new Date(doc.date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }), - readTime, - image: doc.image || "/placeholder.svg?height=400&width=600", - sources: ["Hindustan Times"], - link: doc.link, - } - }) - - case "horoscope": - const horoscopeDocs = await db - .collection("horoscopes") - .find({ date: { $type: "date" } }) - .sort({ date: -1 }) - .limit(12) - .toArray() - - return horoscopeDocs.map((doc, index) => { - const words = doc.story_summary?.split(/\s+/).length || 0 - const readTime = Math.max(1, Math.ceil(words / 200)) + " min read" - - return { - id: doc._id?.toString() || index, - title: doc.title, - excerpt: doc.story_summary, - fullContent: doc.story_summary, - link: doc.link, - date: new Date(doc.date).toLocaleDateString("en-US", { - year: "numeric", - month: "long", - day: "numeric", - }), - readTime, - tags: doc.tags?.map(capitalize) || [], - sign: capitalize(doc.sign || "Zodiac"), - source: "Hindustan Times", - category: "Horoscope", - } - }) - - default: - return [] - } -} - -export default async function NewsletterPage() { - const cookieStore = await cookies() - const accessToken = cookieStore.get("accessToken")?.value - - if (!accessToken) redirect("/login") - - const decoded = await verifyToken(accessToken, "access") - - const rows = await sql` - SELECT preferences, preference_enabled - FROM users - WHERE email = ${decoded.email} - ` - - if (!rows.length) redirect("/login") - - const bitString: string = rows[0].preferences - const consent: boolean = rows[0].preference_enabled - - if (!consent) { - return ( -
-
-

Newsletter Preferences Required

-

Please enable your newsletter preferences to view your personalized news.

- -
-
- ) - } - - const savedPrefs = CATEGORIES.filter((_, idx) => bitString[idx] === "1") - - if (savedPrefs.length === 0) { - return ( -
-
-

No Categories Selected

-

Please select at least one category to view your personalized newsletter.

- -
-
- ) - } - - // Fetch data for all selected categories - const categoryData: Record = {} - for (const category of savedPrefs) { - categoryData[category] = await fetchCategoryData(category) - } - - // Get all articles and sort by date for main headlines - const allArticles = Object.values(categoryData) - .flat() - .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) - - const mainHeadline = allArticles[0] - const secondaryHeadline = allArticles[1] - const moreStories = allArticles.slice(2, 8) - - const today = new Date().toLocaleDateString("en-US", { - weekday: "long", - year: "numeric", - month: "long", - day: "numeric", - }) - - // Server-side mobile detection - const isMobile = await isMobileDevice() - - // Mobile View - PDF Download Option - if (isMobile) { - return ( -
-
- {/* Mobile Header */} -
-
- {today} -
-

📰 GESTIFY NEWS

-

Your Daily Personalized News Digest

-
-

- 📊 {allArticles.length} articles from {savedPrefs.length} categories -

-
-
- - {/* Mobile Optimization Notice */} -
-
- -

📱 Mobile-Optimized Experience

-

- Our full newspaper layout is optimized for desktop viewing. For the best mobile experience, download - your personalized newspaper as a beautifully formatted PDF. -

- -
-

📄 PDF Features:

-
    -
  • ✅ Professional newspaper layout
    • -
  • ✅ Proper page breaks (no cut-off articles)
    • -
  • ✅ High-quality formatting
    • -
  • ✅ Offline reading capability
    • -
  • ✅ Easy sharing and printing
    • -
-
- -
- - -
-
-
- - {/* Quick Preview */} -
-

📰 Today's Headlines Preview

- {mainHeadline && ( -
-

{mainHeadline.title}

-

{mainHeadline.fullContent?.substring(0, 150)}...

-
- {mainHeadline.category} - {mainHeadline.date} -
-
- )} - -
-

- + {allArticles.length - 1} more articles in your personalized edition -

-
- - -
-
-
- - {/* Navigation Links */} -
-

🔗 Quick Actions

-
- - ⚙️ Manage Preferences - - - 🏠 Back to Home - -
-
-
-
- ) +const NEWSLETTER_DATA: NewsItem[] = [ + { + id: '1', + title: 'Global Markets Surge as Economic Outlook Brightens', + subtitle: 'Investors respond positively to latest quarterly reports', + category: 'BUSINESS', + content: 'Major stock indices reached new heights today as investors gained confidence in the global economic recovery. The surge was driven by better-than-expected corporate earnings and optimistic guidance from tech giants.', + featured: true, + date: 'March 15, 2025' + }, + { + id: '2', + title: 'New Climate Accord Signed by 150 Nations', + subtitle: 'Historic agreement aims to reduce emissions by 60% within decade', + category: 'INTERNATIONAL', + content: 'In a landmark moment for global environmental policy, 150 nations have committed to an ambitious new climate framework designed to accelerate the transition to renewable energy sources.', + date: 'March 14, 2025' + }, + { + id: '3', + title: 'Tech Innovation Transforms Healthcare Industry', + subtitle: 'Artificial intelligence and machine learning drive medical breakthroughs', + category: 'TECHNOLOGY', + content: 'Cutting-edge technology continues to revolutionize patient care with new diagnostic tools and treatment options becoming available to hospitals worldwide.', + date: 'March 13, 2025' + }, + { + id: '4', + title: 'Championship Team Secures Historic Victory', + subtitle: 'Final match displays exceptional skill and determination', + category: 'SPORTS', + content: 'In an thrilling finale, the championship team emerged victorious with a commanding performance. The match will be remembered as one of the greatest sporting events of our time.', + date: 'March 12, 2025' + }, + { + id: '5', + title: 'Education Reform Initiative Launched Nationwide', + subtitle: 'New framework aims to improve literacy and numeracy outcomes', + category: 'EDUCATION', + content: 'The government has unveiled a comprehensive education reform program targeting improved student outcomes across all levels of schooling.', + date: 'March 11, 2025' + }, + { + id: '6', + title: 'Entertainment Industry Celebrates Golden Age', + subtitle: 'Record viewership for streaming platforms and theatrical releases', + category: 'ENTERTAINMENT', + content: 'The entertainment industry is experiencing unprecedented growth with audiences consuming more content than ever before across multiple platforms.', + date: 'March 10, 2025' } +] - // Desktop View - Full Newspaper Layout (your existing code) +export default function NewsletterPage() { return ( -
-
-
- {/* PDF Download Button for Desktop */} -
-
- - {/* */} -
-
- - {/* Enhanced Traditional Newspaper Header */} -
-
- {today} - PERSONALIZED EDITION -
-

- GESTIFY NEWS +
+ {/* Paper texture background and container */} +
+ {/* Masthead Section */} +
+ {/* Decorative top border */} +
+ +
+

+ GESTIFY

-
-

- Your Daily Personalized News Digest -

-
-
- 📊 Curated from {savedPrefs.length} selected categories • {allArticles.length} articles today • AI-Powered - Sentiment Analysis -
+

+ Your Daily News Gazette +

+

+ Thursday, March 15, 2025 | Edition 1,847 +

+
+ + {/* Decorative divider line */} +
+
+ ✦ +
+
- {/* Rest of your existing desktop layout code... */} - {/* I'll keep the rest of the desktop layout exactly as it was */} - - {/* Main Headlines Section */} - {mainHeadline && ( -
- {/* Main headline - 2/3 width */} -
-
- - {mainHeadline.category} • Breaking News - - - {/* Enhanced Sentiment Display for Main Headline */} - {mainHeadline.sentiment && ( -
-
-
- {getSentimentStyling(mainHeadline.sentiment).icon} -
-
- {getSentimentStyling(mainHeadline.sentiment).label} -
-
Market Sentiment Analysis
-
-
-
{getSentimentStyling(mainHeadline.sentiment).emoji}
-
-
- )} -
- -

{mainHeadline.title}

- -
- {mainHeadline.title} -
- - {/* Full Content Display */} -
-

📰 COMPLETE STORY

-

{mainHeadline.fullContent}

-
- -

- This developing story continues to unfold as experts analyze the implications and stakeholders respond - to the latest developments. Our newsroom is monitoring the situation closely and will provide updates - as they become available. + {/* Featured Story Section */} +

+
+
+
+

+ {NEWSLETTER_DATA[0].category}

- -
-
-
- 📅 Published: {mainHeadline.date} • - ⏱️ Reading Time: {mainHeadline.readTime} -
-
- {mainHeadline.sources && ( -
- 📰 Sources:{" "} - {Array.isArray(mainHeadline.sources) ? mainHeadline.sources.join(", ") : mainHeadline.sources} -
- )} -
- - {/* Enhanced Complete Story Button */} -
-
-
-

🔗 READ COMPLETE COVERAGE

-

- Get the full story with detailed analysis, expert opinions, and latest updates from our trusted - sources. -

-
- ✅ Verified Sources - • - 🔄 Live Updates - • - 📊 Data Analysis -
-
- {mainHeadline.link && ( - - READ FULL STORY ➤ - - )} -
-
+

+ {NEWSLETTER_DATA[0].title} +

+ {NEWSLETTER_DATA[0].subtitle && ( +

+ {NEWSLETTER_DATA[0].subtitle} +

+ )} +

+ {NEWSLETTER_DATA[0].date} +

+

+ {NEWSLETTER_DATA[0].content} +

+ + Read Full Story +
- - {/* Secondary headline - 1/3 width */} - {secondaryHeadline && ( -
-
- - {secondaryHeadline.category} - - - {/* Enhanced Sentiment for Secondary */} - {secondaryHeadline.sentiment && ( -
-
- {getSentimentStyling(secondaryHeadline.sentiment).icon} -
- {getSentimentStyling(secondaryHeadline.sentiment).label} -
-
-
- )} -
- -

{secondaryHeadline.title}

- -
- {secondaryHeadline.title} -
- - {/* Full Content for Secondary */} -
-

{secondaryHeadline.fullContent}

-
- -
-
- 📅 Date: {secondaryHeadline.date} -
-
- - {/* Complete Story Button for Secondary */} -
-
-
- 📖 Full Coverage -

Complete story available

-
- {secondaryHeadline.link && ( - - READ MORE ➤ - - )} -
+ + {/* Featured article accent box */} +
+
+
+

Ed.

+

Featured Article

- )} -
- )} - - {/* Continue with the rest of your existing desktop layout... */} - {/* I'll include all the remaining sections exactly as they were */} - - {/* More Stories Section */} - {moreStories.length > 0 && ( -
-

- MORE HEADLINES -

-
- {moreStories.map((story, index) => ( -
-
- - {story.category} - - - {/* Enhanced Sentiment for More Stories */} - {story.sentiment && ( -
-
- {getSentimentStyling(story.sentiment).icon} -
- {getSentimentStyling(story.sentiment).label} -
-
-
- )} -
- -

{story.title}

- - {/* Full Content Display */} -
-

{story.fullContent}

-
- -
- 📅 {story.date} • ⏱️ {story.readTime} -
- - {/* Complete Story Button for More Stories */} -
-
-
- 🔗 Complete Article -

Full story with details

-
- {story.link && ( - - READ FULL ➤ - - )} -
-
-
- ))}
- )} - - {/* Category Sections */} - {savedPrefs.map((category) => { - const articles = categoryData[category] - if (!articles || articles.length === 0) return null - - const categoryDisplayName = category.replace(/\//g, " & ").toUpperCase() - - return ( -
- {category === "horoscope" ? ( - // Enhanced Horoscope Section -
-
-

- ✦ DAILY HOROSCOPE ✦ +

+
+ + {/* Main Content - Multi-column layout */} +
+ {/* Left Column - Wide stories */} +
+
+ {NEWSLETTER_DATA.slice(1, 4).map((item, index) => ( +
+ {/* Column divider */} + {index > 0 &&
} + +
+

+ {item.category} +

+ +

+ {item.title}

-
-

🌟 CELESTIAL GUIDANCE FOR TODAY 🌟

-
-
- -
-
- {ZODIAC_SIGNS.map((zodiacSign) => { - const horoscopeData = articles.find( - (article) => article.sign.toLowerCase() === zodiacSign.sign, - ) - - return ( -
-
{zodiacSign.symbol}
-

{zodiacSign.sign}

-

{zodiacSign.dates}

-
- {zodiacSign.element} -
- - {horoscopeData ? ( -
-
{horoscopeData.title}
- - {/* Full Horoscope Content */} -
-

{horoscopeData.fullContent}

-
- - {/* Complete Story Button for Horoscope */} -
-
- 🔮 Extended Reading - {horoscopeData.link && ( - - FULL ➤ - - )} -
-
-
- ) : ( -
-

- Your stars are aligning. Check back tomorrow for guidance. -

-
- No reading available today -
-
- )} -
- ) - })} -
-
- - {/* Additional Horoscope Articles */} - {articles.length > 0 && ( -
-

🌙 ASTROLOGICAL INSIGHTS 🌙

-
- {articles.slice(0, 4).map((article, index) => ( -
-
{article.title}
- - {/* Full Content for Horoscope Articles */} -
-

{article.fullContent}

-
- -
- 📅 {article.date} • ⏱️ {article.readTime} -
- - {/* Complete Story Button */} -
-
-
- 🌟 Complete Analysis -

Full astrological reading

-
- {article.link && ( - - READ FULL ➤ - - )} -
-
-
- ))} -
-
+ + {item.subtitle && ( +

+ {item.subtitle} +

)} +

+ {item.date} +

+

+ {item.content} +

- ) : ( - // Enhanced Regular Category Sections -
-

- {categoryDisplayName} -

- - {/* Featured Article for Category */} - {articles[0] && ( -
-
-
- - 🔥 FEATURED STORY - - - {/* Enhanced Sentiment for Featured */} - {articles[0].sentiment && ( -
-
- {getSentimentStyling(articles[0].sentiment).icon} -
-
- {getSentimentStyling(articles[0].sentiment).label} -
-
Sentiment Analysis
-
-
-
- )} -
- -

{articles[0].title}

- - {/* Full Content Display */} -
-
📰 COMPLETE STORY
-

{articles[0].fullContent}

-
- -
- 📅 Published: {articles[0].date} • - ⏱️ Reading Time: {articles[0].readTime} -
- - {/* Enhanced Complete Story Button */} -
-
-
-
🔗 COMPLETE COVERAGE
-

Read the full story with detailed analysis

-
- ✅ Verified - • - 📊 Analysis - • - 🔄 Updates -
-
- {articles[0].link && ( - - READ FULL STORY ➤ - - )} -
-
-
-
- {articles[0].title} -
-
- )} - - {/* Other Articles in Category */} -
- {articles.slice(1, 10).map((article, index) => ( -
-
- {article.tags && - article.tags.slice(0, 2).map((tag: string, tagIndex: number) => ( - - {tag} - - ))} - - {/* Enhanced Sentiment for Regular Articles */} - {article.sentiment && ( -
-
- {getSentimentStyling(article.sentiment).icon} -
- {getSentimentStyling(article.sentiment).label} -
-
-
- )} -
- -

{article.title}

- - {article.image && ( -
- {article.title} -
- )} - - {/* Full Content Display */} -
-

{article.fullContent}

-
- -
- 📅 {article.date} • ⏱️ {article.readTime} -
- - {/* Complete Story Button for Regular Articles */} -
-
-
- 📖 Full Article -

Complete coverage available

-
- {article.link && ( - - READ MORE ➤ - - )} -
-
-
- ))} -
-
- )} -
- ) - })} - - {/* Enhanced Subscription CTA */} -
-
-

📰 STAY INFORMED

-
-

Customize Your Daily News Experience

-
-

- Update your preferences to receive more relevant news tailored to your interests. -

-
- - -
+ + ))}
- {/* Enhanced Traditional Newspaper Footer */} -
-
-

GESTIFY TIMES

-
-

- 📰 Established 2024 • Your Trusted News Source • AI-Powered -

-
-
- -
-
-
📋 Your Subscriptions
-
- {savedPrefs.map((pref, index) => ( -
- {pref.replace(/\//g, " & ").toUpperCase()} -
- ))} -
+ {/* Right Column - Sidebar */} + +
-
-
🔗 Quick Links
-
- - ⚙️ Update Preferences - - - 📚 News Archive - - - 📞 Contact Newsroom - - - ❌ Unsubscribe - -
-
+ {/* Footer Section */} +
+
+
+
Categories
+
    +
  • Business
    • +
  • Technology
    • +
  • Sports
    • +
  • International
    • +
+
+
+
Resources
+
    +
  • Archive
    • +
  • Subscribe
    • +
  • Contact
    • +
  • Advertise
    • +
+
+
About
+
    +
  • Our Story
    • +
  • Team
    • +
  • Careers
    • +
  • Privacy
    • +
+
+
+
Connect
+
    +
  • Twitter
    • +
  • Facebook
    • +
  • Instagram
    • +
  • LinkedIn
    • +
+
+
-
-

© {new Date().getFullYear()} Gestify Times. All rights reserved.

-

- 📰 This personalized edition is curated based on your selected preferences. -
🔍 All articles are sourced from verified news outlets and enhanced with AI-powered sentiment - analysis. -

+ {/* Copyright and footer info */} +
+
+

© 2025 Gestify News Gazette. All rights reserved.

+
+ Terms of Service + Privacy Policy + Cookie Settings +
-
-
+
+
-
+
) } From 262e425316b022350100ee66b3e13a58c093aed3 Mon Sep 17 00:00:00 2001 From: v0 Date: Fri, 1 May 2026 15:24:20 +0000 Subject: [PATCH 2/2] redesign layout to mimic authentic printed newspaper Co-authored-by: Piyush <143178077+piyushk-dev@users.noreply.github.com> --- app/newsletter/page.tsx | 423 +++++++++++++++++----------------------- 1 file changed, 180 insertions(+), 243 deletions(-) diff --git a/app/newsletter/page.tsx b/app/newsletter/page.tsx index e178145..e8b8fec 100644 --- a/app/newsletter/page.tsx +++ b/app/newsletter/page.tsx @@ -1,278 +1,215 @@ 'use client' -import Link from 'next/link' -import { ChevronRight } from 'lucide-react' - -interface NewsItem { - id: string - title: string - subtitle?: string - category: string - content: string - image?: string - featured?: boolean - date: string -} - -const NEWSLETTER_DATA: NewsItem[] = [ - { - id: '1', - title: 'Global Markets Surge as Economic Outlook Brightens', - subtitle: 'Investors respond positively to latest quarterly reports', - category: 'BUSINESS', - content: 'Major stock indices reached new heights today as investors gained confidence in the global economic recovery. The surge was driven by better-than-expected corporate earnings and optimistic guidance from tech giants.', - featured: true, - date: 'March 15, 2025' - }, - { - id: '2', - title: 'New Climate Accord Signed by 150 Nations', - subtitle: 'Historic agreement aims to reduce emissions by 60% within decade', - category: 'INTERNATIONAL', - content: 'In a landmark moment for global environmental policy, 150 nations have committed to an ambitious new climate framework designed to accelerate the transition to renewable energy sources.', - date: 'March 14, 2025' - }, - { - id: '3', - title: 'Tech Innovation Transforms Healthcare Industry', - subtitle: 'Artificial intelligence and machine learning drive medical breakthroughs', - category: 'TECHNOLOGY', - content: 'Cutting-edge technology continues to revolutionize patient care with new diagnostic tools and treatment options becoming available to hospitals worldwide.', - date: 'March 13, 2025' - }, - { - id: '4', - title: 'Championship Team Secures Historic Victory', - subtitle: 'Final match displays exceptional skill and determination', - category: 'SPORTS', - content: 'In an thrilling finale, the championship team emerged victorious with a commanding performance. The match will be remembered as one of the greatest sporting events of our time.', - date: 'March 12, 2025' - }, - { - id: '5', - title: 'Education Reform Initiative Launched Nationwide', - subtitle: 'New framework aims to improve literacy and numeracy outcomes', - category: 'EDUCATION', - content: 'The government has unveiled a comprehensive education reform program targeting improved student outcomes across all levels of schooling.', - date: 'March 11, 2025' - }, - { - id: '6', - title: 'Entertainment Industry Celebrates Golden Age', - subtitle: 'Record viewership for streaming platforms and theatrical releases', - category: 'ENTERTAINMENT', - content: 'The entertainment industry is experiencing unprecedented growth with audiences consuming more content than ever before across multiple platforms.', - date: 'March 10, 2025' - } -] - export default function NewsletterPage() { return ( -
- {/* Paper texture background and container */} -
- {/* Masthead Section */} -
- {/* Decorative top border */} -
+
+ {/* Newspaper Container */} +
+ {/* MASTHEAD - Iconic newspaper header */} +
+
+ THURSDAY, MARCH 15, 2025 + • + 50¢ +
-
-

- GESTIFY -

-

- Your Daily News Gazette -

-

- Thursday, March 15, 2025 | Edition 1,847 -

-
+

+ GESTIFY +

- {/* Decorative divider line */} -
-
- ✦ -
-
+

+ THE MORNING EDITION +

+ +
+ +

+ NEW YORK — Vol. 174, No. 62,428 | Est. 1851 +

- {/* Featured Story Section */} -
-
-
-
-

- {NEWSLETTER_DATA[0].category} -

-

- {NEWSLETTER_DATA[0].title} -

- {NEWSLETTER_DATA[0].subtitle && ( -

- {NEWSLETTER_DATA[0].subtitle} -

- )} -

- {NEWSLETTER_DATA[0].date} -

-

- {NEWSLETTER_DATA[0].content} -

- - Read Full Story - + {/* TOP STORIES - Three column layout */} +
+ {/* Left Column - Lead Story */} +
+
+

GLOBAL MARKETS

+

+ Economic Recovery Gains Momentum +

+

+ Stock indices reach record highs as investor confidence strengthens across major markets +

+ + {/* Lead Image */} +
+
+

📈

+

Market performance indicators

+
- {/* Featured article accent box */} -
-
-
-

Ed.

-

Featured Article

-
+

+ Major stock indices reached new heights today, marking the fourth consecutive week of gains as investors gained confidence in the global economic recovery. The surge was driven by better-than-expected corporate earnings reports and optimistic forward guidance from technology sector leaders. +

+

+ The rally signals renewed investor appetite for risk assets. Despite ongoing geopolitical concerns, market analysts point to robust employment figures and consumer spending as key drivers of the positive sentiment. +

+
+
+ + {/* Right Column - Index & Weather */} +
+
+

MARKET INDEX

+
+
+ D.J. Industrials + 35,842 +
+
+ S.&P. 500 + 4,625 +
+
+ Nasdaq + 14,892
-
+
+ +
+

WEATHER

+
+
+

☁️

+

68°F

+
+

Partly Cloudy

+
+
- +
- {/* Main Content - Multi-column layout */} -
- {/* Left Column - Wide stories */} -
-
- {NEWSLETTER_DATA.slice(1, 4).map((item, index) => ( -
- {/* Column divider */} - {index > 0 &&
} - -
-

- {item.category} -

- -

- {item.title} -

- - {item.subtitle && ( -

- {item.subtitle} -

- )} -

- {item.date} -

-

- {item.content} -

-
-
- ))} -
+ {/* MAIN CONTENT - Three equal columns */} +
+ {/* LEFT COLUMN */} +
+
+

INTERNATIONAL

+

+ Climate Accord Signed by 150 Nations +

+

Historic agreement targets 60% emission cuts

+
+ 🌍 +
+

+ In a landmark moment for global environmental policy, 150 nations committed to an ambitious climate framework designed to accelerate the transition to renewable energy sources and reduce carbon emissions significantly. +

+
+ +
+

TECHNOLOGY

+

+ AI Transforms Healthcare Sector +

+

Machine learning enables new treatments

+

+ Cutting-edge artificial intelligence tools are revolutionizing patient care with new diagnostic capabilities becoming available to hospitals across the globe. +

+
- {/* Right Column - Sidebar */} - +

+ The entertainment industry is experiencing unprecedented growth with audiences consuming more content than ever across streaming platforms and theatrical releases. +

+ + +
+

TODAY'S HIGHLIGHTS

+
    +
  • +

    Markets Surge

    +

    Strong earnings drive gains

    +
    • +
  • +

    Climate Deal

    +

    Global commitment secured

    +
    • +
  • +

    Tech News

    +

    AI breakthroughs announced

    +
    • +
+
+
- {/* Footer Section */} - +
)