diff --git a/public/images/store/Green_tote.png b/public/images/store/Green_tote.png new file mode 100644 index 000000000..013e1e881 Binary files /dev/null and b/public/images/store/Green_tote.png differ diff --git a/public/images/store/black-tote.jpg b/public/images/store/black-tote.jpg new file mode 100644 index 000000000..b7af6f0ab Binary files /dev/null and b/public/images/store/black-tote.jpg differ diff --git a/public/images/store/black-tote.png b/public/images/store/black-tote.png new file mode 100644 index 000000000..6ae622ec4 Binary files /dev/null and b/public/images/store/black-tote.png differ diff --git a/public/images/store/green-tote1.png b/public/images/store/green-tote1.png new file mode 100644 index 000000000..349626819 Binary files /dev/null and b/public/images/store/green-tote1.png differ diff --git a/public/images/store/green_tote.jpg b/public/images/store/green_tote.jpg new file mode 100644 index 000000000..291ccf157 Binary files /dev/null and b/public/images/store/green_tote.jpg differ diff --git a/public/images/store/pink-tote.jpg b/public/images/store/pink-tote.jpg new file mode 100644 index 000000000..0d2eedd84 Binary files /dev/null and b/public/images/store/pink-tote.jpg differ diff --git a/public/images/store/pink-tote.png b/public/images/store/pink-tote.png new file mode 100644 index 000000000..562d20981 Binary files /dev/null and b/public/images/store/pink-tote.png differ diff --git a/public/images/store/white-tote.jpg b/public/images/store/white-tote.jpg new file mode 100644 index 000000000..95ce356d9 Binary files /dev/null and b/public/images/store/white-tote.jpg differ diff --git a/public/images/store/white-tote.png b/public/images/store/white-tote.png new file mode 100644 index 000000000..2ddd2b8bb Binary files /dev/null and b/public/images/store/white-tote.png differ diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index cc5c654e3..b6411f18f 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -156,7 +156,14 @@ export default function TopNav({ }: { routeTree: RouteItem; breadcrumbs: RouteItem[]; - section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown'; + section: + | 'learn' + | 'reference' + | 'community' + | 'store' + | 'blog' + | 'home' + | 'unknown'; }) { const [isMenuOpen, setIsMenuOpen] = useState(false); const [showSearch, setShowSearch] = useState(false); @@ -331,6 +338,9 @@ export default function TopNav({ Community + + Store + Blog @@ -420,6 +430,9 @@ export default function TopNav({ url="/community"> Community + + Store + Blog diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 6f99121f7..3a959a7df 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -33,6 +33,7 @@ import type {Toc, TocItem} from './TocContext'; import {TeamMember} from './TeamMember'; import {LanguagesContext} from './LanguagesContext'; import {finishedTranslations} from 'utils/finishedTranslations'; +import {ProductGrid} from '../ProductGrid'; import ErrorDecoder from './ErrorDecoder'; import {IconCanary} from '../Icon/IconCanary'; @@ -484,6 +485,7 @@ export const MDXComponents = { Canary, CanaryBadge, PackageImport, + ProductGrid, ReadBlogPost, Recap, Recipes, diff --git a/src/components/ProductGrid.tsx b/src/components/ProductGrid.tsx new file mode 100644 index 000000000..5d9a68efd --- /dev/null +++ b/src/components/ProductGrid.tsx @@ -0,0 +1,174 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; + +interface Product { + name: string; + price: string; + description: string; + color: string; + image: string; +} + +const products: Product[] = [ + { + name: 'Black Tote', + price: '$10 USD', + description: + 'A sleek and professional black tote bag perfect for carrying your laptop, books, and React swag. Made with durable materials for everyday use.', + color: '#374151', + image: '/images/store/black-tote.jpg', + }, + { + name: 'Pink Tote', + price: '$10 USD', + description: + 'A vibrant pink tote bag that stands out in any crowd. Perfect for React enthusiasts who want to show their style while carrying their essentials.', + color: '#ec4899', + image: '/images/store/pink-tote.jpg', + }, + { + name: 'White Tote', + price: '$10 USD', + description: + 'A clean and minimalist white tote bag that goes with everything. Ideal for developers who prefer a classic, understated look.', + color: '#d1d5db', + image: '/images/store/white-tote.jpg', + }, + { + name: 'Green Tote', + price: '$10 USD', + description: + 'An eco-friendly green tote bag that represents growth and sustainability. Perfect for environmentally conscious React developers.', + color: '#10b981', + image: '/images/store/green_tote.jpg', + }, +]; + +export function ProductGrid() { + return ( +
+ {products.map((product, index) => ( +
{ + e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)'; + }}> + {/* Product Image */} +
+ {product.name} { + e.currentTarget.style.transform = 'scale(1.05)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.transform = 'scale(1)'; + }} + /> +
+ + {/* Product Info */} +
+

+ {product.name} +

+ +

+ {product.description} +

+ +
+ + {product.price} + +
+ + +
+
+ ))} +
+ ); +} diff --git a/src/content/store/index.md b/src/content/store/index.md new file mode 100644 index 000000000..a4a0e8a8d --- /dev/null +++ b/src/content/store/index.md @@ -0,0 +1,17 @@ +--- +title: Store +--- + + + +Welcome to the React Store! Browse our collection of high-quality tote bags perfect for React developers and enthusiasts. + + + +## Our Products {/*our-products*/} + + + +--- + +*All tote bags are made with high-quality materials and feature the React logo. Perfect for conferences, meetups, or everyday use!* diff --git a/src/pages/[[...markdownPath]].js b/src/pages/[[...markdownPath]].js index 63fcfcc81..fe92dcdf4 100644 --- a/src/pages/[[...markdownPath]].js +++ b/src/pages/[[...markdownPath]].js @@ -6,10 +6,12 @@ import {Fragment, useMemo} from 'react'; import {useRouter} from 'next/router'; import {Page} from 'components/Layout/Page'; import sidebarHome from '../sidebarHome.json'; -import sidebarLearn from '../sidebarLearn.json'; -import sidebarReference from '../sidebarReference.json'; -import sidebarCommunity from '../sidebarCommunity.json'; -import sidebarBlog from '../sidebarBlog.json'; +import sidebarHome from '../sidebarHome.json'; +const sidebarLearn = () => import('../sidebarLearn.json').then(m => m.default); +const sidebarReference = () => import('../sidebarReference.json').then(m => m.default); +const sidebarCommunity = () => import('../sidebarCommunity.json').then(m => m.default); +const sidebarStore = () => import('../sidebarStore.json').then(m => m.default); +const sidebarBlog = () => import('../sidebarBlog.json').then(m => m.default); import {MDXComponents} from 'components/MDX/MDXComponents'; import compileMDX from 'utils/compileMDX'; import {generateRssFeed} from '../utils/rss'; @@ -36,6 +38,9 @@ export default function Layout({content, toc, meta, languages}) { case 'community': routeTree = sidebarCommunity; break; + case 'store': + routeTree = sidebarStore; + break; case 'blog': routeTree = sidebarBlog; break; @@ -63,6 +68,8 @@ function useActiveSection() { return 'learn'; } else if (asPath.startsWith('/community')) { return 'community'; + } else if (asPath.startsWith('/store')) { + return 'store'; } else if (asPath.startsWith('/blog')) { return 'blog'; } else { diff --git a/src/sidebarStore.json b/src/sidebarStore.json new file mode 100644 index 000000000..262644ce7 --- /dev/null +++ b/src/sidebarStore.json @@ -0,0 +1,21 @@ +{ + "title": "Store", + "path": "/store", + "routes": [ + { + "hasSectionHeader": true, + "sectionHeader": "REACT MERCHANDISE" + }, + { + "title": "Store", + "path": "/store", + "skipBreadcrumb": true, + "routes": [ + { + "title": "All Products", + "path": "/store" + } + ] + } + ] +} diff --git a/www.residenthome.com_2025-06-03_15-04-25.report.html b/www.residenthome.com_2025-06-03_15-04-25.report.html new file mode 100644 index 000000000..4435be0d1 --- /dev/null +++ b/www.residenthome.com_2025-06-03_15-04-25.report.html @@ -0,0 +1,2895 @@ + + + + + + + + Lighthouse Report + + + + + +
+ + + + + +