https://ffoz.org/_next/static/chunks/pages/internal/dev-80f0b6812c285d1c.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2691],{3845:(e,n,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/internal/dev",function(){return t(32018)}])},32018:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>r});var a=t(37876),i=t(14232),s=t(6724),l=t(59644),o=t(49604);function r(){let[e,n]=(0,i.useState)(!1);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(l.A,{fluid:!0,className:"g-0",children:(0,a.jsxs)("div",{className:"bg-light text-center py-8 mb-6",children:[(0,a.jsx)("div",{className:"small text-uppercase em-spacing-05 fw-bold mb-2 false",children:"Hygraph"}),(0,a.jsx)("h1",{className:"mb-4",children:"Page Builder Components"}),(0,a.jsx)("p",{className:"large",children:"Components supported in Hygraph Pages model"})]})}),(0,a.jsxs)(l.A,{children:[(0,a.jsxs)("div",{className:"col-lg-11 col-xl-8 m-auto",children:[(0,a.jsx)("h4",{className:"mt-10 text-center pb-5",children:"General Info About the Page Builder"}),(0,a.jsx)("p",{className:"large",children:"The Page Builder was created to enable the development and content editor team to easily create landing pages anywhere on the site. This is a versatile system designed to empower our team by offering a modular approach to building and customizing web pages using Hygraph CMS. Each page is composed of several standard and dynamic global components that can be combined together, mixed and matched to create unique layouts, rich visual experiences, and functional designs tailored to our needs."}),!e&&(0,a.jsx)("div",{className:"text-center",children:(0,a.jsx)("button",{className:"btn btn-light btn-sm mb-3",onClick:()=>{n(!0)},type:"button",children:"More..."})}),e&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{children:"This system revolves around a collection of reusable custom components, each serving a distinct purpose. From info media blocks and interactive elements to heading and text sections and embedded links, the components are designed to work seamlessly together, ensuring consistency and efficiency across the website."}),(0,a.jsx)("p",{children:"On this page, you’ll find a comprehensive list of all available components, each accompanied by examples with detailed instructions, demonstrating their functionality and potential use cases. Whether we’re looking to integrate a carousel, showcase multimedia content, or create an engaging call-to-action, this guide will provide the inspiration and tools we need to bring the vision to life."}),(0,a.jsx)("p",{children:"Explore the component examples below to see how the Page Builder can transform our web content into a consistent, cohesive and impactful user experience for landing pages."}),(0,a.jsx)("p",{children:"Every component contains an INFO field that controls layout and styling. TYPE selects the sub-type, CLASS controls the overall background and padding styling, and SUB CLASS adds additional class options to some components to control deeper aspect of the component layout and styling."})]})]}),(0,a.jsx)(o.default,{componentList:!0})]})]})}r.getLayout=s.hk},49604:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>o});var a=t(37876),i=t(59644),s=t(48230),l=t.n(s);function o(){let e=[{label:"Hero",href:"/internal/dev/hero",description:"A banner image component typically placed at the top of a page."}

1,{label:"Hero Video",href:"/internal/dev/herovideo",description:"A wide motion graphic banner anywhere on the a page."},{label:"Info Block",href:"/internal/dev/infoblock",description:"A component to display informational label, heading and text."},{label:"InfoBlock Group",href:"/internal/dev/infoblockgroup",description:"A collection of Info Blocks for organized content."},{label:"List Group",href:"/internal/dev/listgroup",description:"Presents a structured list with unique FontAwesome icons, images, or motion graphics."},{label:"InfoMedia Block",href:"/internal/dev/infomediablock",description:"Combines text with media (static or motion graphic) in a flexible layout."},{label:"Card Group",href:"/internal/dev/cardgroup",description:"Displays a group of cards with images (some with motion graphics) + text for showcasing related content in various formats."},{label:"Video Block",href:"/internal/dev/videoblock",description:"Embeds and displays a single video item."},{label:"Video Group",href:"/internal/dev/videogroup",description:"Embeds and displays any number of video items that plays in a modal in a grid."},{label:"Image Banner",href:"/internal/dev/imagebanner",description:"Showcases a single image or motion graphic in various styles."},{label:"Image Group",href:"/internal/dev/imagegroup",description:"Showcases a wide banner image, or multiple wide banner images in a carousel."},{label:"Photo Gallery",href:"/internal/dev/photogallery",description:"Displays a gallery of photos with optional lightbox support."},{label:"Testimonial",href:"/internal/dev/testimonial",description:"Highlights customer or user testimonials in various types of sliders."},{label:"Buttons & Menu",href:"/internal/dev/buttonsrow",description:"A row of buttons for call-to-action purposes, or a scroll-to page menu."},{label:"Modals",href:"/internal/dev/modals",description:"Displays content in an overlay popup window in various sizes."}],n=[{label:"Explore Sections",href:"/internal/dev/exploresections",description:"Displays various Explore components used site-wide."},{label:"Friends Cards",href:"/internal/dev/friendscards",description:"Cards to display FFOZ Friend tier levels."},{label:"ClubFinder",href:"/internal/dev/clubfinder",description:"Displays a banner with form to find a club, with static map or looping video."},{label:"Featured Resource",href:"/internal/dev/featuredresource",description:"Displays a main featured resource."},{label:"Upcoming Events",href:"/internal/dev/upcomingevents",description:"Include upcoming events on a page"},{label:"Our Sites",href:"/internal/dev/oursites",description:"Simple Icon Cards featuring the main brands and imprints of FFOZ."},{label:"Share Page",href:"/internal/dev/sharepage",description:"A group of icons to share any page to social media platforms."},{label:"Shapes",href:"/internal/dev/shapes",description:"Adds decorative shapes to a page."},{label:"Calendly Meet & Greet",href:"/internal/dev/calendly",description:"Student and leader Torah Club Meet & Greet schedulers."}];return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(i.A,{className:"pt-8 pb-10 w-lg-66 text-center",children:[(0,a.jsx)("h4",{className:"pb-2",children:"Standard Components"}),(0,a.jsx)("p",{children:(0,a.jsx)("em",{children:"Content entered and visualized via Hygraph"})}),(0,a.jsx)("ul",{className:"mt-5 nav nav-pills flex-column flex-md-row justify-content-center",children:e.map((e,n)=>(0,a.jsx)(l(),{href:e.href,className:"btn btn-sm btn-light rounded-pill m-2",children:e.label},n))}),(0,a.jsx)("h4",{className:"mt-10 pb-2",children:"Dynamic Global Components"}),(0,a.jsx)("p",{children:(0,a.jsx)("em",{children:"Content entered and updated directly in Code"})}),(0,a.jsx)("ul",{className:"mt-5 nav nav-pills flex-column flex-md-row justify-content-center",children:n.map((e,n)=>(0,a.jsx)(l(),{href:e.href,className:"btn btn-sm btn-light rounded-pill m-2",children:e.label},n))}),(0,a.jsx)("h4",{className:"mt-10 pb-2",children:"Article & Advert Components"}),(0,a.jsx)("p",{children:(0,a.jsx)("em",{children:"Add or update content directly via Hygraph articles to preview"})}),(0,a.jsx)("ul",{className:"mt-5 nav nav-pills flex-column flex-md-row justify-content-center",children:[{label:"Preview of Adverts",href:"/messiah/articles/dev-preview-of-article-or-page-adverts",description:"Displays adverts in articles or pages."},{label:"Preview of Article Components",href:"/messiah/articles/test-for-article-components",description:"Displays all article components"}].map((e,n)=>(0,a.jsx)(l(),{href:e.href,className:"btn btn-sm btn-light rounded-pill m-2",children:e.label},n))})]}),(0,a.jsxs)(i.A,{className:"pb-10 w-lg-80 text-center",children:[(0,a.jsx)("h4",{className:"mt-10 pb-5",children:"Component Descriptions"}),(0,a.jsxs)("table",{className:"table table-striped text-start",children:[(0,a.jsx)("thead",{children:(0,a.jsxs)("tr",{children:[(0,a.jsx)("th",{children:"Component"}),(0,a.jsx)("th",{children:"Description"})]})}),(0,a.jsx)("tbody",{children:e.concat(n).map((e,n)=>(0,a.jsxs)("tr",{children:[(0,a.jsx)("td",{children:e.label}),(0,a.jsx)("td",{children:e.description})]},n))})]})]})]})}}},e=>{e.O(0,[636,6593,8792],()=>e(e.s=3845)),_N_E=e.O()}]);