Skip to content

Instantly share code, notes, and snippets.

@AlexandroMtzG
Created March 26, 2023 00:22
Show Gist options
  • Save AlexandroMtzG/dd66e7e53f88663722bab24dbc17b4b8 to your computer and use it in GitHub Desktop.
Save AlexandroMtzG/dd66e7e53f88663722bab24dbc17b4b8 to your computer and use it in GitHub Desktop.

Based on the following interfaces, give me an array of blocks for a Landing Page for the topic "BUILD → MARKET → MANAGE YOUR SAAS. The One-Man SaaS Framework. Quick start your MVP with out-of-the-box SaaS features like Authentication, Pricing & Subscriptions, Admin & App portals, Entity Builder (CRUD, API, Webhooks, Permissions, Logs...), Blogging, CRM, Email Marketing, Page Block Builder, Notifications, Onboarding, and more. Don't reinvent the wheel, again.".

This is an example:

[ { "banner": { "style": "top", "text": "Welcome to Remix Page Blocks 👋! Built by SaasRock.", "cta": [ { "text": "Learn more", "href": "https://saasrock.com/?ref=remix-page-blocks-banner" } ] } }, { "header": { "style": "simple", "withLogo": true, "withSignInAndSignUp": false, "withThemeSwitcher": true, "withLanguageSwitcher": true, "links": [ { "path": "/", "title": "Product" }, { "path": "/contact", "title": "Contact" }, { "path": "/newsletter", "title": "Newsletter" }, { "title": "More from me", "items": [ { "title": "SaasRock", "path": "https://saasrock.com/?ref=remix-page-blocks-header", "target": "_blank" }, ] } ] } }, { "hero": { "style": "simple", "headline": "Remix Page Blocks", "subheadline": "A collection of functional blocks: Header, Footer, Hero, Banner, Features, Logo Clouds, Community, Embeded Video, Testimonials, FAQ, Contact, Newsletter, and more.", "image": "https://via.placeholder.com/720x600?text=Your%20Hero%20Image", "cta": [ { "text": "View on Github", "href": "https://github.com/AlexandroMtzG/remix-page-blocks", "isPrimary": true }, { "text": "Built by SaasRock", "href": "https://saasrock.com/?ref=remix-page-blocks-hero", "isPrimary": false, "target": "_blank" } ], "topText": { "text": "Remix 1.6.3 - Tailwind CSS 3.1.2 - DaisyUI 2.4.6" }, "bottomText": { "link": { "text": "Check out my other open source projects", "href": "https://github.com/AlexandroMtzG", "target": "_blank" } } } }, { "logoClouds": { "style": "simple", "headline": "First-class tech stack", "logos": [ { "alt": "Remix", "href": "https://remix.run/ref=saasrock.com", "src": "https://saasrock.com/build/_assets/remix-4ESNCVZ5.png", "srcDark": "https://saasrock.com/build/_assets/remix-dark-U2ASPSOI.png" }, ] } }, { "gallery": { "style": "carousel", "topText": "A great starting point", "headline": "Gallery Section", "subheadline": "Landing, Contact and Newsletter pages with Locale and Theme switchers.", "images": [ { "title": "Landing Page", "src": "https://yahooder.sirv.com/remixblocks/page-blocks/remix-page-blocks/hero-light.png" }, ] } }, { "video": { "style": "simple", "src": "https://www.loom.com/embed/443b9ffaaef2497fa1f94a51579e96f8" } }, { "community": { "style": "simple", "headline": "Community Section", "subheadline": "List your community links and members.", "type": "manual", "members": [ { "user": "Alexandro Martinez", "avatar_url": "https://avatars.githubusercontent.com/u/8606530?v=4" }, ], "cta": [ { "text": "Subscribe", "href": "https://saasrock.com/?ref=remix-page-blocks-community" }, { "text": "Join Discord", "href": "https://discord.gg/KMkjU2BFn9" }, { "text": "Youtube channel", "href": "https://www.youtube.com/channel/UCdXy3FPDHxP-b7NhPspt6cQ" } ] } }, { "testimonials": { "style": "simple", "headline": "Don't take our word for it.", "subheadline": "", "items": [ { "role": "Developer", "company": "SaasRock", "companyUrl": "https://saasrock.com/?ref=remix-page-blocks-testimonials", "logoLightMode": "https://saasrock.com/build/_assets/logo-light-STK7BWWF.png", "logoDarkMode": "https://saasrock.com/build/_assets/logo-dark-DBF6MLNQ.png", "name": "Alexandro Martínez", "personalWebsite": "https://alexandro.dev/?ref=remix-page-blocks-testimonials", "avatar": "https://avatars.githubusercontent.com/u/8606530?v=4", "quote": "I love Remix Page Blocks cuz I built it 😛." }, ] } }, { "features": { "style": "cards", "topText": "DRY - Don't repeat yourself", "headline": "Quality Remix Boilerplate", "subheadline": "Remix Page Blocks is built with some SaasRock front pages.", "columns": 3, "items": [ { "name": "Block Editor", "description": "Easy-to-use UI blocks editor for some components: Hero, Header, Footer..." }, { "name": "Landing Page", "description": "A landing page with a hero section, logo clouds, gallery, video, and more." }, { "name": "Contact Page", "description": "A contact page with a form for submissions (uses formspree.io)." }, ] } }, { "features": { "style": "list", "topText": "Powered by the best tools", "headline": "First-class tech stack", "subheadline": "The codebase comes with the latest technology out there: SSR, utility-first CSS, and TypeScript.", "columns": 2, "items": [ { "name": "Remix", "description": "Focused on web standards and modern web app UX, you’re simply going to build better websites.", "link": { "text": "Read the docs", "href": "https://remix.run/docs/en/v1" } }, { "name": "React", "description": "A JavaScript library for building user interfaces.", "link": { "text": "Read the docs", "href": "https://reactjs.org/docs/getting-started.html" } }, ] } }, { "newsletter": { "style": "rightForm", "headline": "Subscribe to our newsletter to get the latest updates", "subheadline": "We send product updates, upcoming features, promotions, tutorials, and more." } }, { "faq": { "style": "simple", "headline": "FAQ", "subheadline": "Frequently asked questions", "items": [ { "question": "Question 1?", "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, { "question": "Question 6 with link?", "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", "link": { "text": "Visit my other boilerplates", "href": "https://alexandromg.gumroad.com/?ref=remix-page-blocks-faq", "target": "_blank" } } ] } }, { "footer": { "style": "columns", "text": "A collection of functional blocks: Header, Footer, Hero, Banner, Features, Logo Clouds, Community, Embeded Video, Testimonials, FAQ, Contact, Newsletter, and more.", "sections": [ { "name": "Application", "items": [ { "name": "Home", "href": "/" }, { "name": "Contact", "href": "/contact" }, { "name": "Newsletter", "href": "/newsletter" } ] }, { "name": "Legal", "items": [ { "name": "Privacy policy", "href": "/privacy-policy" }, { "name": "Terms of use", "href": "/terms-and-conditions" }, { "name": "Components", "href": "/components" } ] } ], "socials": { "instagram": "saas_rock", "twitter": "saas_rock", "github": "AlexandroMtzG", "discord": "invite/KMkjU2BFn9" } } } ]

Interfaces:

type PageBlockDto = { banner?: BannerBlockDto; header?: HeaderBlockDto; footer?: FooterBlockDto; hero?: HeroBlockDto; gallery?: GalleryBlockDto; logoClouds?: LogoCloudsBlockDto; video?: VideoBlockDto; community?: CommunityBlockDto; testimonials?: TestimonialsBlockDto; features?: FeaturesBlockDto; newsletter?: NewsletterBlockDto; faq?: FaqBlockDto; };

interface BannerBlockDto { style: BannerBlockStyle | string; text: string; cta: { text: string; href: string; target?: string; }[]; }

enum BannerBlockStyle { top = "top", bottom = "bottom", }

interface HeaderBlockDto { style: HeaderBlockStyle | string; links: NavbarItemDto[]; withLogo: boolean; withSignInAndSignUp: boolean; withThemeSwitcher: boolean; withLanguageSwitcher: boolean; }

enum HeaderBlockStyle { simple = "simple", }

interface FooterBlockDto { style: FooterBlockStyle | string; text?: string; sections: FooterSectionDto[]; socials?: SocialsDto; }

interface FooterSectionDto { name: string; items: { name: string; href: string; target?: string }[]; }

enum FooterBlockStyle { columns = "columns", }

interface HeroBlockDto { style: HeroBlockStyle | string; headline: string; subheadline: string; image?: string; topText?: TextWithLinkDto; cta: { text: string; href: string; isPrimary: boolean; target?: string; }[]; bottomText?: TextWithLinkDto; }

enum HeroBlockStyle { simple = "simple", image = "image", }

interface GalleryBlockDto { style: GalleryBlockStyle | string; topText?: string; headline?: string; subheadline?: string; images: { title: string; src: string }[]; }

enum GalleryBlockStyle { carousel = "carousel", }

interface LogoCloudsBlockDto { style: LogoCloudsBlockStyle | string; headline?: string; logos?: LogoCloudDto[]; }

interface LogoCloudDto { src: string; srcDark?: string; alt: string; href: string; }

enum LogoCloudsBlockStyle { custom = "custom", simple = "simple", }

interface VideoBlockDto { style: VideoBlockStyle | string; headline?: string; subheadline?: string; src: string; }

enum VideoBlockStyle { simple = "simple", }

interface CommunityBlockDto { style: CommunityBlockStyle | string; headline: string; subheadline: string; cta: { text: string; href: string }[]; type: "manual" | "github"; members?: { user: string; avatar_url: string }[]; }

enum CommunityBlockStyle { simple = "simple", }

interface TestimonialsBlockDto { style: TestimonialsBlockStyle | string; headline: string; subheadline: string; items: TestimonialDto[]; }

enum TestimonialsBlockStyle { simple = "simple", }

interface FeaturesBlockDto { style: FeaturesBlockStyle | string; headline: string; subheadline: string; topText?: string; columns: number; items: { name: string; description: string; img?: string; link?: { text: string; href: string; }; }[]; }

enum FeaturesBlockStyle { list = "list", cards = "cards", }

interface NewsletterBlockDto { style: NewsletterBlockStyle | string; headline?: string; subheadline?: string; socials?: SocialsDto; }

enum NewsletterBlockStyle { simple = "simple", rightForm = "rightForm", }

interface FaqBlockDto { style: FaqBlockStyle | string; headline?: string; subheadline?: string; items: { question: string; answer: string; link?: { text: string; href: string; target?: string; }; }[]; }

enum FaqBlockStyle { simple = "simple", }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment