landing.mdx

mode
custom

{/* Section 1: Hero - Dark Blue Gradient with Animated Orbs */}

{/* Animated gradient orbs - More vibrant */}

<div className="max-w-5xl mx-auto text-center relative z-10">
  {/* Subtle Grid Pattern Overlay */}
  <div className="absolute inset-0 bg-[radial-gradient(#ffffff11_1px,transparent_1px)] [background-size:16px_16px] opacity-30 mask-gradient-hero"></div>

  {/* Added Hero Image */}
  <img 
    src="/logo/mcpv-hero.jpg" 
    alt="MCPVerified Hero Image" 
    className="max-w-md mx-auto mb-8 rounded-lg shadow-lg"
  />

  <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 text-transparent bg-clip-text bg-gradient-to-r from-white via-blue-100 to-white drop-shadow-lg">
    Model Context Protocol
  </h1>
  <div className="mb-8 text-2xl md:text-3xl font-normal tracking-tight text-blue-100">
    <span className="inline-block border-b-2 border-teal-400 pb-1 px-2">Introducing MCPVerified</span>
  </div>
  <p className="text-xl md:text-2xl text-blue-100/90 font-light max-w-3xl mx-auto mb-6 leading-relaxed">
    The definitive certification standard for AI development tools and infrastructure that ensures interoperability, security, and best practices.
  </p>
  <p className="text-lg text-blue-200/70 max-w-3xl mx-auto leading-relaxed">
    MCPVerified provides enterprise-grade evaluation frameworks for implementing MCP-compliant technologies across your AI stack. From framework selection to deployment, MCPVerified ensures your AI systems communicate effectively through standardized context protocols.
  </p>
</div>
{/* Animated arrow down indicator */}
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-8 z-20">
  <div className="animate-bounce bg-white/10 backdrop-blur-sm p-2 w-10 h-10 ring-1 ring-white/20 shadow-lg rounded-full flex items-center justify-center">
    <svg className="w-6 h-6 text-teal-300" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
      <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
    </svg>
  </div>
</div>

{/* Section 2: Features - Solid Dark Background with Accent Glow Cards */}

{/* Grid Pattern */}

<div className="max-w-6xl mx-auto px-4 relative z-10">
  <h2 className="text-4xl md:text-5xl font-bold mb-20 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-300 via-sky-300 to-purple-300">
    Why Adopt MCP Standards?
  </h2>
  
  <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
    {/* Feature Card 1 */}
    <div className="group relative bg-gray-900/70 rounded-2xl p-8 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:border-teal-400/50 hover:shadow-teal-500/10 hover:-translate-y-1">
      <div className="absolute -top-5 -left-5 bg-gradient-to-br from-teal-500 to-cyan-600 rounded-2xl w-16 h-16 flex items-center justify-center shadow-lg shadow-teal-600/30 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6">
         <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <div className="pt-8 relative">
        <h3 className="text-xl font-bold text-teal-200 mb-4">Standardized AI Context Exchange</h3>
        <p className="text-gray-300/80 leading-relaxed">Navigate the complex AI ecosystem with consistent protocols for context transmission between models, ensuring seamless information exchange across different vendors and platforms.</p>
      </div>
    </div>
    
    {/* Feature Card 2 */}
    <div className="group relative bg-gray-900/70 rounded-2xl p-8 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:border-purple-400/50 hover:shadow-purple-500/10 hover:-translate-y-1">
      <div className="absolute -top-5 -left-5 bg-gradient-to-br from-purple-500 to-fuchsia-600 rounded-2xl w-16 h-16 flex items-center justify-center shadow-lg shadow-purple-600/30 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6">
        <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 12L11 14L15 10M12 3L13.4422 4.4422C14.8691 5.86918 15.582 6.58255 16.5422 6.75629C16.8431 6.80417 17.1569 6.80417 17.4578 6.75629C18.418 6.58255 19.1309 5.86918 20.5566 4.44219L22 3M19 11V17.8C19 18.9201 19 19.4798 18.782 19.9076C18.5903 20.2839 18.2839 20.5903 17.9076 20.782C17.4802 21 16.9204 21 15.8 21H8.2C7.07989 21 6.52035 21 6.09202 20.782C5.71569 20.5903 5.40973 20.2839 5.21799 19.9076C5 19.4798 5 18.9201 5 17.8V11M2 7H22M12 3H16C17.1046 3 18 3.89543 18 5V5H6V5C6 3.89543 6.89543 3 8 3H12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <div className="pt-8 relative">
        <h3 className="text-xl font-bold text-purple-200 mb-4">Enterprise-Grade Security Protocols</h3>
        <p className="text-gray-300/80 leading-relaxed">Implement MCP-verified security practices specifically designed for AI applications, including context validation, prompt injection protection, and data governance controls.</p>
      </div>
    </div>
    
    {/* Feature Card 3 */}
    <div className="group relative bg-gray-900/70 rounded-2xl p-8 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:border-sky-400/50 hover:shadow-sky-500/10 hover:-translate-y-1">
      <div className="absolute -top-5 -left-5 bg-gradient-to-br from-sky-500 to-blue-600 rounded-2xl w-16 h-16 flex items-center justify-center shadow-lg shadow-sky-600/30 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6">
        <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9H4.5C3.67157 9 3 9.67157 3 10.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V10.5C21 9.67157 20.3284 9 19.5 9H18M6 9V7.5C6 4.46243 8.46243 2 11.5 2H12.5C15.5376 2 18 4.46243 18 7.5V9M6 9H18M15 15C15 16.6569 13.6569 18 12 18C10.3431 18 9 16.6569 9 15C9 13.3431 10.3431 12 12 12C13.6569 12 15 13.3431 15 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <div className="pt-8 relative">
        <h3 className="text-xl font-bold text-sky-200 mb-4">Full Stack Integration</h3>
        <p className="text-gray-300/80 leading-relaxed">From LLM providers to frontend frameworks, MCPVerified evaluates and certifies technologies across the entire AI application stack, ensuring end-to-end context protocol compatibility.</p>
      </div>
    </div>
    
    {/* Feature Card 4 */}
    <div className="group relative bg-gray-900/70 rounded-2xl p-8 border border-white/10 backdrop-blur-md shadow-xl transition-all duration-300 hover:border-indigo-400/50 hover:shadow-indigo-500/10 hover:-translate-y-1">
      <div className="absolute -top-5 -left-5 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-2xl w-16 h-16 flex items-center justify-center shadow-lg shadow-indigo-600/30 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6">
        <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 20.5C19.7614 20.5 22 18.2614 22 15.5C22 12.7386 19.7614 10.5 17 10.5C14.2386 10.5 12 12.7386 12 15.5C12 18.2614 14.2386 20.5 17 20.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 8.5C9.76142 8.5 12 6.26142 12 3.5C12 0.738581 9.76142 -1.5 7 -1.5C4.23858 -1.5 2 0.738581 2 3.5C2 6.26142 4.23858 8.5 7 8.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 10.5C14.2386 10.5 12 8.26142 12 5.5C12 2.73858 14.2386 0.5 17 0.5C19.7614 0.5 22 2.73858 22 5.5C22 8.26142 19.7614 10.5 17 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 20.5C9.76142 20.5 12 18.2614 12 15.5C12 12.7386 9.76142 10.5 7 10.5C4.23858 10.5 2 12.7386 2 15.5C2 18.2614 4.23858 20.5 7 20.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <div className="pt-8 relative">
        <h3 className="text-xl font-bold text-indigo-200 mb-4">Open Standard Ecosystem</h3>
        <p className="text-gray-300/80 leading-relaxed">Join a growing network of MCP-certified solutions designed to work together seamlessly. MCPVerified ensures your tools integrate with the broader AI ecosystem through shared protocols.</p>
      </div>
    </div>
  </div>
</div>

{/* Section 3: Explore - Gradient Background with Icon Grid */}

{/* Noise Pattern */}

<div className="max-w-6xl mx-auto px-4 relative z-10">
  <h2 className="text-4xl md:text-5xl font-bold mb-16 text-center text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-fuchsia-300">
    Explore MCP Verified Technologies
  </h2>
  
  <div className="text-center mb-20">
    <p className="text-xl text-indigo-200/80 max-w-3xl mx-auto leading-relaxed">
      Browse our detailed evaluations and integration guides for MCP-compliant technologies across the AI development lifecycle.
    </p>
  </div>
  
  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12 mb-16">
    {/* Topic 1 */}
    <div className="group flex flex-col items-center text-center">
      <div className="w-24 h-24 mb-6 p-5 rounded-2xl bg-gradient-to-br from-indigo-700 to-purple-800 shadow-lg border border-white/10 group-hover:scale-110 group-hover:-translate-y-1 transition-transform duration-300">
        <svg className="w-full h-full text-purple-200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 8V18C5 19.1046 5.89543 20 7 20H17C18.1046 20 19 19.1046 19 18V8M5 8H19M5 8H4M19 8H20M12 12V16M10 10H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 22V20M14 22V20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 4V6M12 4C10.8954 4 10 3.10457 10 2M12 4C13.1046 4 14 3.10457 14 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <h3 className="text-lg font-semibold text-indigo-100 mb-2">MCP Server Frameworks</h3>
      <p className="text-indigo-200/70 text-sm leading-relaxed">Certified backend frameworks with built-in MCP support for structured context handling, retrieval, and transmission.</p>
    </div>
    
    {/* Topic 2 */}
    <div className="group flex flex-col items-center text-center">
      <div className="w-24 h-24 mb-6 p-5 rounded-2xl bg-gradient-to-br from-purple-700 to-fuchsia-800 shadow-lg border border-white/10 group-hover:scale-110 group-hover:-translate-y-1 transition-transform duration-300">
        <svg className="w-full h-full text-fuchsia-200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 21H7C6.46957 21 5.96086 20.7893 5.58579 20.4142C5.21071 20.0391 5 19.5304 5 19V5C5 4.46957 5.21071 3.96086 5.58579 3.58579C5.96086 3.21071 6.46957 3 7 3H17C17.5304 3 18.0391 3.21071 18.4142 3.58579C18.7893 3.96086 19 4.46957 19 5V19C19 19.5304 18.7893 20.0391 18.4142 20.4142C18.0391 20.7893 17.5304 21 17 21H15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 17H15M9 13H15M9 9H15M12 21C13.1046 21 14 20.1046 14 19C14 17.8954 13.1046 17 12 17C10.8954 17 10 17.8954 10 19C10 20.1046 10.8954 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <h3 className="text-lg font-semibold text-purple-100 mb-2">MCP Development & Hosting</h3>
      <p className="text-purple-200/70 text-sm leading-relaxed">Cloud environments and development tools optimized for MCP standard compliance, offering built-in context validation and testing.</p>
    </div>
    
    {/* Topic 3 */}
    <div className="group flex flex-col items-center text-center">
      <div className="w-24 h-24 mb-6 p-5 rounded-2xl bg-gradient-to-br from-fuchsia-700 to-pink-800 shadow-lg border border-white/10 group-hover:scale-110 group-hover:-translate-y-1 transition-transform duration-300">
        <svg className="w-full h-full text-pink-200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <h3 className="text-lg font-semibold text-fuchsia-100 mb-2">MCP Security & Authentication</h3>
      <p className="text-fuchsia-200/70 text-sm leading-relaxed">Security protocols engineered specifically for AI context exchange, with MCP-verified authentication systems and data governance tools.</p>
    </div>
    
    {/* Topic 4 */}
    <div className="group flex flex-col items-center text-center">
      <div className="w-24 h-24 mb-6 p-5 rounded-2xl bg-gradient-to-br from-pink-700 to-rose-800 shadow-lg border border-white/10 group-hover:scale-110 group-hover:-translate-y-1 transition-transform duration-300">
        <svg className="w-full h-full text-rose-200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 6.25278V19.2528M12 6.25278C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25278V19.2528C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2528M12 6.25278C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25278V19.2528C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2528" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <h3 className="text-lg font-semibold text-pink-100 mb-2">MCP Documentation Standards</h3>
      <p className="text-pink-200/70 text-sm leading-relaxed">Standardized documentation practices for MCP-compliant systems and APIs, ensuring clear protocols for context structure and metadata.</p>
    </div>
  </div>
</div>

{/* Section 4: CTA - Dark background with Accent Gradient Button */}

{/* Diagonal Lines Pattern */}

<div className="max-w-4xl mx-auto text-center px-4 relative z-10">
  <h2 className="text-4xl md:text-5xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-teal-300 via-purple-300 to-pink-300">
    Implement MCP Standards Today
  </h2>
  
  <p className="text-xl text-gray-300/80 mb-12 max-w-3xl mx-auto leading-relaxed">
    Learn how to integrate Model Context Protocol standards into your AI systems and join the growing ecosystem of interoperable, MCP-compliant technologies.
  </p>
  
  <div className="relative group inline-block">
    <div className="absolute -inset-1.5 bg-gradient-to-r from-teal-500 via-purple-500 to-pink-500 rounded-lg blur-md opacity-60 group-hover:opacity-80 transition duration-300 animate-pulse"></div>
    <a href="/introduction" className="relative block py-4 px-10 bg-gray-900 rounded-lg text-xl font-semibold text-white transition-all duration-300 border border-transparent hover:border-white/30 hover:shadow-2xl hover:shadow-purple-500/20">
      Get Started with MCP Implementation
      <svg className="w-5 h-5 ml-2 -mr-1 inline-block group-hover:translate-x-1 transition-transform" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </a>
  </div>
</div>

{/* Add animated keyframes & gradient mask style */}

<style jsx>{` @keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -40px) scale(1.15); } 66% { transform: translate(-20px, 30px) scale(0.9); } } .animate-blob { animation: blob 12s infinite ease-in-out; } .animation-delay-2000 { animation-delay: -4s; /* Start partway through */ } .animation-delay-4000 { animation-delay: -8s; /* Start further through */ } .mask-gradient-hero { mask-image: radial-gradient(ellipse 80% 50% at 50% 40%, black 40%, transparent 70%); } `}</style>