Merge pull request #1652 from tinacms/quote-block

Quote block

components/blocks/Blocks.tsx

@@ -9,6 +9,7 @@ import {
   FaqBlock,
   ContentBlock,
   LogoGridBlock,
+  QuoteBlock,
 } from './'
 import { ColumnsBlock } from './Columns'
 import { RecentPostsBlock } from './RecentPosts'
@@ -87,6 +88,14 @@ export const Blocks = ({
             index={index}
           />
         )
+      case 'PageBlocksQuote':
+        return (
+          <QuoteBlock
+            key={`block-${index}`}
+            data={block}
+            index={index}
+          />
+        )
       default:
         return null
     }

components/blocks/Features.tsx

@@ -12,9 +12,8 @@ export function FeatureBlock({ data, index }) {
     <>
       <div
         key={'feature-' + index}
-        className={`relative w-full flex flex-col-reverse items-center lg:justify-center lg:min-h-[70vh] gap-12 perspective ${
-          isReversed ? 'lg:flex-row-reverse' : 'lg:flex-row'
-        }`}
+        className={`relative w-full flex flex-col-reverse items-center lg:justify-center lg:min-h-[70vh] gap-12 perspective ${isReversed ? 'lg:flex-row-reverse' : 'lg:flex-row'
+          }`}
       >
         <div className="w-full lg:w-2/5 max-w-prose flex flex-col gap-6 lg:gap-8">
           {data.headline && (
@@ -36,20 +35,17 @@ export function FeatureBlock({ data, index }) {
         </div>
         {data.media && data.media[0] && (
           <div
-            className={`w-full min-w-0 lg:w-1/2 ${
-              isReversed ? 'pivot-reverse' : 'pivot'
-            } ${
-              (data.media[0].image || data.media[0].src) &&
+            className={`w-full min-w-0 lg:w-1/2 ${(data.media[0].image || data.media[0].src) &&
               'rounded-lg shadow-panel overflow-hidden bg-gradient-to-br from-blue-800 via-blue-900 to-slate-900'
-            }`}
+              }`}
           >
             {data.media && data.media[0].image && (
               <img
                 src={data.media[0].image}
                 alt={data.headline}
                 className="w-full h-auto"
-                // width="1120px"
-                // height="800px"
+              // width="1120px"
+              // height="800px"
               />
             )}
             {data.media && data.media[0].src && (
@@ -63,11 +59,10 @@ export function FeatureBlock({ data, index }) {
                   </div>
                 )}
                 <div
-                  className={`file relative ${
-                    data.media[0].file
-                      ? 'rounded-lg rounded-tl-none'
-                      : 'rounded-lg'
-                  } overflow-hidden w-full text-blue-50 border-2 border-blue-800 bg-gradient-to-br from-blue-800 via-blue-900 to-blue-1000 shadow-panel`}
+                  className={`file relative ${data.media[0].file
+                    ? 'rounded-lg rounded-tl-none'
+                    : 'rounded-lg'
+                    } overflow-hidden w-full text-blue-50 border-2 border-blue-800 bg-gradient-to-br from-blue-800 via-blue-900 to-blue-1000 shadow-panel`}
                   style={{
                     fontSize:
                       1.25 * (data.media[0].scale ? data.media[0].scale : 1) +

components/blocks/LogoGrid.tsx

@@ -11,7 +11,7 @@ const Logo = ({ data, index, windowWidth = 1000 }) => {
       href={data.link}
       title={data.name}
       target="_blank"
-      className="block flex-none transition ease-out duration-150 hover:opacity-70 cursor-pointer"
+      className="block flex-none transition ease-out duration-150 hover:brightness-0 cursor-pointer"
       style={{
         width: data.size ? data.size * scaleFactor : 200 * scaleFactor,
       }}
@@ -56,17 +56,17 @@ export function LogoGridBlock({ data, index }) {
     <section
       key={'feature-grid-' + index}
       className={
-        'relative z-10 py-16 lg:py-24 bg-gradient-to-br from-blue-800 via-blue-900 to-blue-1000'
+        'relative z-10 py-16 lg:pb-20 lg:pt-16'
       }
     >
       <Container width="wide">
         <div className="flex flex-col items-center">
           {data.title && (
-            <h3 className="font-tuner inline-block text-center text-3xl lg:text-4xl lg:leading-tight bg-gradient-to-br from-blue-200 via-blue-300 to-blue-500 bg-clip-text text-transparent mb-6 lg:mb-8">
+            <h3 className="font-tuner inline-block text-center text-xl lg:text-md lg:leading-tight bg-gradient-to-br text-gray-400 mb-6 lg:mb-8">
               {data.title}
             </h3>
           )}
-          <div className="w-full flex items-center flex-wrap justify-center gap-10 md:gap-16 lg:gap-20">
+          <div className="w-full flex items-center flex-wrap justify-center gap-10 md:gap-16 lg:gap-20  brightness-[.15]">
             {data.items &&
               data.items.map((data, index) => {
                 return (

components/blocks/Quote.template.ts

@@ -0,0 +1,28 @@
+import type { TinaTemplate } from 'tinacms'
+
+export const quoteTemplate: TinaTemplate = {
+  label: 'Quote',
+  name: 'quote',
+  ui: {
+    // previewSrc: '/img/blocks/columns.png',
+  },
+  fields: [
+    {
+      label: 'Title',
+      name: 'title2',
+      ui: { component: "textarea" },
+      type: 'string',
+    },
+    {
+      label: 'Sub Text',
+      name: 'subtext',
+      ui: { component: "textarea" },
+      type: 'string',
+    },
+    {
+      label: 'logo',
+      name: 'logo',
+      type: 'image',
+    }
+  ],
+}

components/blocks/Quote.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { tinaField } from 'tinacms/dist/react'
+import { Container } from './Container'
+
+export const QuoteBlock = ({ data, index }) => {
+  return (
+    <>
+      <section
+        className="relative z-10 py-16 lg:py-24  bg-[url('/svg/orange-bg.svg')] bg-cover bg-center text-white">
+        <Container width="wide">
+          <div className="flex flex-col items-center lg:justify-center gap-12 lg:gap-36 perspective lg:flex-row">
+            <div className="lg:w-1/5 flex flex-col gap-6 lg:gap-8  max-w-sm">
+              <img src={data.logo} />
+            </div>
+            <div className="min-w-0 lg:w-1/2 ">
+              <blockquote className="text-3xl italic mb-2" data-tina-field={tinaField(data, 'title2')}>{data.title2}</blockquote>
+              <p data-tina-field={tinaField(data, 'subtext')}>{data.subtext}</p>
+            </div>
+          </div>
+        </Container>
+      </section >
+    </>
+  )
+}

components/blocks/Testimonials.tsx

@@ -9,17 +9,16 @@ const Testimonial = ({ data, ...props }) => {
 
   return (
     <Elem
-      className={`group px-7 lg:px-8 py-6 lg:py-7 mb-6 break-inside-avoid rounded-md bg-gradient-to-b from-white to-white/30 shadow-[inset_0_0_0_1px_rgba(223,219,252,0.15),_0_0_1px_1px_rgba(223,219,252,0.5)] flex flex-col gap-5 text-gray-700 ${
-        data.link
-          ? 'cursor-pointer hover:shadow-lg hover:bg-white hover:scale-[1.01] transition-all duration-150 ease-out'
-          : ''
-      }`}
+      className={`group px-7 lg:px-8 py-6 lg:py-7 mb-6 break-inside-avoid rounded-md bg-gradient-to-b from-white to-white/30 shadow-[inset_0_0_0_1px_rgba(223,219,252,0.15),_0_0_1px_1px_rgba(223,219,252,0.5)] flex flex-col gap-5 text-gray-700 ${data.link
+        ? 'cursor-pointer hover:shadow-lg hover:bg-white hover:scale-[1.01] transition-all duration-150 ease-out'
+        : ''
+        }`}
       href={data.link}
       {...props}
       data-tina-field={tinaField(data, 'name')}
     >
       {data.testimonial && (
-        <div className="text-base lg:text-lg">
+        <div className="text-base lg:text-md">
           <TinaMarkdown
             // components={contentComponents}
             content={data.testimonial}
@@ -33,11 +32,10 @@ const Testimonial = ({ data, ...props }) => {
               alt="Testimonial avatar"
               width={56}
               height={56}
-              className={`block absolute w-full h-full top-0 left-0 object-fill ${
-                data.link
-                  ? 'group-hover:scale-105 transition-all duration-300 ease-in-out'
-                  : ''
-              }`}
+              className={`block absolute w-full h-full top-0 left-0 object-fill ${data.link
+                ? 'group-hover:scale-105 transition-all duration-300 ease-in-out'
+                : ''
+                }`}
               src={data.avatar}
             />
             <div className="block absolute w-full h-full top-0 left-0 rounded-full shadow-[inset_0_0_0_1px_rgba(66,_153,_225,_0.2)]"></div>
@@ -72,7 +70,7 @@ export function TestimonialsBlock({ data, index }) {
   return (
     <>
       <h1
-        className={`font-tuner inline-block text-3xl lg:text-5xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-balance text-center mt-12`}
+        className={`font-tuner inline-block text-3xl lg:text-3xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-balance text-center mt-20`}
       >
         Loved by Developers
       </h1>

components/blocks/index.ts

@@ -13,3 +13,4 @@ export * from './Blocks'
 export * from './Story'
 export * from './FeatureGrid'
 export * from './LogoGrid'
+export * from './Quote'