Pattern Craft

You can modify existing patterns by adjusting the pattern object structure. Patterns are defined by an id, name, style (containing background, backgroundImage, and backgroundSize), and a code snippet containing the JSX implementation.

{
  id: "unique-pattern-id",
  name: "Pattern Display Name",
  badge: "New",
  style: {
    background: "#ffffff",
    backgroundImage: `
      // Your CSS background patterns here
      linear-gradient(to right, #f0f0f0 1px, transparent 1px),
      radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent)
    `,
    backgroundSize: "96px 64px, 100% 100%",
  },
  code: `<div className="min-h-screen w-full bg-white relative">
  {/* Pattern Name Background */}
  <div
    className="absolute inset-0 z-0"
    style={{
      backgroundImage: `
        // Your background image styles
      `,
      backgroundSize: "96px 64px, 100% 100%",
    }}
  />
  {/* Your Content/Components */}
</div>`,
}

Pattern Craft provides a collection of pre-defined background patterns (decorative, gradients, and geometric) that can be integrated into React components. Each pattern includes a specific id, name, category, and a code snippet containing the necessary JSX and inline styles to replicate the effect.

To use a pattern, copy the provided code snippet into your component. Most patterns use an absolute-positioned div with z-0 to serve as a background layer, allowing you to place your content in a higher z-index layer.

<div className="min-h-screen w-full bg-white relative overflow-hidden">
  {/* Rose Corner Elegant Background */}
  <div
    className="absolute inset-0 z-0"
    style={{
      backgroundImage: `
        radial-gradient(circle 600px at 0% 200px, #fda4af, transparent),
        radial-gradient(circle 600px at 100% 200px, #fda4af, transparent)
      `,
    }}
  />
  {/* Your Content Here */}
</div>

A collection of grid patterns that fade diagonally from specific corners or the center. These use maskImage to create the fade effect.

• Top Left: diagonal-fade-grid-left (fades from 0% 0%)
• Top Right: diagonal-fade-grid-right (fades from 100% 0%)
• Bottom Left: diagonal-fade-bottom-grid-Left (fades from 0% 100%)
• Bottom Right: diagonal-fade-bottom-grid-right (fades from 100% 100%)
• Center: diagonal-fade-center-grid (fades from 50% 50%)

// Example: Diagonal Fade Center Grid
<div className="min-h-screen w-full bg-[#f9fafb] relative">
  <div
    className="absolute inset-0 z-0"
    style={{
      backgroundImage: `
        linear-gradient(to right, #d1d5db 1px, transparent 1px),
        linear-gradient(to bottom, #d1d5db 1px, transparent 1px)
      `,
      backgroundSize: "32px 32px",
      WebkitMaskImage:
         "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
      maskImage:
         "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
    }}
  />
</div>

A collection of patterns featuring a diagonal cross-hatch grid (using 45deg and -45deg linear gradients) with various fade effects applied via maskImage.

• Full Grid: diagonal-cross-grid (no mask)
• Top Fade: diagonal-cross-grid-top (fades from top center)
• Bottom Fade: diagonal-cross-grid-bottom (fades from bottom center)
• Top Right Fade: diagonal-cross-top-right-fade-grid (fades from top left)
• Top Left Fade: diagonal-cross-top-left-fade-grid (fades from top right)
• Bottom Right Fade: diagonal-cross-Bottom-right-fade-grid (fades from bottom left)
• Bottom Left Fade: diagonal-cross-Bottom-left-fade-grid (fades from bottom right)
• Center Fade: diagonal-cross-center-fade-grid (fades from center)

// Example: Diagonal Cross Grid
<div className="min-h-screen w-full bg-white relative">
  <div
    className="absolute inset-0"
    style={{
      backgroundImage: `
        linear-gradient(45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%)
      `,
      backgroundSize: "40px 40px",
    }}
  />
</div>

The next-sitemap.config.js file defines the configuration for generating sitemaps and robots.txt files using the next-sitemap package. The configuration object accepts the following keys:

• siteUrl: The base URL of your website (e.g., 'https://patterncraft.store').
• generateRobotsTxt: Boolean indicating whether to generate a robots.txt file.
• generateIndexSitemap: Boolean indicating whether to generate a sitemap index file (useful for very large sites).
• exclude: An array of paths to exclude from the sitemap (supports glob patterns like '/api/*').
• changefreq: How frequently the page content is expected to change (e.g., 'weekly').
• priority: A number between 0.0 and 1.0 representing the importance of the URL.
• trailingSlash: Boolean indicating whether to include a trailing slash in the generated URLs.
• sourceMap: Boolean indicating whether to generate source maps.

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://patterncraft.store',
  generateRobotsTxt: true,
  generateIndexSitemap: false,
  exclude: [
    '/api/*',
    '/admin/*',
    '/private/*',
    '/_next/*',
    '/404',
    '/500',
  ],
  changefreq: 'weekly',
  priority: 0.7,
  trailingSlash: false,
  sourceMap: false,
};