Website clone - v0 by Vercel

Okay, I will recreate the webpage based on the image you provided. This will be a static representation focusing on the layout and visual elements.

Here's the plan:

Overall Page Structure (app/page.tsx): This will be the main file assembling all the components.
Header (components/site-header.tsx): Contains the logo, navigation links, and user icons.
Hero Section (components/hero-section.tsx): Features the "Welcome to HDHive" message, descriptive text, a call-to-action button, a grid of featured movie posters on the right, and an announcement banner at the bottom.
Information Banners (components/info-banner.tsx): Dark gray banners with text, like the "VidHub" and "守候网络" sections.
Media Grid (components/media-grid.tsx): Displays movies or TV shows in a grid, used for "最近更新电影" (Recently Updated Movies) and "最近更新剧集" (Recently Updated TV Shows).
Media Card (components/media-card.tsx): Represents a single movie or TV show poster with its title and year.
Announcements Section (components/announcements-section.tsx): For the "近期公告" (Recent Announcements).
FAQ Section (components/faq-section.tsx): A section with collapsible items, mimicking an FAQ.
Footer (components/site-footer.tsx): Contains the logo, descriptive text, links, and copyright information.

I'll use placeholder images for movie posters and mock data for the content. The styling will be done using Tailwind CSS, and I'll incorporate icons from Lucide React.

This structure should give you a good starting point for the HDHive website clone. I've tried to match the layout and content as closely as possible based on the provided images. The movie/TV show data is mocked, and you can replace it with actual data as needed. The hero section's poster grid is a simplified representation of the one in the image.

You can download the code and run it in a Next.js project. Remember to install lucide-react and any shadcn/ui components used (like Button, Accordion, Input).

Okay, I will recreate the webpage based on the image you provided. This will be a static representation focusing on the layout and visual elements.

Here's the plan:

Overall Page Structure (app/page.tsx): This will be the main file assembling all the components.
Header (components/site-header.tsx): Contains the logo, navigation links, and user icons.
Hero Section (components/hero-section.tsx): Features the "Welcome to HDHive" message, descriptive text, a call-to-action button, a grid of featured movie posters on the right, and an announcement banner at the bottom.
Information Banners (components/info-banner.tsx): Dark gray banners with text, like the "VidHub" and "守候网络" sections.
Media Grid (components/media-grid.tsx): Displays movies or TV shows in a grid, used for "最近更新电影" (Recently Updated Movies) and "最近更新剧集" (Recently Updated TV Shows).
Media Card (components/media-card.tsx): Represents a single movie or TV show poster with its title and year.
Announcements Section (components/announcements-section.tsx): For the "近期公告" (Recent Announcements).
FAQ Section (components/faq-section.tsx): A section with collapsible items, mimicking an FAQ.
Footer (components/site-footer.tsx): Contains the logo, descriptive text, links, and copyright information.

I'll use placeholder images for movie posters and mock data for the content. The styling will be done using Tailwind CSS, and I'll incorporate icons from Lucide React.

You can download the code and run it in a Next.js project. Remember to install lucide-react and any shadcn/ui components used (like Button, Accordion, Input).