bender/94ab4697-9d79-429c-9de0-0d8d922f594d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #1

Merged
bender merged 1 commits from version_2 into main 2026-06-07 23:27:32 +00:00
Conversation 0 Commits 1 Files Changed 1 +69 -240
1 changed files with 69 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/app/page.tsx
View File

@@ -33,68 +33,43 @@ export default function LandingPage() {
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "#home",
},
name: "Home", id: "#home"},
{
name: "About",
id: "#about",
},
name: "About", id: "#about"},
{
name: "Features",
id: "#features",
},
name: "Features", id: "#features"},
{
name: "Widgets",
id: "#widgets",
},
name: "Widgets", id: "#widgets"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
brandName="CDNJS Widgets"
button={{
text: "Get Started",
href: "https://cdnjs.com/libraries",
}}
text: "Get Started", href: "https://cdnjs.com/libraries"}}
/>
</div>
<div id="home" data-section="home">
<HeroBillboardGallery
background={{
variant: "downward-rays-animated-grid",
}}
title="Beautiful Components Open Source Ready to Use"
variant: "downward-rays-animated-grid"}}
title="Discover & Integrate Fun, Interactive CDNJS Widgets"
description="Explore interactive widgets and embeds powered by CDNJS. See what's possible—then build it yourself with production-ready libraries."
buttons={[
{
text: "Explore Widgets",
href: "#widgets",
},
text: "Explore Widgets", href: "#widgets"},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/coder-workstation-programming-computer-writing-lines-code-close-up_482257-118817.jpg",
imageAlt: "Interactive dashboard widget",
},
imageSrc: "http://img.b2bpic.net/free-photo/coder-workstation-programming-computer-writing-lines-code-close-up_482257-118817.jpg", imageAlt: "Interactive dashboard widget"},
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-search-bar-with-pointing-hand-glass_107791-14907.jpg",
imageAlt: "Animated progress bar UI",
},
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-search-bar-with-pointing-hand-glass_107791-14907.jpg", imageAlt: "Animated progress bar UI"},
{
imageSrc: "http://img.b2bpic.net/free-photo/ai-site-helping-with-software-production_1268-21621.jpg",
imageAlt: "Code editor with rich text component",
},
imageSrc: "http://img.b2bpic.net/free-photo/ai-site-helping-with-software-production_1268-21621.jpg", imageAlt: "Code editor with rich text component"},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-student-learning-library_23-2149215394.jpg",
imageAlt: "Responsive calendar widget",
},
imageSrc: "http://img.b2bpic.net/free-photo/young-student-learning-library_23-2149215394.jpg", imageAlt: "Responsive calendar widget"},
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-background-with-hexagonal-shapes-texture_23-2150473185.jpg",
imageAlt: "3D interactive globe",
},
imageSrc: "http://img.b2bpic.net/free-photo/3d-background-with-hexagonal-shapes-texture_23-2150473185.jpg", imageAlt: "3D interactive globe"},
]}
mediaAnimation="slide-up"
/>
@@ -107,17 +82,11 @@ export default function LandingPage() {
description="CDNJS provides a fast and reliable way to deliver open-source libraries and frameworks. We simplify frontend development by making thousands of interactive widgets and components readily available, helping you build stunning web experiences with ease and efficiency."
metrics={[
{
value: "24M+",
title: "Daily Requests",
},
value: "24M+", title: "Daily Requests"},
{
value: "4K+",
title: "Libraries Hosted",
},
value: "4K+", title: "Libraries Hosted"},
{
value: "100%",
title: "Uptime Reliability",
},
value: "100%", title: "Uptime Reliability"},
]}
imageSrc="http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637773.jpg"
imageAlt="Abstract network of interconnected nodes representing CDNJS infrastructure"
@@ -133,55 +102,25 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Interactive Charts",
tags: [
"Data Viz",
"Analytics",
],
imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg",
imageAlt: "Interactive charts and graphs",
},
id: "f1", title: "Interactive Charts", tags: [
"Data Viz", "Analytics"],
imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg", imageAlt: "Interactive charts and graphs"},
{
id: "f2",
title: "Dynamic Carousels",
tags: [
"UI/UX",
"Animation",
],
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-graphic-design-template_23-2149857524.jpg",
imageAlt: "Dynamic image carousel",
},
id: "f2", title: "Dynamic Carousels", tags: [
"UI/UX", "Animation"],
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-graphic-design-template_23-2149857524.jpg", imageAlt: "Dynamic image carousel"},
{
id: "f3",
title: "Form Validators",
tags: [
"Forms",
"Validation",
],
imageSrc: "http://img.b2bpic.net/free-photo/planner-list-agendar-note-graphic_53876-125140.jpg",
imageAlt: "Form validation UI",
},
id: "f3", title: "Form Validators", tags: [
"Forms", "Validation"],
imageSrc: "http://img.b2bpic.net/free-photo/planner-list-agendar-note-graphic_53876-125140.jpg", imageAlt: "Form validation UI"},
{
id: "f4",
title: "Advanced Maps",
tags: [
"Geospatial",
"Location",
],
imageSrc: "http://img.b2bpic.net/free-photo/car-navigation-screen-dashboard-display-digital-auto-panel_169016-68647.jpg",
imageAlt: "Interactive map with markers",
},
id: "f4", title: "Advanced Maps", tags: [
"Geospatial", "Location"],
imageSrc: "http://img.b2bpic.net/free-photo/car-navigation-screen-dashboard-display-digital-auto-panel_169016-68647.jpg", imageAlt: "Interactive map with markers"},
{
id: "f5",
title: "Fluid Animations",
tags: [
"Motion",
"Effects",
],
imageSrc: "http://img.b2bpic.net/free-photo/nail-polish-texture_23-2148111265.jpg",
imageAlt: "Fluid web animations",
},
id: "f5", title: "Fluid Animations", tags: [
"Motion", "Effects"],
imageSrc: "http://img.b2bpic.net/free-photo/nail-polish-texture_23-2148111265.jpg", imageAlt: "Fluid web animations"},
]}
title="Diverse Widgets for Every Need"
description="From data visualization to dynamic UI elements, explore a curated selection of popular open-source widgets. Each component is designed for seamless integration and exceptional performance."
@@ -196,47 +135,17 @@ export default function LandingPage() {
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Data Grid Pro",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-vector/infographic-template-design_1262-70.jpg",
imageAlt: "Data grid widget thumbnail",
},
id: "p1", name: "Data Grid Pro", price: "Free", imageSrc: "http://img.b2bpic.net/free-vector/infographic-template-design_1262-70.jpg", imageAlt: "Data grid widget thumbnail"},
{
id: "p2",
name: "Elegant Datepicker",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-vector/calendar-2019_23-2147971951.jpg",
imageAlt: "Date picker widget thumbnail",
},
id: "p2", name: "Elegant Datepicker", price: "Free", imageSrc: "http://img.b2bpic.net/free-vector/calendar-2019_23-2147971951.jpg", imageAlt: "Date picker widget thumbnail"},
{
id: "p3",
name: "Markdown Editor",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-working-laptop_53876-40325.jpg",
imageAlt: "Rich text editor widget thumbnail",
},
id: "p3", name: "Markdown Editor", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/businessman-working-laptop_53876-40325.jpg", imageAlt: "Rich text editor widget thumbnail"},
{
id: "p4",
name: "Toast Notifications",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-ripped-paper-with-keyboard-plant-cyber-monday_23-2148657617.jpg",
imageAlt: "Notification system widget thumbnail",
},
id: "p4", name: "Toast Notifications", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/top-view-ripped-paper-with-keyboard-plant-cyber-monday_23-2148657617.jpg", imageAlt: "Notification system widget thumbnail"},
{
id: "p5",
name: "Responsive Carousel",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-arrows-showing-growth_23-2148490522.jpg",
imageAlt: "Carousel slider widget thumbnail",
},
id: "p5", name: "Responsive Carousel", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/top-view-arrows-showing-growth_23-2148490522.jpg", imageAlt: "Carousel slider widget thumbnail"},
{
id: "p6",
name: "Drag & Drop Uploader",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-vector/dashboard-element-pack_23-2148363127.jpg",
imageAlt: "Drag and drop uploader widget thumbnail",
},
id: "p6", name: "Drag & Drop Uploader", price: "Free", imageSrc: "http://img.b2bpic.net/free-vector/dashboard-element-pack_23-2148363127.jpg", imageAlt: "Drag and drop uploader widget thumbnail"},
]}
title="Explore Our Widget Catalog"
description="Browse a comprehensive collection of interactive components, ready for your next project. Filter by category, functionality, or popularity to find exactly what you need."
@@ -248,14 +157,7 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"Innovate Solutions",
"DataStream Analytics",
"PixelCraft Studios",
"CodeForge Systems",
"WebFlow Innovations",
"SecureLink Networks",
"Quantum Leap Tech",
]}
"Innovate Solutions", "DataStream Analytics", "PixelCraft Studios", "CodeForge Systems", "WebFlow Innovations", "SecureLink Networks", "Quantum Leap Tech"]}
title="Trusted by Leading Innovators"
description="Our open-source components power projects from startups to enterprise solutions, providing robust and scalable tools that developers rely on daily."
/>
@@ -269,50 +171,20 @@ export default function LandingPage() {
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Alex K.",
role: "Software Engineer",
company: "TechCorp",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-work-office-using-computer_171337-6827.jpg",
imageAlt: "Alex K. Testimonial",
},
id: "t1", name: "Alex K.", role: "Software Engineer", company: "TechCorp", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-work-office-using-computer_171337-6827.jpg", imageAlt: "Alex K. Testimonial"},
{
id: "t2",
name: "Maria S.",
role: "Lead UX Designer",
company: "DesignFlow",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/serious-young-woman-with-tablet-emotion-concept_169016-64672.jpg",
imageAlt: "Maria S. Testimonial",
},
id: "t2", name: "Maria S.", role: "Lead UX Designer", company: "DesignFlow", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/serious-young-woman-with-tablet-emotion-concept_169016-64672.jpg", imageAlt: "Maria S. Testimonial"},
{
id: "t3",
name: "David L.",
role: "CTO",
company: "Innovate Labs",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman_1098-16876.jpg",
imageAlt: "David L. Testimonial",
},
id: "t3", name: "David L.", role: "CTO", company: "Innovate Labs", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman_1098-16876.jpg", imageAlt: "David L. Testimonial"},
{
id: "t4",
name: "Sophie P.",
role: "Freelance Dev",
company: "Self-Employed",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/redhead-female-using-laptop-living-room-with-loft-interior_613910-10398.jpg",
imageAlt: "Sophie P. Testimonial",
},
id: "t4", name: "Sophie P.", role: "Freelance Dev", company: "Self-Employed", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/redhead-female-using-laptop-living-room-with-loft-interior_613910-10398.jpg", imageAlt: "Sophie P. Testimonial"},
{
id: "t5",
name: "John D.",
role: "Product Manager",
company: "BuildHub",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/african-american-seller-supermarket_482257-80744.jpg",
imageAlt: "John D. Testimonial",
},
id: "t5", name: "John D.", role: "Product Manager", company: "BuildHub", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/african-american-seller-supermarket_482257-80744.jpg", imageAlt: "John D. Testimonial"},
]}
title="What Developers Are Saying"
description="Hear directly from the community about how CDNJS widgets enhance their development workflow and project outcomes."
@@ -327,20 +199,11 @@ export default function LandingPage() {
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "4,000+",
description: "Open Source Libraries",
},
id: "m1", value: "4,000+", description: "Open Source Libraries"},
{
id: "m2",
value: "24 Million+",
description: "Daily Requests Served",
},
id: "m2", value: "24 Million+", description: "Daily Requests Served"},
{
id: "m3",
value: "1.5 Billion+",
description: "Monthly Downloads",
},
id: "m3", value: "1.5 Billion+", description: "Monthly Downloads"},
]}
title="Impact and Reach"
description="CDNJS is a cornerstone of the web, serving millions of requests daily and supporting countless projects globally."
@@ -353,25 +216,13 @@ export default function LandingPage() {
useInvertedBackground={true}
faqs={[
{
id: "faq1",
title: "What is CDNJS?",
content: "CDNJS is a free and open-source CDN hosting JavaScript and CSS libraries. It aims to provide a fast and reliable way for web developers to include these libraries in their projects.",
},
id: "faq1", title: "What is CDNJS?", content: "CDNJS is a free and open-source CDN hosting JavaScript and CSS libraries. It aims to provide a fast and reliable way for web developers to include these libraries in their projects."},
{
id: "faq2",
title: "How do I use a widget from CDNJS?",
content: "Simply copy the provided link (HTML script tag or CSS link tag) for the desired library and paste it into your web project's HTML file. Most libraries also have documentation on their respective project pages.",
},
id: "faq2", title: "How do I use a widget from CDNJS?", content: "Simply copy the provided link (HTML script tag or CSS link tag) for the desired library and paste it into your web project's HTML file. Most libraries also have documentation on their respective project pages."},
{
id: "faq3",
title: "Is CDNJS free to use?",
content: "Yes, CDNJS is completely free and open-source. It is maintained by a community of developers and powered by Cloudflare's global network.",
},
id: "faq3", title: "Is CDNJS free to use?", content: "Yes, CDNJS is completely free and open-source. It is maintained by a community of developers and powered by Cloudflare's global network."},
{
id: "faq4",
title: "How can I contribute a library?",
content: "You can contribute a library by submitting a pull request to the CDNJS GitHub repository. Ensure your library meets the contribution guidelines and has proper documentation.",
},
id: "faq4", title: "How can I contribute a library?", content: "You can contribute a library by submitting a pull request to the CDNJS GitHub repository. Ensure your library meets the contribution guidelines and has proper documentation."},
]}
title="Frequently Asked Questions"
description="Find quick answers to common questions about using and contributing to CDNJS."
@@ -383,8 +234,7 @@ export default function LandingPage() {
<ContactSplit
useInvertedBackground={false}
background={{
variant: "downward-rays-static",
}}
variant: "downward-rays-static"}}
tag="Connect With Us"
title="Have Questions or Suggestions?"
description="Whether you need support, want to suggest a new feature, or are interested in contributing, we're here to help. Reach out to our community!"
@@ -399,54 +249,33 @@ export default function LandingPage() {
<FooterBase
columns={[
{
title: "Resources",
items: [
title: "Resources", items: [
{
label: "Libraries",
href: "https://cdnjs.com/libraries",
},
label: "Libraries", href: "https://cdnjs.com/libraries"},
{
label: "API Docs",
href: "https://cdnjs.com/api",
},
label: "API Docs", href: "https://cdnjs.com/api"},
{
label: "Blog",
href: "#",
},
label: "Blog", href: "#"},
],
},
{
title: "Community",
items: [
title: "Community", items: [
{
label: "GitHub",
href: "https://github.com/cdnjs/cdnjs",
},
label: "GitHub", href: "https://github.com/cdnjs/cdnjs"},
{
label: "Twitter",
href: "https://twitter.com/cdnjs",
},
label: "Twitter", href: "https://twitter.com/cdnjs"},
{
label: "Discord",
href: "#",
},
label: "Discord", href: "#"},
],
},
{
title: "About Us",
items: [
title: "About Us", items: [
{
label: "About CDNJS",
href: "#about",
},
label: "About CDNJS", href: "#about"},
{
label: "Sponsors",
href: "https://cdnjs.com/sponsors",
},
label: "Sponsors", href: "https://cdnjs.com/sponsors"},
{
label: "Contact",
href: "#contact",
},
label: "Contact", href: "#contact"},
],
},
]}