Celebgae Homepage Full May 2026

Title: Trending on Celebgae
Subtitle: The stories the world is refreshing for.

Three dynamic cards (with image + headline + timestamp):

[ View All Trending ] link

The homepage loads in under 1.5 seconds using lazy-loaded images and CDN delivery. On mobile, the navigation collapses into a bottom-drawer menu (thumb-friendly) and the grid simplifies to a single-column list with enlarged tap targets.

This feature transforms the traditional homepage from a news feed into a personalized, interactive dashboard for fans.

Verified Fan-to-Celeb Booking Integrated Flow:Incorporate a direct booking module on the homepage where users can purchase fan cards (Regular/VIP), code cards, or book personal meet-ups. This streamlines the transaction from a simple news item to a service-based interaction.

"Outfit-to-Cart" Live Feed:For celebrity fashion coverage (similar to styles seen on Vogue), include a "Shop the Look" overlay. Users can hover over a paparazzi or event photo and immediately see links to purchase the specific brand or similar affordable alternatives.

Interactive "Career Scroller":Instead of a standard image gallery, use an "infinite scroller" that organizes content chronologically or by milestones (e.g., iconic performances, awards, and personal moments).

Gamified Engagement (Points & Badges):Implement a loyalty system where users earn "Fan Points" for sharing articles, attending virtual events, or participating in "Celebrity Voting" polls. These points can be redeemed for exclusive site features like high-resolution, unwatermarked image downloads or "First Look" access to new content.

Personal Narrative Toggles:Allow users to filter the homepage content between "Professional" (career, awards, films) and "Personal" (lifestyle, social media, philanthropy) narratives. Studies show that personal narratives build stronger consumer attachments. Essential Homepage Elements

To ensure the "full" experience is functional, the following foundational elements should be present:

21 UX strategies to maximize user engagement without exploitation celebgae homepage full

The footer includes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>CelebGae — Latest Celebrity News & Gossip</title>
  <!-- Font Awesome 6 (free icons) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
  <style>
    * 
      margin: 0;
      padding: 0;
      box-sizing: border-box;

body 
  font-family: 'Inter', sans-serif;
  background-color: #faf8f5;
  color: #1e1e2a;
  scroll-behavior: smooth;
/* Utility classes */
.container 
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
.section-title 
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -0.3px;
  border-left: 5px solid #e91e63;
  padding-left: 16px;
/* Header / Navbar */
.top-header 
  background: white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(2px);
.navbar 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  flex-wrap: wrap;
  gap: 16px;
.logo h1 
  font-size: 1.9rem;
  font-weight: 800;
  background: linear-gradient(135deg, #e91e63, #ff9800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -1px;
.logo span 
  font-size: 0.75rem;
  background: #f0f0f0;
  color: #e91e63;
  padding: 2px 8px;
  border-radius: 30px;
  margin-left: 8px;
  font-weight: 400;
.nav-links 
  display: flex;
  gap: 28px;
  list-style: none;
.nav-links a 
  text-decoration: none;
  font-weight: 600;
  color: #2d2d3a;
  transition: 0.2s;
.nav-links a:hover, .nav-links a.active 
  color: #e91e63;
.search-icon 
  background: #f0f0f0;
  padding: 8px 14px;
  border-radius: 40px;
  cursor: pointer;
  font-size: 0.9rem;
/* Hero Carousel (full width) */
.hero 
  margin-top: 8px;
  background: #111;
  overflow: hidden;
.carousel-container 
  position: relative;
  max-width: 1400px;
  margin: auto;
.carousel-slide 
  display: flex;
  transition: transform 0.5s ease;
.hero-card 
  min-width: 100%;
  position: relative;
  height: 500px;
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: flex-end;
.hero-overlay 
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  width: 100%;
  padding: 40px 50px;
  color: white;
.hero-category 
  background: #e91e63;
  display: inline-block;
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
.hero-title 
  font-size: 2.4rem;
  font-weight: 800;
  max-width: 700px;
  margin-bottom: 12px;
.hero-desc 
  max-width: 550px;
  opacity: 0.9;
  margin-bottom: 16px;
.carousel-btn 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 1.8rem;
  padding: 8px 16px;
  cursor: pointer;
  z-index: 2;
  border-radius: 30px;
.prev  left: 20px; 
.next  right: 20px;
.dots 
  text-align: center;
  position: relative;
  bottom: 30px;
  z-index: 2;
.dot 
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
.dot.active  background: #e91e63; width: 24px; border-radius: 8px;
/* Grid layout */
.two-columns 
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin: 48px 0;
/* Trending / News Grid */
.news-grid 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
.news-card 
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.02);
  transition: 0.25s ease;
  border: 1px solid #f0eae3;
.news-card:hover 
  transform: translateY(-5px);
  box-shadow: 0 20px 30px -12px rgba(0,0,0,0.1);
.card-img 
  height: 180px;
  background-size: cover;
  background-position: center;
.card-content 
  padding: 18px;
.card-category 
  color: #e91e63;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
.card-title 
  font-weight: 800;
  font-size: 1.2rem;
  margin: 10px 0 8px;
  line-height: 1.3;
.card-meta 
  display: flex;
  gap: 12px;
  font-size: 0.7rem;
  color: #777;
  margin-top: 12px;
/* Sidebar */
.sidebar 
  background: white;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid #eeece8;
.sidebar-widget 
  margin-bottom: 32px;
.sidebar h3 
  font-size: 1.3rem;
  margin-bottom: 16px;
  border-bottom: 2px solid #ffe0e7;
  display: inline-block;
.trending-list 
  list-style: none;
.trending-list li 
  padding: 12px 0;
  border-bottom: 1px solid #f0eae3;
  display: flex;
  gap: 12px;
  align-items: center;
.trend-num 
  font-weight: 800;
  font-size: 1.2rem;
  color: #e91e63;
  width: 28px;
.social-icons 
  display: flex;
  gap: 16px;
  margin-top: 12px;
.social-icons a 
  color: #333;
  font-size: 1.4rem;
/* Video Section */
.video-grid 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 40px 0;
.video-card 
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
.video-card img 
  width: 100%;
  display: block;
  opacity: 0.85;
.play-icon 
  position: absolute;
  top: 40%;
  left: 45%;
  color: white;
  font-size: 2.5rem;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 10px;
/* Footer */
footer 
  background: #151515;
  color: #ccc;
  margin-top: 60px;
  padding: 40px 0 20px;
.footer-grid 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 40px;
  margin-bottom: 40px;
.footer-logo 
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #e91e63, #ff9800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
@media (max-width: 800px) 
  .two-columns  grid-template-columns: 1fr; 
  .hero-title  font-size: 1.6rem; 
  .hero-card  height: 380px; 
  .navbar  flex-direction: column; align-items: center; 
  .nav-links  gap: 18px; flex-wrap: wrap; justify-content: center;



</style>
</head>
<body>


<header class="top-header">
<div class="container">
<div class="navbar">
<div class="logo">
<h1>CELEBGAE <span>🔥 gossip hub</span></h1>
</div>
<ul class="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Exclusives</a></li>
<li><a href="#">Red Carpet</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Rankings</a></li>
</ul>
<div class="search-icon">
<i class="fas fa-search"></i> Search
</div>
</div>
</div>
</header>


<!-- Hero Carousel Full -->
<section class="hero">
<div class="carousel-container">
<div class="carousel-slide" id="carouselSlide">
<!-- slides injected via JS but also static fallback -->
</div>
<button class="carousel-btn prev" id="prevBtn"><i class="fas fa-chevron-left"></i></button>
<button class="carousel-btn next" id="nextBtn"><i class="fas fa-chevron-right"></i></button>
<div class="dots" id="dotsContainer"></div>
</div>
</section>


<div class="container">
<!-- Two column layout -->
<div class="two-columns">
<!-- Main content: Latest News -->
<main>
<div class="section-title">🔥 Latest Buzz</div>
<div class="news-grid" id="newsGrid"></div>
</main>


<!-- Sidebar -->
<aside class="sidebar">
  <div class="sidebar-widget">
    <h3><i class="fas fa-chart-line"></i> Trending Now</h3>
    <ul class="trending-list" id="trendingList"></ul>
  </div>
  <div class="sidebar-widget">
    <h3><i class="fas fa-calendar-alt"></i> This Week in Gae</h3>
    <p>✨ Selena's new look<br>🎤 Drake's surprise album<br>🍿 Marvel casting rumors</p>
  </div>
  <div class="sidebar-widget">
    <h3>Follow Us</h3>
    <div class="social-icons">
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-tiktok"></i></a>
      <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
  </div>
</aside>



</div>


<!-- Video highlights section -->
<div class="section-title">🎥 Viral Clips</div>
<div class="video-grid" id="videoGrid"></div>
</div>


<footer>
<div class="container">
<div class="footer-grid">
<div>
<div class="footer-logo">CELEBGAE</div>
<p style="margin-top:12px;">Unfiltered celebrity news, behind the scenes & pop culture.</p>
</div>
<div>
<h4>Explore</h4>
<p>About<br>Advertise<br>Privacy<br>Contact</p>
</div>
<div>
<h4>Hot right now</h4>
<p>Met Gala looks<br>Breakups 2025<br>Oscar predictions</p>
</div>
</div>
<hr style="border-color:#2a2a2a;">
<p style="text-align:center; margin-top:24px;">© 2025 CelebGae — gossip never sleeps ✨</p>
</div>
</footer>


<script>
// ---------- HERO CAROUSEL DATA ----------
const heroSlides = [
img: "https://picsum.photos/id/20/1400/500",  // Celebrity-like random (use unsplash later)
category: "EXCLUSIVE",
title: "Taylor Swift & Travis Kelce: The secret wedding plans?",
desc: "Insider reveals couple is ‘more serious than ever’ and planning a summer ceremony."
,
img: "https://picsum.photos/id/104/1400/500",
category: "SCANDAL",
title: "Blockbuster feud: Kanye vs. The Industry – full timeline",
desc: "Everything you missed from the explosive rant to label meetings."
,
img: "https://picsum.photos/id/106/1400/500",
category: "RED CARPET",
title: "Oscars 2025 best dressed: Shocking winners and worst looks",
desc: "Zendaya, Timothée and unexpected fashion moments."
];


// News data
const newsArticles = [
 img: "https://picsum.photos/id/26/400/250", category: "ROYALS", title: "Prince Harry makes surprise London appearance – without Meghan", date: "2 hours ago", comments: 47 ,
 img: "https://picsum.photos/id/30/400/250", category: "BIZ", title: "Beyoncé becomes most decorated artist in Grammys history", date: "5 hours ago", comments: 203 ,
 img: "https://picsum.photos/id/64/400/250", category: "COUPLES", title: "Ben Affleck and JLo spotted together amid divorce rumors", date: "Yesterday", comments: 112 ,
 img: "https://picsum.photos/id/91/400/250", category: "EXCLUSIVE", title: "Inside Dua Lipa's $20M Malibu mansion – pool, studio & more", date: "Yesterday", comments: 88 
];


const trendingItems = [
"#1 Zendaya's new haircut breaks the internet",
"#2 Did Ariana Grande confirm new album?",
"#3 Johnny Depp returns to Hollywood",
"#4 Kardashians under fire over tone-deaf post",
"#5 Stranger Things final season spoilers leak"
]; Title: Trending on Celebgae Subtitle: The stories the


const videoItems = [
 thumb: "https://picsum.photos/id/155/400/220", title: "Best celebrity interviews 2025" ,
 thumb: "https://picsum.photos/id/169/400/220", title: "Top 10 red carpet fails" ,
 thumb: "https://picsum.photos/id/177/400/220", title: "Drama alert: podcast full episode" 
];


// Render news grid
function renderNews() 
const grid = document.getElementById('newsGrid');
if(!grid) return;
grid.innerHTML = newsArticles.map(article => <div class="news-card"> <div class="card-img" style="background-image: url('$article.img');"></div> <div class="card-content"> <div class="card-category">$article.category</div> <div class="card-title">$article.title</div> <div class="card-meta"><span><i class="far fa-clock"></i> $article.date</span> <span><i class="far fa-comment"></i> $article.comments</span></div> </div> </div>).join('');



function renderTrending() 
const list = document.getElementById('trendingList');
list.innerHTML = trendingItems.map((item, idx) => <li><span class="trend-num">$idx+1</span> $item</li>).join('');



function renderVideos() 
const videoGrid = document.getElementById('videoGrid');
videoGrid.innerHTML = videoItems.map(vid => <div class="video-card"> <img src="$vid.thumb" alt="video thumb"> <div class="play-icon"><i class="fas fa-play-circle"></i></div> <div style="padding:12px; background:#151515; color:white;">$vid.title</div> </div>).join('');



// Carousel logic
let currentIndex = 0;
const slideContainer = document.getElementById('carouselSlide');
const dotsContainer = document.getElementById('dotsContainer');
let autoInterval;


function buildCarousel() 
slideContainer.innerHTML = '';
heroSlides.forEach((slide, idx) => 
const slideDiv = document.createElement('div');
slideDiv.className = 'hero-card';
slideDiv.style.backgroundImage = linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2)), url('$slide.img');
slideDiv.innerHTML = <div class="hero-overlay"> <div class="hero-category">$slide.category</div> <div class="hero-title">$slide.title</div> <div class="hero-desc">$slide.desc</div> </div>;
slideContainer.appendChild(slideDiv);
);
updateDots();
updateSlideTransform();



function updateDots() 
dotsContainer.innerHTML = '';
heroSlides.forEach((_, idx) => 
const dot = document.createElement('span');
dot.classList.add('dot');
if (idx === currentIndex) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(idx));
dotsContainer.appendChild(dot);
);



function updateSlideTransform() 
if(slideContainer) 
slideContainer.style.transform = translateX(-$currentIndex * 100%);
if(dotsContainer) 
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, idx) => 
if(idx === currentIndex) dot.classList.add('active');
else dot.classList.remove('active');
);



function goToSlide(index) 
currentIndex = (index + heroSlides.length) % heroSlides.length;
updateSlideTransform();
updateDots(); // refresh active state
resetAutoSlide();



function nextSlide()  goToSlide(currentIndex + 1); 
function prevSlide()  goToSlide(currentIndex - 1); 


function resetAutoSlide() 
if(autoInterval) clearInterval(autoInterval);
autoInterval = setInterval(() =>  nextSlide(); , 5000);
 [ View All Trending ]  link


// Event listeners for carousel
document.getElementById('prevBtn')?.addEventListener('click', prevSlide);
document.getElementById('nextBtn')?.addEventListener('click', nextSlide);


// Initialize full homepage
function initHomepage() 
renderNews();
renderTrending();
renderVideos();
buildCarousel();
resetAutoSlide();



initHomepage();
</script>
</body>
</html>

Title: You’re not a spectator. You’re part of the conversation.

Subtitle: Join the Celebgae Discord + weekly Twitter Spaces.

[ Join the Community → ]

Title: Fresh off the feed

(Image grid format – 6 articles)

[ Load More Stories ]

| Feature | Description | Why it matters | |---------|-------------|----------------| | Sticky Global Header | - Logo (left) – clickable → home- Primary navigation tabs (Home, News, Videos, Photo‑Galleries, Events, Shop, Community)- Search bar (center) with auto‑suggest & “Trending” chips- User avatar / “Sign‑In” button (right) | Guarantees instant access to the most‑used sections and improves brand recall. | | Responsive Mega‑Menu | Multi‑column drop‑downs for each primary tab, showing top sub‑categories (e.g., “Movies”, “Music”, “Fashion”). Includes thumbnail previews for featured items. | Reduces click depth on mobile/desktop, drives discovery of deep content. | | Breadcrumb Trail | Appears under the header on deeper pages (Home > News > Hollywood). | Improves orientation & SEO. | | Footer | - Quick links (About, Careers, Press, Privacy, Terms)- Social icons (IG, TikTok, YouTube, Twitter, FB)- Newsletter signup- “Powered by Google Cloud” badge | Completes the page and provides secondary navigation. |