{"id":753,"date":"2026-08-02T21:35:35","date_gmt":"2026-08-02T21:35:35","guid":{"rendered":"https:\/\/socials.ink\/?page_id=753"},"modified":"2026-08-03T09:41:51","modified_gmt":"2026-08-03T09:41:51","slug":"15-field-brand-kit-2","status":"publish","type":"page","link":"https:\/\/socials.ink\/?page_id=753","title":{"rendered":"15-field Brand Kit"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"753\" class=\"elementor elementor-753\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f11b9f e-con e-atomic-element e-flexbox-base e-b7929c0 \" data-id=\"0f11b9f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0f11b9f\">\n    \t\t<div class=\"elementor-element elementor-element-6672d2f elementor-widget elementor-widget-html\" data-id=\"6672d2f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BRAND KIT HERO SECTION (mirrored) - Socials.ink - Dark Purple\/Neon Theme\r\n     Layout modeled on Buffer's \"Start Page\" hero \u2014 image on the LEFT,\r\n     text + CTA on the RIGHT (data-content-position=\"trailing\").\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .bk2-hero {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 60px;\r\n    flex-wrap: wrap-reverse;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 80px 30px;\r\n    background: linear-gradient(135deg, #150a26 0%, #0d0716 100%);\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n  }\r\n  .bk2-hero * { box-sizing: border-box; }\r\n\r\n  .bk2-image-panel {\r\n    flex: 1 1 460px;\r\n    max-width: 600px;\r\n    border-radius: 26px;\r\n    padding: 40px;\r\n    background: linear-gradient(160deg, #241638 0%, #150c26 100%);\r\n    border: 1px solid rgba(192, 132, 252, 0.35);\r\n    box-shadow:\r\n      0 0 0 1px rgba(192,132,252,0.12),\r\n      0 0 60px rgba(168,85,247,0.25),\r\n      0 25px 50px rgba(0,0,0,0.5);\r\n    opacity: 0;\r\n    transform: translateY(24px) scale(0.97);\r\n    animation: bk2FadeUp 0.9s ease 0.2s forwards;\r\n    position: relative;\r\n  }\r\n\r\n  .bk2-image-panel img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    border-radius: 14px;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.4);\r\n  }\r\n\r\n  .bk2-content {\r\n    flex: 1 1 420px;\r\n    max-width: 520px;\r\n    opacity: 0;\r\n    transform: translateY(24px);\r\n    animation: bk2FadeUp 0.8s ease forwards;\r\n  }\r\n\r\n  .bk2-eyebrow {\r\n    display: inline-block;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: #c084fc;\r\n    margin: 0 0 16px;\r\n  }\r\n\r\n  .bk2-heading {\r\n    font-size: clamp(32px, 4vw, 46px);\r\n    line-height: 1.15;\r\n    font-weight: 800;\r\n    color: #f5f0ff;\r\n    margin: 0 0 20px;\r\n  }\r\n\r\n  .bk2-text {\r\n    font-size: 17px;\r\n    line-height: 1.65;\r\n    color: rgba(230, 224, 250, 0.78);\r\n    margin: 0 0 32px;\r\n    max-width: 460px;\r\n  }\r\n\r\n  .bk2-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 14px 26px;\r\n    border-radius: 30px;\r\n    background: linear-gradient(90deg, #a855f7, #7c3aed);\r\n    color: #fff;\r\n    font-weight: 600;\r\n    font-size: 16px;\r\n    text-decoration: none;\r\n    box-shadow: 0 10px 26px rgba(124,58,237,0.4);\r\n    transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n  }\r\n  .bk2-cta svg {\r\n    transition: transform 0.25s ease;\r\n  }\r\n  .bk2-cta:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 14px 32px rgba(124,58,237,0.55);\r\n  }\r\n  .bk2-cta:hover svg {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  @keyframes bk2FadeUp {\r\n    to { opacity: 1; transform: translateY(0) scale(1); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .bk2-hero { padding: 56px 20px; }\r\n    .bk2-image-panel { padding: 24px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"bk2-hero\">\r\n\r\n  <div class=\"bk2-image-panel\">\r\n    <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/brandkit.png\" alt=\"Brand Kit\">\r\n  <\/div>\r\n\r\n  <div class=\"bk2-content\">\r\n    <span class=\"bk2-eyebrow\">Brand Kit<\/span>\r\n    <h2 class=\"bk2-heading\">One brand kit. Every post on-brand.<\/h2>\r\n    <p class=\"bk2-text\">Save each client's colors, logo, voice and business details once \u2014 and let it automatically shape every caption, image and post your AI generates for them.<\/p>\r\n    <a class=\"bk2-cta\" href=\"#\">\r\n      <span>Get started for free<\/span>\r\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n        <path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/>\r\n      <\/svg>\r\n    <\/a>\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-c664b3f e-con e-atomic-element e-flexbox-base e-5c07c8d \" data-id=\"c664b3f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c664b3f\">\n    \t\t<div class=\"elementor-element elementor-element-5a19966 elementor-widget elementor-widget-html\" data-id=\"5a19966\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BENEFITS SECTION - Socials.ink - Dark Purple\/Neon Theme\r\n     Modeled on Buffer's 4-column icon benefits row.\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .bn-section {\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n    padding: 70px 24px;\r\n    background: #120a1f;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n  .bn-section * { box-sizing: border-box; }\r\n\r\n  .bn-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 32px;\r\n  }\r\n\r\n  .bn-item {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: 18px;\r\n    padding: 28px 22px;\r\n    border-radius: 18px;\r\n    background: linear-gradient(160deg, #1c1330, #100a1c);\r\n    border: 1px solid rgba(255, 255, 255, 0.07);\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: bnFadeUp 0.7s ease forwards;\r\n    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;\r\n  }\r\n  .bn-item:hover {\r\n    transform: translateY(-4px);\r\n  }\r\n\r\n  .bn-item:nth-child(1) { animation-delay: 0.05s; }\r\n  .bn-item:nth-child(2) { animation-delay: 0.15s; }\r\n  .bn-item:nth-child(3) { animation-delay: 0.25s; }\r\n  .bn-item:nth-child(4) { animation-delay: 0.35s; }\r\n\r\n  .bn-item:nth-child(1) { border-color: rgba(167,139,250,0.3); }\r\n  .bn-item:nth-child(1):hover { border-color: rgba(167,139,250,0.75); box-shadow: 0 0 40px rgba(124,58,237,0.28); }\r\n  .bn-item:nth-child(1) svg { color: #c4b5fd; }\r\n\r\n  .bn-item:nth-child(2) { border-color: rgba(56,189,248,0.3); }\r\n  .bn-item:nth-child(2):hover { border-color: rgba(56,189,248,0.75); box-shadow: 0 0 40px rgba(14,165,233,0.28); }\r\n  .bn-item:nth-child(2) svg { color: #7dd3fc; }\r\n\r\n  .bn-item:nth-child(3) { border-color: rgba(34,211,238,0.3); }\r\n  .bn-item:nth-child(3):hover { border-color: rgba(34,211,238,0.75); box-shadow: 0 0 40px rgba(6,182,212,0.28); }\r\n  .bn-item:nth-child(3) svg { color: #67e8f9; }\r\n\r\n  .bn-item:nth-child(4) { border-color: rgba(52,211,153,0.3); }\r\n  .bn-item:nth-child(4):hover { border-color: rgba(52,211,153,0.75); box-shadow: 0 0 40px rgba(16,185,129,0.28); }\r\n  .bn-item:nth-child(4) svg { color: #6ee7b7; }\r\n\r\n  .bn-icon svg {\r\n    width: 40px;\r\n    height: 40px;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .bn-heading {\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    color: #f5f0ff;\r\n    margin: 0;\r\n  }\r\n\r\n  .bn-text {\r\n    font-size: 14px;\r\n    line-height: 1.55;\r\n    color: rgba(230, 224, 250, 0.72);\r\n    margin: 0;\r\n  }\r\n\r\n  @keyframes bnFadeUp {\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .bn-grid {\r\n      grid-template-columns: 1fr 1fr;\r\n    }\r\n  }\r\n  @media (max-width: 560px) {\r\n    .bn-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"bn-section\">\r\n  <div class=\"bn-grid\">\r\n\r\n    <div class=\"bn-item\">\r\n      <span class=\"bn-icon\">\r\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n          <path d=\"M42.626 21.697H11.232M42.626 32.16H11.232m3.489-20.929h24.417a3.488 3.488 0 0 1 3.488 3.489v24.417a3.488 3.488 0 0 1-3.488 3.488H14.72a3.488 3.488 0 0 1-3.489-3.488V14.72a3.488 3.488 0 0 1 3.489-3.489Z\"\/>\r\n        <\/svg>\r\n      <\/span>\r\n      <h3 class=\"bn-heading\">One kit, every client<\/h3>\r\n      <p class=\"bn-text\">Set up a dedicated Brand Kit per client \u2014 colors, logo, voice and business details, kept completely separate and organized.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"bn-item\">\r\n      <span class=\"bn-icon\">\r\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n          <path d=\"m14.72 9.488 8.72 8.72M9.489 28.674h26.161m3.488-3.488L25.185 11.232l-15 15a3.488 3.488 0 0 0 0 4.883l9.07 9.069c1.395 1.395 3.488 1.395 4.883 0l15-15Zm5.233 15.697a3.489 3.489 0 1 1-6.977 0c0-2.79 2.965-4.186 3.489-6.977.523 2.79 3.488 4.186 3.488 6.977Z\"\/>\r\n        <\/svg>\r\n      <\/span>\r\n      <h3 class=\"bn-heading\">Define it once<\/h3>\r\n      <p class=\"bn-text\">Fill in a client's brand essentials a single time \u2014 every field is saved and reused automatically for that project going forward.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"bn-item\">\r\n      <span class=\"bn-icon\">\r\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n          <path d=\"M42.626 26.929v12.209a3.488 3.488 0 0 1-3.488 3.488H14.72a3.488 3.488 0 0 1-3.489-3.488V14.72a3.488 3.488 0 0 1 3.489-3.488h12.208m6.977 3.488H44.37m-5.232-5.232v10.465m3.488 12.208-5.382-5.382a3.488 3.488 0 0 0-4.933 0L16.465 42.626m8.72-20.93a3.488 3.488 0 1 1-6.976 0 3.488 3.488 0 0 1 6.976 0Z\"\/>\r\n        <\/svg>\r\n      <\/span>\r\n      <h3 class=\"bn-heading\">Powers every AI output<\/h3>\r\n      <p class=\"bn-text\">AI Studio, captions and replies all pull straight from the Brand Kit \u2014 so nothing you generate ever feels off-brand.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"bn-item\">\r\n      <span class=\"bn-icon\">\r\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 54 54\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\r\n          <path d=\"M27 32.25 21.75 27M27 32.25a39.108 39.108 0 0 0 7-3.5m-7 3.5V41s5.303-.963 7-3.5c1.89-2.835 0-8.75 0-8.75M21.75 27a38.509 38.509 0 0 1 3.5-6.913A22.54 22.54 0 0 1 44.5 9.5c0 4.76-1.365 13.125-10.5 19.25M21.75 27H13s.963-5.303 3.5-7c2.835-1.89 8.75 0 8.75 0M13.875 34.875c-2.625 2.205-3.5 8.75-3.5 8.75s6.545-.875 8.75-3.5c1.242-1.47 1.225-3.728-.157-5.093a3.815 3.815 0 0 0-5.093-.157Z\"\/>\r\n        <\/svg>\r\n      <\/span>\r\n      <h3 class=\"bn-heading\">Download and take it anywhere<\/h3>\r\n      <p class=\"bn-text\">Export the full Brand Kit as JSON any time \u2014 share it with teammates or plug it into other tools in seconds.<\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9c25ebe e-con e-atomic-element e-flexbox-base e-f7e81c5 \" data-id=\"9c25ebe\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9c25ebe\">\n    \t\t<div class=\"elementor-element elementor-element-9ab7e73 elementor-widget elementor-widget-html\" data-id=\"9ab7e73\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     BRAND KIT SHOWCASE TICKER - Socials.ink - Dark Purple\/Neon Theme\r\n     Modeled on Buffer's \"Link in bio\" infinite-scrolling template gallery.\r\n     Replace each placeholder src with your uploaded screenshot URL.\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .bkt-section {\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    padding: 80px 0;\r\n    background: linear-gradient(135deg, #150a26 0%, #0d0716 100%);\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    overflow: hidden;\r\n  }\r\n  .bkt-section * { box-sizing: border-box; }\r\n\r\n  .bkt-content {\r\n    max-width: 640px;\r\n    margin: 0 auto 50px;\r\n    padding: 0 30px;\r\n    text-align: center;\r\n  }\r\n\r\n  .bkt-eyebrow {\r\n    display: inline-block;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: #c084fc;\r\n    margin: 0 0 14px;\r\n  }\r\n\r\n  .bkt-heading {\r\n    font-size: clamp(28px, 3.6vw, 40px);\r\n    line-height: 1.15;\r\n    font-weight: 800;\r\n    color: #f5f0ff;\r\n    margin: 0 0 18px;\r\n  }\r\n\r\n  .bkt-text {\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n    color: rgba(230, 224, 250, 0.78);\r\n    margin: 0;\r\n  }\r\n\r\n  \/* ===== Ticker ===== *\/\r\n  .bkt-ticker-wrap {\r\n    position: relative;\r\n    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);\r\n            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);\r\n  }\r\n\r\n  .bkt-track {\r\n    display: flex;\r\n    width: max-content;\r\n    animation: bktScroll 38s linear infinite;\r\n  }\r\n  .bkt-track:hover {\r\n    animation-play-state: paused;\r\n  }\r\n\r\n  .bkt-group {\r\n    display: flex;\r\n    gap: 26px;\r\n    padding-right: 26px;\r\n  }\r\n\r\n  @keyframes bktScroll {\r\n    from { transform: translateX(0); }\r\n    to { transform: translateX(-50%); }\r\n  }\r\n\r\n  .bkt-card {\r\n    flex: none;\r\n    width: 380px;\r\n    border-radius: 18px;\r\n    padding: 14px;\r\n    background: linear-gradient(160deg, #241638, #150c26);\r\n    border: 1px solid rgba(192, 132, 252, 0.3);\r\n    box-shadow:\r\n      0 0 0 1px rgba(192,132,252,0.1),\r\n      0 0 34px rgba(168,85,247,0.2),\r\n      0 14px 30px rgba(0,0,0,0.45);\r\n    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;\r\n  }\r\n  .bkt-card:hover {\r\n    transform: translateY(-6px);\r\n    border-color: rgba(192, 132, 252, 0.7);\r\n    box-shadow:\r\n      0 0 0 1px rgba(192,132,252,0.2),\r\n      0 0 46px rgba(168,85,247,0.35),\r\n      0 18px 36px rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .bkt-card-frame {\r\n    width: 100%;\r\n    height: 340px;\r\n    border-radius: 12px;\r\n    overflow: hidden;\r\n    background: #0d0716;\r\n  }\r\n\r\n  .bkt-card img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    object-position: center;\r\n    display: block;\r\n    transform: scale(1.15);\r\n  }\r\n\r\n  .bkt-card-label {\r\n    display: block;\r\n    text-align: center;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: #d8b4fe;\r\n    padding: 10px 4px 2px;\r\n  }\r\n\r\n  .bkt-card-desc {\r\n    display: block;\r\n    text-align: center;\r\n    font-size: 12.5px;\r\n    line-height: 1.5;\r\n    color: rgba(230, 224, 250, 0.65);\r\n    padding: 0 10px 4px;\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .bkt-card { width: 240px; }\r\n    .bkt-card-frame { height: 270px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"bkt-section\">\r\n\r\n  <div class=\"bkt-content\">\r\n    <span class=\"bkt-eyebrow\">Brand Kit<\/span>\r\n    <p class=\"bkt-heading\">One kit, every detail covered<\/p>\r\n    <p class=\"bkt-text\">From tone of voice to business hours and social links \u2014 build a complete brand profile once, and every client stays perfectly organized and on-brand.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"bkt-ticker-wrap\">\r\n    <div class=\"bkt-track\">\r\n\r\n      <div class=\"bkt-group\">\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-03_04_55-AM.png\" alt=\"Brand Profile completion\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Brand Profile<\/span>\r\n          <span class=\"bkt-card-desc\">See completion status at a glance and switch between saved client kits instantly.<\/span>\r\n        <\/div>\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-02_56_27-AM.png\" alt=\"Brand tone of voice\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Tone of Voice<\/span>\r\n          <span class=\"bkt-card-desc\">Pick the tones that match how each client should sound across every post.<\/span>\r\n        <\/div>\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-02_58_02-AM.png\" alt=\"Brand aesthetic and font\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Aesthetic & Font<\/span>\r\n          <span class=\"bkt-card-desc\">Define the visual feel and typography that keeps every design on-brand.<\/span>\r\n        <\/div>\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-03_02_43-AM.png\" alt=\"Business hours\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Business Hours<\/span>\r\n          <span class=\"bkt-card-desc\">Set weekly hours so AI replies and posts always reflect when a client is open.<\/span>\r\n        <\/div>\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-03_06_09-AM.png\" alt=\"Social links\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Social Links<\/span>\r\n          <span class=\"bkt-card-desc\">Store every profile URL in one place for quick reference and easy sharing.<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- duplicate group for seamless loop -->\r\n      <div class=\"bkt-group\" aria-hidden=\"true\">\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-03_04_55-AM.png\" alt=\"Brand Profile completion\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Brand Profile<\/span>\r\n          <span class=\"bkt-card-desc\">See completion status at a glance and switch between saved client kits instantly.<\/span>\r\n        <\/div>\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-02_56_27-AM.png\" alt=\"Brand tone of voice\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Tone of Voice<\/span>\r\n          <span class=\"bkt-card-desc\">Pick the tones that match how each client should sound across every post.<\/span>\r\n        <\/div>\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-02_58_02-AM.png\" alt=\"Brand aesthetic and font\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Aesthetic & Font<\/span>\r\n          <span class=\"bkt-card-desc\">Define the visual feel and typography that keeps every design on-brand.<\/span>\r\n        <\/div>\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-03_02_43-AM.png\" alt=\"Business hours\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Business Hours<\/span>\r\n          <span class=\"bkt-card-desc\">Set weekly hours so AI replies and posts always reflect when a client is open.<\/span>\r\n        <\/div>\r\n        <div class=\"bkt-card\">\r\n          <div class=\"bkt-card-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-03_06_09-AM.png\" alt=\"Social links\">\r\n          <\/div>\r\n          <span class=\"bkt-card-label\">Social Links<\/span>\r\n          <span class=\"bkt-card-desc\">Store every profile URL in one place for quick reference and easy sharing.<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-153019d e-con e-atomic-element e-flexbox-base e-1cb0e51 \" data-id=\"153019d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"153019d\">\n    \t\t<div class=\"elementor-element elementor-element-a161cea elementor-widget elementor-widget-html\" data-id=\"a161cea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n<!-- ============================================================\r\n     BRAND KIT \u2014 \"15 FIELDS\" FEATURE SECTION\r\n     Socials.ink - Dark Purple Theme\r\n     Text left (eyebrow + heading + text + CTA), image right with\r\n     a floating stat card overlapping the main screenshot \u2014 same\r\n     layered look as Buffer's Analytics section.\r\n     Paste into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .bk-wrapper {\r\n    --bk-bg: #120a1f;\r\n    --bk-text: #f1eefc;\r\n    --bk-text-muted: rgba(230, 224, 250, 0.78);\r\n    --bk-accent: #c084fc;\r\n\r\n    background: var(--bk-bg);\r\n    padding: 90px 24px;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n  }\r\n  .bk-wrapper * { box-sizing: border-box; }\r\n\r\n  .bk-inner {\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    align-items: center;\r\n    gap: 64px;\r\n  }\r\n\r\n  .bk-content {\r\n    opacity: 0;\r\n    transform: translateY(24px);\r\n    animation: bkFadeUp 0.8s ease forwards;\r\n  }\r\n\r\n  .bk-eyebrow {\r\n    display: inline-block;\r\n    color: var(--bk-accent);\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.06em;\r\n    text-transform: uppercase;\r\n    margin: 0 0 16px;\r\n    padding: 6px 14px;\r\n    border: 1px solid rgba(192, 132, 252, 0.35);\r\n    border-radius: 999px;\r\n    background: rgba(168, 85, 247, 0.08);\r\n  }\r\n\r\n  .bk-heading {\r\n    color: var(--bk-text);\r\n    font-size: clamp(30px, 3.8vw, 42px);\r\n    font-weight: 700;\r\n    line-height: 1.18;\r\n    margin: 0 0 20px;\r\n  }\r\n\r\n  .bk-text {\r\n    color: var(--bk-text-muted);\r\n    font-size: 17px;\r\n    line-height: 1.65;\r\n    margin: 0 0 32px;\r\n    max-width: 460px;\r\n  }\r\n\r\n  .bk-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n    color: #fff;\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    text-decoration: none !important;\r\n    padding: 15px 28px;\r\n    border-radius: 12px;\r\n    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n  .bk-cta:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.55);\r\n  }\r\n  .bk-cta svg {\r\n    width: 20px;\r\n    height: 20px;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .bk-cta:hover svg {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  \/* Image side \u2014 main screenshot + one floating stat card, like Buffer's layered look *\/\r\n  .bk-visual {\r\n    position: relative;\r\n    opacity: 0;\r\n    transform: translateY(24px);\r\n    animation: bkFadeUp 0.8s ease 0.15s forwards;\r\n  }\r\n\r\n  .bk-image-frame {\r\n    position: relative;\r\n    border-radius: 24px;\r\n    overflow: hidden;\r\n    background: linear-gradient(150deg, #3b1d6e 0%, #1a0f30 100%);\r\n    box-shadow: 0 0 0 1px rgba(192,132,252,0.18), 0 30px 60px rgba(0,0,0,0.55), 0 0 70px rgba(124,58,237,0.25);\r\n  }\r\n  .bk-image-frame img {\r\n    display: block;\r\n    width: 100%;\r\n    height: auto;\r\n  }\r\n\r\n  .bk-float-card {\r\n    position: absolute;\r\n    top: -18px;\r\n    right: -18px;\r\n    width: 200px;\r\n    background: linear-gradient(160deg, #1c1330, #100a1c);\r\n    border: 1px solid rgba(192, 132, 252, 0.35);\r\n    border-radius: 14px;\r\n    padding: 16px 18px;\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(168,85,247,0.2);\r\n    transition: transform 0.4s ease;\r\n  }\r\n  .bk-visual:hover .bk-float-card {\r\n    transform: translateY(-6px);\r\n  }\r\n\r\n  .bk-float-label {\r\n    color: rgba(230, 224, 250, 0.6);\r\n    font-size: 12px;\r\n    margin: 0 0 6px;\r\n  }\r\n  .bk-float-value {\r\n    display: flex;\r\n    align-items: baseline;\r\n    gap: 6px;\r\n    margin: 0 0 10px;\r\n  }\r\n  .bk-float-value strong {\r\n    color: var(--bk-text);\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n  }\r\n  .bk-float-value span {\r\n    color: #6ee7b7;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n  }\r\n  .bk-float-bar {\r\n    height: 6px;\r\n    border-radius: 999px;\r\n    background: rgba(255,255,255,0.08);\r\n    overflow: hidden;\r\n  }\r\n  .bk-float-bar-fill {\r\n    height: 100%;\r\n    width: 100%;\r\n    border-radius: 999px;\r\n    background: linear-gradient(90deg, #a855f7, #c084fc);\r\n  }\r\n\r\n  @keyframes bkFadeUp {\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .bk-inner {\r\n      grid-template-columns: 1fr;\r\n      gap: 56px;\r\n    }\r\n    .bk-text { max-width: 100%; }\r\n    .bk-wrapper { padding: 60px 20px; }\r\n    .bk-float-card { top: -14px; right: 12px; width: 170px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"bk-wrapper\">\r\n  <div class=\"bk-inner\">\r\n\r\n    <div class=\"bk-content\">\r\n      <span class=\"bk-eyebrow\">Stays on-brand, automatically<\/span>\r\n      <h2 class=\"bk-heading\">Set it once. It shows up everywhere.<\/h2>\r\n      <p class=\"bk-text\">No more re-explaining your brand every time you generate a post. Your Brand Kit's colors, tone of voice, and business details feed directly into AI Studio, captions, and Replai's replies \u2014 automatically, every time.<\/p>\r\n      <a class=\"bk-cta\" href=\"#\">\r\n        <span>Get started for free<\/span>\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <div class=\"bk-visual\">\r\n      <div class=\"bk-image-frame\">\r\n        <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/brandkit.png\" alt=\"Socials.ink Brand Kit \u2014 15 fields covering colors, logo, voice and business details\">\r\n      <\/div>\r\n      <div class=\"bk-float-card\">\r\n        <p class=\"bk-float-label\">Brand kit completion<\/p>\r\n        <p class=\"bk-float-value\"><strong>15 \/ 15<\/strong> <span>100%<\/span><\/p>\r\n        <div class=\"bk-float-bar\"><div class=\"bk-float-bar-fill\"><\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-189d4a0 e-con e-atomic-element e-flexbox-base e-faeee6c \" data-id=\"189d4a0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"189d4a0\">\n    \t\t<div class=\"elementor-element elementor-element-6d6639f elementor-widget elementor-widget-html\" data-id=\"6d6639f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     TESTIMONIAL SECTION - Brand Kit page - Socials.ink\r\n     Dark purple\/neon theme, modeled on Buffer's testimonial card.\r\n     Replace the quote, name, role and avatar with a real client testimonial.\r\n     Paste this entire block into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .ts-section {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n    padding: 80px 24px;\r\n    background: #120a1f;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n  }\r\n  .ts-section * { box-sizing: border-box; }\r\n\r\n  .ts-card {\r\n    position: relative;\r\n    max-width: 780px;\r\n    margin: 0 auto;\r\n    padding: 56px 48px 44px;\r\n    border-radius: 26px;\r\n    text-align: center;\r\n    background: linear-gradient(160deg, #241638 0%, #150c26 100%);\r\n    border: 1px solid rgba(192, 132, 252, 0.35);\r\n    box-shadow:\r\n      0 0 0 1px rgba(192,132,252,0.12),\r\n      0 0 60px rgba(168,85,247,0.22),\r\n      0 25px 50px rgba(0,0,0,0.5);\r\n  }\r\n\r\n  .ts-mark {\r\n    font-size: 90px;\r\n    line-height: 1;\r\n    font-weight: 800;\r\n    color: rgba(192, 132, 252, 0.35);\r\n    margin: 0 0 -20px;\r\n    user-select: none;\r\n  }\r\n\r\n  .ts-quote {\r\n    font-size: clamp(20px, 2.6vw, 26px);\r\n    line-height: 1.5;\r\n    font-weight: 600;\r\n    color: #f5f0ff;\r\n    margin: 0 0 36px;\r\n  }\r\n\r\n  .ts-source {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 14px;\r\n  }\r\n\r\n  .ts-avatar {\r\n    width: 56px;\r\n    height: 56px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: linear-gradient(160deg, #a78bfa, #7c3aed);\r\n    color: #fff;\r\n    font-weight: 700;\r\n    font-size: 18px;\r\n    flex-shrink: 0;\r\n    box-shadow: 0 0 0 3px rgba(192,132,252,0.25);\r\n  }\r\n\r\n  .ts-source-text {\r\n    text-align: left;\r\n  }\r\n\r\n  .ts-name {\r\n    display: block;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: #f5f0ff;\r\n  }\r\n\r\n  .ts-role {\r\n    display: block;\r\n    font-size: 13.5px;\r\n    color: rgba(230, 224, 250, 0.65);\r\n    margin-top: 2px;\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .ts-card { padding: 44px 26px 32px; }\r\n    .ts-mark { font-size: 64px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"ts-section\">\r\n  <div class=\"ts-card\">\r\n    <p class=\"ts-mark\">&ldquo;<\/p>\r\n    <blockquote class=\"ts-quote\">\r\n      The Brand Kit is the reason we finally stopped sending \"wrong logo\" corrections to clients. Set it up once, and every post just fits \u2014 colors, tone, everything.\r\n    <\/blockquote>\r\n    <div class=\"ts-source\">\r\n      <span class=\"ts-avatar\">MW<\/span>\r\n      <span class=\"ts-source-text\">\r\n        <span class=\"ts-name\">Maira Wasti<\/span>\r\n        <span class=\"ts-role\">Founder, Social Agency<\/span>\r\n      <\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-b45fd7e e-con e-atomic-element e-flexbox-base e-47de05e \" data-id=\"b45fd7e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b45fd7e\">\n    \t\t<div class=\"elementor-element elementor-element-538d774 elementor-widget elementor-widget-html\" data-id=\"538d774\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n<!-- ============================================================\r\n     RESOURCES SECTION - Brand Kit page - Socials.ink\r\n     Dark Purple Theme, 3-column card grid, icon placeholders\r\n     instead of real blog images.\r\n     Paste into an Elementor \"HTML\" widget\r\n\r\n     NOTE: All titles, text, and links below are PLACEHOLDERS.\r\n     Replace with real blog posts\/guides once you have them,\r\n     and swap the icon placeholder for a real cover image.\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .rc-wrapper {\r\n    --rc-bg: #120a1f;\r\n    --rc-text: #f1eefc;\r\n    --rc-text-muted: rgba(230, 224, 250, 0.72);\r\n    --rc-accent: #c084fc;\r\n\r\n    background: var(--rc-bg);\r\n    padding: 90px 24px;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n  .rc-wrapper * { box-sizing: border-box; }\r\n\r\n  .rc-inner {\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .rc-eyebrow {\r\n    display: block;\r\n    color: var(--rc-accent);\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.06em;\r\n    text-transform: uppercase;\r\n    margin: 0 0 14px;\r\n  }\r\n\r\n  .rc-heading {\r\n    color: var(--rc-text);\r\n    font-size: clamp(28px, 3.6vw, 42px);\r\n    font-weight: 700;\r\n    margin: 0 0 14px;\r\n    max-width: 700px;\r\n  }\r\n\r\n  .rc-sub {\r\n    color: var(--rc-text-muted);\r\n    font-size: 16px;\r\n    max-width: 560px;\r\n    margin: 0 0 50px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .rc-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 28px;\r\n  }\r\n\r\n  .rc-card {\r\n    display: block;\r\n    text-decoration: none !important;\r\n    border-radius: 18px;\r\n    overflow: hidden;\r\n    border: 1px solid rgba(255,255,255,0.07);\r\n    background: rgba(255,255,255,0.02);\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: rcFadeUp 0.7s ease forwards;\r\n    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;\r\n  }\r\n  .rc-card:nth-child(1) { animation-delay: 0.05s; }\r\n  .rc-card:nth-child(2) { animation-delay: 0.15s; }\r\n  .rc-card:nth-child(3) { animation-delay: 0.25s; }\r\n\r\n  .rc-card:hover {\r\n    transform: translateY(-6px);\r\n    border-color: rgba(192, 132, 252, 0.4);\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 40px rgba(124,58,237,0.2);\r\n  }\r\n\r\n  .rc-card-image {\r\n    height: 200px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: linear-gradient(160deg, #3b1d6e 0%, #1a0f30 100%);\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  .rc-card-image::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    box-shadow: inset 0 0 40px rgba(168,85,247,0.35), 0 0 30px rgba(168,85,247,0.25);\r\n    pointer-events: none;\r\n    transition: box-shadow 0.4s ease;\r\n  }\r\n  .rc-card-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    filter: drop-shadow(0 0 18px rgba(192,132,252,0.5));\r\n    transition: transform 0.4s ease, filter 0.4s ease;\r\n  }\r\n  .rc-card:hover .rc-card-image img {\r\n    transform: scale(1.08);\r\n    filter: drop-shadow(0 0 26px rgba(192,132,252,0.75));\r\n  }\r\n  .rc-card:hover .rc-card-image::after {\r\n    box-shadow: inset 0 0 50px rgba(168,85,247,0.5), 0 0 45px rgba(168,85,247,0.4);\r\n  }\r\n\r\n  .rc-card-content {\r\n    padding: 24px 22px 28px;\r\n  }\r\n  .rc-card-title {\r\n    color: var(--rc-text);\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    margin: 0 0 10px;\r\n    line-height: 1.35;\r\n  }\r\n  .rc-card-text {\r\n    color: var(--rc-text-muted);\r\n    font-size: 14.5px;\r\n    line-height: 1.6;\r\n    margin: 0;\r\n  }\r\n\r\n  @keyframes rcFadeUp {\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .rc-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"rc-wrapper\">\r\n  <div class=\"rc-inner\">\r\n\r\n    <span class=\"rc-eyebrow\">Resources<\/span>\r\n    <h2 class=\"rc-heading\">The ultimate on-brand content playbook<\/h2>\r\n    <p class=\"rc-sub\">Smart tips and strategies to keep every client's content consistent, polished, and unmistakably theirs.<\/p>\r\n\r\n    <div class=\"rc-grid\">\r\n\r\n      <a class=\"rc-card\" href=\"#\">\r\n        <div class=\"rc-card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-02_34_11-PM.png\" alt=\"Setting up your first Brand Kit\">\r\n        <\/div>\r\n        <div class=\"rc-card-content\">\r\n          <h3 class=\"rc-card-title\">Setting up your first Brand Kit<\/h3>\r\n          <p class=\"rc-card-text\">A walkthrough of all 15 fields \u2014 colors, logo, voice and business details \u2014 and how each one shapes your AI-generated content.<\/p>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a class=\"rc-card\" href=\"#\">\r\n        <div class=\"rc-card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-02_34_23-PM.png\" alt=\"Managing brand kits across multiple clients\">\r\n        <\/div>\r\n        <div class=\"rc-card-content\">\r\n          <h3 class=\"rc-card-title\">Managing brand kits across multiple clients<\/h3>\r\n          <p class=\"rc-card-text\">How to switch projects, keep every client's brand details separate, and avoid mixing up tone of voice between accounts.<\/p>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <a class=\"rc-card\" href=\"#\">\r\n        <div class=\"rc-card-image\">\r\n          <img decoding=\"async\" src=\"https:\/\/socials.ink\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-3-2026-02_35_06-PM.png\" alt=\"Writing a tone of voice that actually sounds like you\">\r\n        <\/div>\r\n        <div class=\"rc-card-content\">\r\n          <h3 class=\"rc-card-title\">Writing a tone of voice that actually sounds like you<\/h3>\r\n          <p class=\"rc-card-text\">Practical tips for filling out the voice field so AI Studio and Replai's replies sound like a real person, not a generic bot.<\/p>\r\n        <\/div>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0e5593c e-con e-atomic-element e-flexbox-base e-a5f0298 \" data-id=\"0e5593c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0e5593c\">\n    \t\t<div class=\"elementor-element elementor-element-f26c048 elementor-widget elementor-widget-html\" data-id=\"f26c048\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n<!-- ============================================================\r\n     FAQ SECTION - Brand Kit page - Socials.ink\r\n     Dark purple\/neon theme. Uses <details>\/<summary> PLUS an\r\n     explicit JS click handler as a reliable fallback, in case\r\n     the page builder strips native details\/summary behavior.\r\n     IMPORTANT: paste this into an Elementor \"HTML\" widget\r\n     (not a \"Text Editor\" widget \u2014 that one mangles the markup).\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .fq-section {\r\n    width: 100%;\r\n    padding: 80px 24px;\r\n    background: #120a1f;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n  .fq-section * { box-sizing: border-box; }\r\n\r\n  .fq-inner {\r\n    max-width: 820px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .fq-heading {\r\n    font-size: clamp(26px, 3.2vw, 36px);\r\n    font-weight: 800;\r\n    color: #f5f0ff;\r\n    margin: 0 0 36px;\r\n    text-align: center;\r\n  }\r\n\r\n  .fq-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 14px;\r\n  }\r\n\r\n  .fq-item {\r\n    background: linear-gradient(160deg, #1c1330, #100a1c);\r\n    border: 1px solid rgba(192, 132, 252, 0.25);\r\n    border-radius: 16px;\r\n    padding: 4px 22px;\r\n    transition: border-color 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n  .fq-item.is-open {\r\n    border-color: rgba(192, 132, 252, 0.6);\r\n    box-shadow: 0 0 30px rgba(168,85,247,0.2);\r\n  }\r\n\r\n  .fq-summary {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    padding: 20px 0;\r\n    cursor: pointer;\r\n    list-style: none;\r\n    user-select: none;\r\n  }\r\n  .fq-summary::-webkit-details-marker {\r\n    display: none;\r\n  }\r\n\r\n  .fq-question {\r\n    font-size: 16.5px;\r\n    font-weight: 600;\r\n    color: #f5f0ff;\r\n    margin: 0;\r\n  }\r\n\r\n  .fq-icon {\r\n    flex-shrink: 0;\r\n    width: 22px;\r\n    height: 22px;\r\n    color: #c084fc;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .fq-item.is-open .fq-icon {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  .fq-content {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    transition: max-height 0.35s ease;\r\n  }\r\n  .fq-content-inner {\r\n    padding: 0 0 22px;\r\n  }\r\n  .fq-item.is-open .fq-content {\r\n    max-height: 400px;\r\n  }\r\n  .fq-content p {\r\n    margin: 0;\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n    color: rgba(230, 224, 250, 0.75);\r\n  }\r\n  .fq-content a {\r\n    color: #7dd3fc;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .fq-item { padding: 4px 16px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"fq-section\">\r\n  <div class=\"fq-inner\">\r\n    <h2 class=\"fq-heading\">FAQs<\/h2>\r\n    <div class=\"fq-list\" id=\"fq-list\">\r\n\r\n      <div class=\"fq-item\">\r\n        <div class=\"fq-summary\">\r\n          <h3 class=\"fq-question\">Is the Brand Kit free to use?<\/h3>\r\n          <svg class=\"fq-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"fq-content\">\r\n          <div class=\"fq-content-inner\">\r\n            <p>Yes \u2014 every project on socials.ink includes a Brand Kit with 15 core fields covering colors, logo, voice and business details. Higher plans unlock additional customization and more saved kits per workspace.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fq-item\">\r\n        <div class=\"fq-summary\">\r\n          <h3 class=\"fq-question\">Can each client have their own separate Brand Kit?<\/h3>\r\n          <svg class=\"fq-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"fq-content\">\r\n          <div class=\"fq-content-inner\">\r\n            <p>Absolutely. Each field saves only for the current project \u2014 simply switch projects from the sidebar to keep every client's brand kit completely separate and organized.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fq-item\">\r\n        <div class=\"fq-summary\">\r\n          <h3 class=\"fq-question\">Does the Brand Kit actually affect AI-generated content?<\/h3>\r\n          <svg class=\"fq-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"fq-content\">\r\n          <div class=\"fq-content-inner\">\r\n            <p>Yes \u2014 AI Studio, captions and Replai's auto-replies all pull directly from the Brand Kit's tone of voice, aesthetic and business details, so every output stays on-brand automatically.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fq-item\">\r\n        <div class=\"fq-summary\">\r\n          <h3 class=\"fq-question\">Can I export or back up a client's Brand Kit?<\/h3>\r\n          <svg class=\"fq-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"fq-content\">\r\n          <div class=\"fq-content-inner\">\r\n            <p>Yes \u2014 every Brand Kit can be downloaded as a JSON file at any time, so you always have a portable backup or can share it with teammates.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function() {\r\n  var items = document.querySelectorAll('#fq-list .fq-item');\r\n  items.forEach(function(item) {\r\n    var summary = item.querySelector('.fq-summary');\r\n    summary.addEventListener('click', function() {\r\n      var isOpen = item.classList.contains('is-open');\r\n      items.forEach(function(i) { i.classList.remove('is-open'); });\r\n      if (!isOpen) {\r\n        item.classList.add('is-open');\r\n      }\r\n    });\r\n  });\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-795acda e-con e-atomic-element e-flexbox-base e-8d05212 \" data-id=\"795acda\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"795acda\">\n    \t\t<div class=\"elementor-element elementor-element-ddefde3 elementor-widget elementor-widget-html\" data-id=\"ddefde3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Preview<\/title>\r\n<\/head>\r\n<body style=\"margin:0;\">\r\n\r\n<!-- ============================================================\r\n     BRAND KIT \u2014 FINAL CTA SECTION\r\n     Socials.ink - Dark Purple Theme\r\n     Centered heading + CTA button + small note.\r\n     Paste into an Elementor \"HTML\" widget\r\n     ============================================================ -->\r\n\r\n<style>\r\n  .fc-wrapper {\r\n    --fc-bg: #120a1f;\r\n    --fc-text: #f1eefc;\r\n    --fc-text-muted: rgba(230, 224, 250, 0.72);\r\n\r\n    background: var(--fc-bg);\r\n    padding: 100px 24px;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    box-sizing: border-box;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  .fc-wrapper * { box-sizing: border-box; }\r\n\r\n  .fc-wrapper::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 700px;\r\n    height: 700px;\r\n    background: radial-gradient(circle, rgba(124,58,237,0.25) 0%, rgba(124,58,237,0) 70%);\r\n    transform: translate(-50%, -50%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .fc-inner {\r\n    position: relative;\r\n    max-width: 700px;\r\n    margin: 0 auto;\r\n    text-align: center;\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    animation: fcFadeUp 0.8s ease forwards;\r\n  }\r\n\r\n  .fc-heading {\r\n    color: var(--fc-text);\r\n    font-size: clamp(28px, 4vw, 44px);\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    margin: 0 0 32px;\r\n  }\r\n\r\n  .fc-cta {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    background: linear-gradient(135deg, #a855f7, #7c3aed);\r\n    color: #fff;\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    text-decoration: none !important;\r\n    padding: 16px 32px;\r\n    border-radius: 12px;\r\n    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n  }\r\n  .fc-cta:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 14px 36px rgba(124, 58, 237, 0.6);\r\n  }\r\n  .fc-cta svg {\r\n    width: 20px;\r\n    height: 20px;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  .fc-cta:hover svg {\r\n    transform: translateX(4px);\r\n  }\r\n\r\n  .fc-note {\r\n    color: var(--fc-text-muted);\r\n    font-size: 14px;\r\n    margin: 20px 0 0;\r\n  }\r\n\r\n  @keyframes fcFadeUp {\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"fc-wrapper\">\r\n  <div class=\"fc-inner\">\r\n    <h2 class=\"fc-heading\">Give every client's content a brand it can trust<\/h2>\r\n    <a class=\"fc-cta\" href=\"#\">\r\n      <span>Get started for free<\/span>\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0\"><path fill=\"currentColor\" d=\"M11.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72a.75.75 0 0 1 0-1.06Z\"\/><\/svg>\r\n    <\/a>\r\n    <p class=\"fc-note\">No credit card needed. Free forever.<\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Brand Kit One brand kit. Every post on-brand. Save each client&#8217;s colors, logo, voice and business details once \u2014 and let it automatically shape every caption, image and post your AI generates for them. Get started for free One kit, every client Set up a dedicated Brand Kit per client \u2014 colors, logo, voice and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-753","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages\/753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/socials.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=753"}],"version-history":[{"count":0,"href":"https:\/\/socials.ink\/index.php?rest_route=\/wp\/v2\/pages\/753\/revisions"}],"wp:attachment":[{"href":"https:\/\/socials.ink\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}