bender/d1443d39-92a6-435d-866a-d83ea6be6136
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-07 19:01:09 +00:00
parent 3d72b2696e
commit fb1e6d093f
1 changed files with 134 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
src/app/page.tsx
View File

@@ -29,159 +29,149 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Hero", id: "hero" },
{ name: "Features", id: "features" },
{ name: "About", id: "about" },
{ name: "Metrics", id: "metrics" },
{ name: "Social Proof", id: "socialProof" },
{ name: "Blog", id: "blog" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
]}
brandName="CNN"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Hero", id: "hero" },
{ name: "Features", id: "features" },
{ name: "About", id: "about" },
{ name: "Metrics", id: "metrics" },
{ name: "Social Proof", id: "socialProof" },
{ name: "Blog", id: "blog" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
]}
brandName="CNN"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Breaking News, Every Second."
description="Your trusted source for global news, live coverage, and in-depth reporting."
testimonials={[
{
name: "Anderson Cooper", handle: "@ac", testimonial: "The gold standard in global reporting.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/tv-present-studio-preparing-new-broadcasting-smiling-girl-white-shirt-sitting-table_1157-47910.jpg"},
{
name: "Jake Tapper", handle: "@jt", testimonial: "Incisive, objective, and always timely.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/recruitment-process-continues-as-job-seeker-participates-online-interview-answering_482257-136478.jpg"},
{
name: "Wolf Blitzer", handle: "@wb", testimonial: "Unmatched depth in every story.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/video-camera-viewfinder-recording-show-tv-studio-focus-camera_1157-47920.jpg"},
{
name: "Erin Burnett", handle: "@eb", testimonial: "Clear, concise analysis of global events.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/factory-managers-presenting-products-investors-teleconference_482257-119358.jpg"},
{
name: "Chris Wallace", handle: "@cw", testimonial: "Deep investigative journalism at its peak.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/professional-camera-tripod_1268-20718.jpg"},
]}
imageSrc="http://img.b2bpic.net/free-photo/investors-reading-solar-panels-factory-paperwork-online-videocall_482257-125985.jpg"
imageAlt="CNN Breaking News Studio"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/investors-reading-solar-panels-factory-paperwork-online-videocall_482257-125985.jpg", alt: "Anderson Cooper" },
{ src: "http://img.b2bpic.net/free-photo/top-view-digital-tablet-with-search-job-screen-male-hands_169016-38981.jpg", alt: "Jake Tapper" },
{ src: "http://img.b2bpic.net/free-photo/glowing-blue-sphere-displays-global-data-patterns-generated-by-ai_188544-20044.jpg", alt: "Wolf Blitzer" },
{ src: "http://img.b2bpic.net/free-photo/sport-news-with-camera-recording-field_23-2149900291.jpg", alt: "Erin Burnett" },
{ src: "http://img.b2bpic.net/free-photo/adult-tired-boys-girl-are-playing-videogames-popular-cyber-championship_613910-21678.jpg", alt: "Chris Wallace" },
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Breaking News, Every Second."
description="Your trusted source for global news, live coverage, and in-depth reporting."
testimonials={[
{ name: "Anderson Cooper", handle: "@ac", testimonial: "The gold standard in global reporting.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/tv-present-studio-preparing-new-broadcasting-smiling-girl-white-shirt-sitting-table_1157-47910.jpg" },
{ name: "Jake Tapper", handle: "@jt", testimonial: "Incisive, objective, and always timely.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/recruitment-process-continues-as-job-seeker-participates-online-interview-answering_482257-136478.jpg" },
{ name: "Wolf Blitzer", handle: "@wb", testimonial: "Unmatched depth in every story.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/video-camera-viewfinder-recording-show-tv-studio-focus-camera_1157-47920.jpg" },
{ name: "Erin Burnett", handle: "@eb", testimonial: "Clear, concise analysis of global events.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/factory-managers-presenting-products-investors-teleconference_482257-119358.jpg" },
{ name: "Chris Wallace", handle: "@cw", testimonial: "Deep investigative journalism at its peak.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/professional-camera-tripod_1268-20718.jpg" }
]}
imageSrc="http://img.b2bpic.net/free-photo/investors-reading-solar-panels-factory-paperwork-online-videocall_482257-125985.jpg"
imageAlt="CNN Breaking News Studio"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/investors-reading-solar-panels-factory-paperwork-online-videocall_482257-125985.jpg", alt: "Anderson Cooper" },
{ src: "http://img.b2bpic.net/free-photo/top-view-digital-tablet-with-search-job-screen-male-hands_169016-38981.jpg", alt: "Jake Tapper" },
{ src: "http://img.b2bpic.net/free-photo/glowing-blue-sphere-displays-global-data-patterns-generated-by-ai_188544-20044.jpg", alt: "Wolf Blitzer" },
{ src: "http://img.b2bpic.net/free-photo/sport-news-with-camera-recording-field_23-2149900291.jpg", alt: "Erin Burnett" },
{ src: "http://img.b2bpic.net/free-photo/adult-tired-boys-girl-are-playing-videogames-popular-cyber-championship_613910-21678.jpg", alt: "Chris Wallace" },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
features={[
{ title: "Live Digital Reporting", description: "Streaming live events across all continents 24/7.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-digital-tablet-with-search-job-screen-male-hands_169016-38981.jpg", imageAlt: "Digital feed" },
{ title: "Global Data Network", description: "Instant analytical updates using AI-driven insights.", imageSrc: "http://img.b2bpic.net/free-photo/glowing-blue-sphere-displays-global-data-patterns-generated-by-ai_188544-20044.jpg", imageAlt: "Data network" },
{ title: "Cinematic Field Tech", description: "Professional 8K broadcast equipment in every field.", imageSrc: "http://img.b2bpic.net/free-photo/sport-news-with-camera-recording-field_23-2149900291.jpg", imageAlt: "Broadcast camera" },
]}
title="How We Cover the World"
description="Utilizing advanced technology and global networks."
/>
</div>
<div id="features" data-section="features">
<FeatureCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
features={[
{ title: "Live Digital Reporting", description: "Streaming live events across all continents 24/7.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-digital-tablet-with-search-job-screen-male-hands_169016-38981.jpg", imageAlt: "Digital feed" },
{ title: "Global Data Network", description: "Instant analytical updates using AI-driven insights.", imageSrc: "http://img.b2bpic.net/free-photo/glowing-blue-sphere-displays-global-data-patterns-generated-by-ai_188544-20044.jpg", imageAlt: "Data network" },
{ title: "Cinematic Field Tech", description: "Professional 8K broadcast equipment in every field.", imageSrc: "http://img.b2bpic.net/free-photo/sport-news-with-camera-recording-field_23-2149900291.jpg", imageAlt: "Broadcast camera" },
]}
title="How We Cover the World"
description="Utilizing advanced technology and global networks."
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{ type: "text", content: "The Future of Journalism" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/adult-tired-boys-girl-are-playing-videogames-popular-cyber-championship_613910-21678.jpg", alt: "Journalists at work" },
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{ type: "text", content: "The Future of Journalism" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/adult-tired-boys-girl-are-playing-videogames-popular-cyber-championship_613910-21678.jpg", alt: "Journalists at work" },
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{ id: "m1", title: "Countries Covered", value: "190+", icon: Globe },
{ id: "m2", title: "Daily Viewers", value: "100M+", icon: Users },
{ id: "m3", title: "Years of Reporting", value: "44", icon: Award },
]}
title="Global Impact"
description="Our reach and influence across the planet."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{ id: "m1", title: "Countries Covered", value: "190+", icon: Globe },
{ id: "m2", title: "Daily Viewers", value: "100M+", icon: Users },
{ id: "m3", title: "Years of Reporting", value: "44", icon: Award },
]}
title="Global Impact"
description="Our reach and influence across the planet."
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={"World Press", "Global Alliance", "Tech News Feed", "Broadcast Corp", "Digital Media Press", "Info Net Group", "Press Association"}
title="Trusted by Networks"
description="Leading global partners in communication and technology."
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["World Press", "Global Alliance", "Tech News Feed", "Broadcast Corp", "Digital Media Press", "Info Net Group", "Press Association"]}
title="Trusted by Networks"
description="Leading global partners in communication and technology."
/>
</div>
<div id="blog" data-section="blog">
<BlogCardOne
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Latest Investigations"
description="Deep dives into critical current events."
blogs={[
{ id: "b1", category: "Tech", title: "The Evolution of Digital Broadcasts", excerpt: "How data is transforming the way we see news.", imageSrc: "http://img.b2bpic.net/free-photo/people-traveling-without-covid-worries_23-2149051631.jpg", authorName: "John Doe", authorAvatar: "http://img.b2bpic.net/free-photo/futuristic-view-high-tech-earth-planet_23-2151100449.jpg", date: "Oct 24" },
{ id: "b2", category: "Politics", title: "Inside the New Political Arena", excerpt: "Deep dive into recent regional changes.", imageSrc: "http://img.b2bpic.net/free-photo/microphone-with-stand-double-color-exposure-effect_53876-102002.jpg", authorName: "Jane Smith", authorAvatar: "http://img.b2bpic.net/free-vector/business-elements-technology_1257-252.jpg", date: "Oct 23" },
{ id: "b3", category: "Climate", title: "Changing Patterns in our Environment", excerpt: "A study on global environmental shifts.", imageSrc: "http://img.b2bpic.net/free-photo/enterprise-advisory-board-meeting-late-night-assess-risks-exchange-feedback-collaborating_482257-136331.jpg", authorName: "Alex Lee", authorAvatar: "http://img.b2bpic.net/free-vector/networking_24908-54165.jpg", date: "Oct 22" },
]}
/>
</div>
<div id="blog" data-section="blog">
<BlogCardOne
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Latest Investigations"
description="Deep dives into critical current events."
blogs={[
{ id: "b1", category: "Tech", title: "The Evolution of Digital Broadcasts", excerpt: "How data is transforming the way we see news.", imageSrc: "http://img.b2bpic.net/free-photo/people-traveling-without-covid-worries_23-2149051631.jpg", authorName: "John Doe", authorAvatar: "http://img.b2bpic.net/free-photo/futuristic-view-high-tech-earth-planet_23-2151100449.jpg", date: "Oct 24" },
{ id: "b2", category: "Politics", title: "Inside the New Political Arena", excerpt: "Deep dive into recent regional changes.", imageSrc: "http://img.b2bpic.net/free-photo/microphone-with-stand-double-color-exposure-effect_53876-102002.jpg", authorName: "Jane Smith", authorAvatar: "http://img.b2bpic.net/free-vector/business-elements-technology_1257-252.jpg", date: "Oct 23" },
{ id: "b3", category: "Climate", title: "Changing Patterns in our Environment", excerpt: "A study on global environmental shifts.", imageSrc: "http://img.b2bpic.net/free-photo/enterprise-advisory-board-meeting-late-night-assess-risks-exchange-feedback-collaborating_482257-136331.jpg", authorName: "Alex Lee", authorAvatar: "http://img.b2bpic.net/free-vector/networking_24908-54165.jpg", date: "Oct 22" },
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
faqsAnimation="slide-up"
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "How can I contact the newsroom?", content: "Use our secure tip line contact form." },
{ id: "f2", title: "Are reports vetted?", content: "All reports go through 3-step verification." },
{ id: "f3", title: "Can I republish CNN content?", content: "Check our licensing and syndication page." },
]}
title="Frequently Asked"
description="Clear answers to common reader inquiries."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
faqsAnimation="slide-up"
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "How can I contact the newsroom?", content: "Use our secure tip line contact form." },
{ id: "f2", title: "Are reports vetted?", content: "All reports go through 3-step verification." },
{ id: "f3", title: "Can I republish CNN content?", content: "Check our licensing and syndication page." },
]}
title="Frequently Asked"
description="Clear answers to common reader inquiries."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Have a Tip?"
description="Get in touch with our editorial department."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
]}
textarea={{ name: "message", placeholder: "Describe your news tip here", rows: 4, required: true }}
imageSrc="http://img.b2bpic.net/free-photo/top-view-arrangement-different-traveling-elements_23-2148884962.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Have a Tip?"
description="Get in touch with our editorial department."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
]}
textarea={{ name: "message", placeholder: "Describe your news tip here", rows: 4, required: true }}
imageSrc="http://img.b2bpic.net/free-photo/top-view-arrangement-different-traveling-elements_23-2148884962.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="CNN"
columns={[
{ items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }, { label: "Press Room", href: "#" }] },
{ items: [{ label: "Terms of Use", href: "#" }, { label: "Privacy Policy", href: "#" }] },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="CNN"
columns={[
{ items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }, { label: "Press Room", href: "#" }] },
{ items: [{ label: "Terms of Use", href: "#" }, { label: "Privacy Policy", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);