@caltho/site-kit 0.2.10 → 0.2.11

package/dist/sections/presets.js

@@ -0,0 +1,300 @@
+// The placeholder every site has in CalOS (a soft grey with a small landscape mark): replaced in the editor.
+const PHOTO = "photos/placeholder.jpg";
+const LOGO = "logos/replace-me.png";
+export const presets = [
+    {
+        key: "hero",
+        name: "Opening",
+        description: "A large heading, a line about the business, two buttons and a photo beside them",
+        block: {
+            type: "own",
+            layout: "two",
+            spacing: "roomy",
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Work done properly, the first time", size: "large" },
+                        { type: "text", text: "Say in a sentence or two what the business does, who it's for and where it works." },
+                        { type: "button", label: "Get in touch", href: "/", style: "main" },
+                        { type: "button", label: "See our services", href: "/", style: "quiet" },
+                    ],
+                },
+                { parts: [{ type: "photo", image: { src: PHOTO, alt: "" }, shape: "landscape" }] },
+            ],
+        },
+    },
+    {
+        key: "banner",
+        name: "Words over a photo",
+        description: "A heading, a line and a button over a photo, darkened so the words read",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            spacing: "roomy",
+            background: { src: PHOTO, alt: "" },
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Careful work, from first visit to last", size: "large" },
+                        { type: "text", text: "A line on what sets the business apart." },
+                        { type: "button", label: "Book a visit", href: "/", style: "main" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "features",
+        name: "Three reasons",
+        description: "Three columns side by side, each a heading and a few words",
+        block: {
+            type: "own",
+            layout: "three",
+            columns: [
+                { parts: [{ type: "heading", text: "Clear pricing", size: "small" }, { type: "text", text: "You know the cost before any work starts, in writing." }] },
+                { parts: [{ type: "heading", text: "On time", size: "small" }, { type: "text", text: "We agree a date and keep to it, and tell you early if anything changes." }] },
+                { parts: [{ type: "heading", text: "Easy to reach", size: "small" }, { type: "text", text: "Call or write and you hear back the same working day." }] },
+            ],
+        },
+    },
+    {
+        key: "testimonial",
+        name: "What a client said",
+        description: "A client's words, centred on a quiet background",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            tone: "soft",
+            columns: [{ parts: [{ type: "quote", text: "They were careful, quick to answer and finished when they said they would. We would use them again.", who: "Client's name, their company" }] }],
+        },
+    },
+    {
+        key: "pricing",
+        name: "Prices",
+        description: "Three packages side by side, each with its price, what's included and a button",
+        block: {
+            type: "own",
+            layout: "three",
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Essential", size: "small" },
+                        { type: "price", amount: "Price", per: "a visit" },
+                        { type: "list", items: ["One visit", "Written quote", "Work guaranteed for a year"], style: "checks" },
+                        { type: "button", label: "Choose essential", href: "/", style: "quiet" },
+                    ],
+                },
+                {
+                    parts: [
+                        { type: "heading", text: "Standard", size: "small" },
+                        { type: "price", amount: "Price", per: "a month", note: "Most chosen" },
+                        { type: "list", items: ["Up to three visits", "Priority booking", "Work guaranteed for two years"], style: "checks" },
+                        { type: "button", label: "Choose standard", href: "/", style: "main" },
+                    ],
+                },
+                {
+                    parts: [
+                        { type: "heading", text: "Complete", size: "small" },
+                        { type: "price", amount: "Price", per: "a month" },
+                        { type: "list", items: ["Unlimited visits", "Same-day response", "A named contact"], style: "checks" },
+                        { type: "button", label: "Choose complete", href: "/", style: "quiet" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "call-to-action",
+        name: "Ask to get in touch",
+        description: "A heading and a button on the brand colour, to end a page",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            tone: "brand",
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Ready when you are", size: "large" },
+                        { type: "text", text: "Tell us what you need and we'll reply within one working day." },
+                        { type: "button", label: "Get in touch", href: "/", style: "main" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "contact",
+        name: "Contact",
+        description: "A heading, a few words and buttons to write or call",
+        block: {
+            type: "own",
+            layout: "one",
+            columns: [
+                {
+                    parts: [
+                        { type: "heading", text: "Get in touch", size: "medium" },
+                        { type: "text", text: "Write or call during working hours. We reply to every message within one working day." },
+                        { type: "button", label: "Email us", href: "mailto:hello@example.com", style: "main" },
+                        { type: "button", label: "Call us", href: "tel:+15550100000", style: "quiet" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "questions",
+        name: "Common questions",
+        description: "A heading beside a list of questions and their answers",
+        block: {
+            type: "own",
+            layout: "wide-right",
+            columns: [
+                { parts: [{ type: "heading", text: "Common questions", size: "medium" }, { type: "text", text: "Anything else, just ask." }] },
+                {
+                    parts: [
+                        {
+                            type: "list",
+                            style: "bullets",
+                            items: [
+                                "How soon can you start? Usually within two weeks of agreeing the work.",
+                                "Do you give written quotes? Yes, always, before any work starts.",
+                                "Which areas do you cover? Say here where the business works.",
+                                "How do I pay? By card or bank transfer, once the work is done.",
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "photo-text",
+        name: "Photo and words",
+        description: "A photo beside a heading, a few words and a button",
+        block: {
+            type: "own",
+            layout: "two",
+            columns: [
+                { parts: [{ type: "photo", image: { src: PHOTO, alt: "" }, shape: "square" }] },
+                {
+                    parts: [
+                        { type: "heading", text: "About us", size: "medium" },
+                        { type: "text", text: "Who runs the business, how long it has been going and what it cares about." },
+                        { type: "button", label: "Meet the team", href: "/", style: "quiet" },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "stats",
+        name: "Facts in a row",
+        description: "A few numbers that say what the business has done",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            tone: "soft",
+            spacing: "tight",
+            columns: [
+                {
+                    parts: [
+                        {
+                            type: "stats",
+                            items: [
+                                { value: "Number", label: "years in business" },
+                                { value: "Number", label: "clients served" },
+                                { value: "Number", label: "days to hear back" },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "comparison",
+        name: "Comparison",
+        description: "A heading over a table comparing a few options, one of them picked out",
+        block: {
+            type: "own",
+            layout: "one",
+            heading: "Compare the options",
+            intro: "Say in a line how the options differ and who each one suits.",
+            columns: [
+                {
+                    parts: [
+                        {
+                            type: "table",
+                            columns: ["", "Option one", "Option two", "Option three"],
+                            rows: [
+                                { label: "Price", cells: ["Price", "Price", "Price"] },
+                                { label: "Feature one", cells: ["yes", "yes", "yes"] },
+                                { label: "Feature two", cells: ["no", "yes", "yes"] },
+                                { label: "Feature three", cells: ["no", "no", "yes"] },
+                            ],
+                            highlight: 2,
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "features-icons",
+        name: "Features with icons",
+        description: "Three cards side by side, each an icon, a heading and a few words",
+        block: {
+            type: "own",
+            layout: "three",
+            heading: "What you get",
+            columns: [
+                { card: true, parts: [{ type: "icon", name: "check", size: "medium" }, { type: "heading", text: "Feature one", size: "small" }, { type: "text", text: "Say in a sentence what this means for the client." }] },
+                { card: true, parts: [{ type: "icon", name: "clock", size: "medium" }, { type: "heading", text: "Feature two", size: "small" }, { type: "text", text: "Say in a sentence what this means for the client." }] },
+                { card: true, parts: [{ type: "icon", name: "chat", size: "medium" }, { type: "heading", text: "Feature three", size: "small" }, { type: "text", text: "Say in a sentence what this means for the client." }] },
+            ],
+        },
+    },
+    {
+        key: "logo-strip",
+        name: "Logo strip",
+        description: "A row of the logos of clients, partners or memberships",
+        block: {
+            type: "own",
+            layout: "one",
+            align: "center",
+            spacing: "tight",
+            columns: [
+                {
+                    parts: [
+                        {
+                            type: "logos",
+                            title: "Who we work with",
+                            images: [
+                                { src: LOGO, alt: "Company name" },
+                                { src: LOGO, alt: "Company name" },
+                                { src: LOGO, alt: "Company name" },
+                                { src: LOGO, alt: "Company name" },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        key: "video",
+        name: "Video",
+        description: "A heading, a line and a YouTube or Vimeo video under them",
+        block: {
+            type: "own",
+            layout: "one",
+            heading: "See how it works",
+            intro: "A line on what the video shows.",
+            columns: [{ parts: [{ type: "video", title: "Video of how it works" }] }],
+        },
+    },
+];