{
  "name": "testimonials/masonry-grid",
  "type": "registry:component",
  "description": "Masonry grid testimonial layout",
  "files": [
    {
      "path": "example/Testimonials/SectionTestimonials_MasonryGrid.astro",
      "type": "registry:component",
      "content": "---\nimport BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';\n\ninterface Testimonial {\n  message: string;\n  name: string;\n  role: string;\n  avatar: string;\n}\n\nconst testimonials: Testimonial[] = [\n  {\n    message:\n      \"Advisory Has Completely Transformed The Way I Manage My Finances. With Its Intuitive Interface And Powerful Features, I Now Have Better Control And Visibility Into My Expenses And Investments. I Couldn't Recommend It!\",\n    name: 'Samantha Jones',\n    role: 'CFO at BrightPath',\n    avatar:\n      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=160&auto=format&fit=crop',\n  },\n  {\n    message:\n      \"I've Been Using Advisory For Years And It Has Completely Changed My Finances Without It. From Tracking Expenses To Creating Budgets, Advisory Has Simplified Every Aspect Of My Financial Management. Thank You For Such An Amazing Platform!\",\n    name: 'Michael Carter',\n    role: 'Senior Web Developer',\n    avatar:\n      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=160&auto=format&fit=crop',\n  },\n  {\n    message:\n      \"Advisory Has Been A Game-Changer For Our Business. With Its Comprehensive Financial Management Tools, We've Been Able To Streamline Our Processes And Make More Informed Decisions. The Customer Support Team Is Also Top-Notch.\",\n    name: 'Anita Ramesh',\n    role: 'Manager at GlobalSync',\n    avatar:\n      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=160&auto=format&fit=crop',\n  },\n  {\n    message:\n      \"As Someone Who Is New To Investing, Advisory Has Been An Invaluable Resource That Has Helped Me Understand My Portfolio Better And Optimize My Investments For Better Returns. I Couldn't Be Happier With The Results!\",\n    name: 'Jordyn Saris',\n    role: 'CEO, Beta Technologies',\n    avatar:\n      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=160&auto=format&fit=crop',\n  },\n  {\n    message:\n      \"Advisory Has Exceeded All My Expectations. Not Only Does It Make Managing Finances Easy And Efficient, But The Platform Also Prioritizes My Security. Giving Me Peace Of Mind Knowing That My Data Is Safe. I'm A Loyal Advisory User For Life!\",\n    name: 'James Rodriguez',\n    role: 'Founder of GreenHerves',\n    avatar:\n      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=160&auto=format&fit=crop',\n  },\n  {\n    message:\n      'Advisory Has Completely Transformed The Way I Manage My Finances. With Its Intuitive Interface And Powerful Features, I Now Have Better Control And Visibility Into My Expenses And Investments. Highly Recommend It!',\n    name: 'Samantha Jones',\n    role: 'CFO at BrightPath',\n    avatar:\n      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=160&auto=format&fit=crop',\n  },\n];\n---\n\n<section\n  class=\"testimonials-grid-section relative overflow-hidden py-20 sm:py-24\"\n>\n  <BackgroundEffect\n    gradientType=\"var(--gradient-top-fade-linear)\"\n    patternType=\"none\"\n    noiseType=\"none\"\n  />\n\n  <div class=\"container\">\n    <div class=\"mb-10 text-center sm:mb-12\">\n      <div\n        class=\"rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm\"\n        data-scheme=\"shift\"\n      >\n        <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n        Testimonials\n      </div>\n      <h2 class=\"h2 mb-4\">\n        What People Say About <span class=\"sp-emphasis\">Pablo</span>\n      </h2>\n      <p class=\"text-fg-sub mx-auto max-w-3xl text-base sm:text-lg md:text-xl\">\n        Discover how Pablo is transforming the way people build websites\n      </p>\n    </div>\n\n    <div class=\"columns-1 gap-3 sm:columns-2 sm:gap-4 lg:columns-3\">\n      {\n        testimonials.map((testimonial) => (\n          <div class=\"mb-3 break-inside-avoid sm:mb-4\">\n            <article\n              class=\"testimonial-card card-base rounded-card\"\n              data-scheme=\"card-primary\"\n            >\n              <blockquote class=\"text-fg text-sm leading-relaxed sm:text-base\">\n                {testimonial.message}\n              </blockquote>\n              <div class=\"testimonial-author\">\n                <img\n                  src={testimonial.avatar}\n                  alt={testimonial.name}\n                  class=\"aspect-square h-10 w-10 shrink-0 rounded-full object-cover sm:h-12 sm:w-12\"\n                />\n                <div class=\"min-w-0 flex-1\">\n                  <p class=\"text-fg mb-0.5 text-sm font-semibold\">\n                    {testimonial.name}\n                  </p>\n                  <p class=\"text-fg-sub truncate text-xs\">{testimonial.role}</p>\n                </div>\n              </div>\n            </article>\n          </div>\n        ))\n      }\n    </div>\n  </div>\n</section>\n\n<style>\n  @reference \"tailwindcss\";\n\n  .testimonials-grid-section {\n    width: 100%;\n  }\n\n  .card-base {\n    position: relative;\n    overflow: hidden;\n    background: var(--sp-bg);\n  }\n\n  .card-base::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: var(--background-image-noise);\n    background-size: 200px;\n    opacity: 0.05;\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .testimonial-card {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: 1.25rem;\n    padding: 1.25rem;\n  }\n\n  .testimonial-author {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    margin-top: auto;\n  }\n\n  @media (min-width: 640px) {\n    .testimonial-card {\n      padding: 1.5rem;\n      gap: 1.5rem;\n    }\n  }\n\n  @media (min-width: 1024px) {\n    .testimonial-card {\n      padding: 1.75rem;\n    }\n  }\n</style>\n"
    }
  ],
  "category": "example"
}