Sales Collateral Builder Feature (#1707)#1708
Merged
restarone-solutions merged 1 commit intomasterfrom Nov 23, 2025
Merged
Conversation
* sales collateral builder scaffold * fix send file * patch quality and wrap up * fix documentation and asset ordering --------- # Sales Collateral Builder Use HTML and CSS to create and export social media posts!  ## attaching assets Google Drive User? Ensure link sharing is enabled and public for the image and copy its ID to link it in the markup with the google CDN URL: ``` txt https://lh3.googleusercontent.com/d/FILE_ID_HERE ``` reference it in your markup: ```html <img src="https://lh3.googleusercontent.com/d/FILE_ID_HERE" alt="Restarone logo"> ``` ## example inline HTML and CSS. Remember when it used to be this easy? ``` html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Restarone Solutions — Instagram Post (1080×1080)</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> <style> :root{ --bg1:#0f1724; /* deep navy */ --bg2:#0b3b5a; /* teal-ish */ --accent:#7ee7c4; /* mint */ --muted:#9aa6b2; --card-size:1080px; --radius:28px; --glass: rgba(255,255,255,0.04); --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } html,body{height:100%;margin:0;font-family:var(--font);background:linear-gradient(180deg,var(--bg1) 0%, #071728 100%);display:flex;align-items:center;justify-content:center;padding:30px} /* container sized as Instagram square — open in a browser and scale to 1080px to export */ .post{ width:var(--card-size); height:var(--card-size); border-radius:20px; box-shadow:0 20px 60px rgba(2,6,23,0.6); overflow:hidden; position:relative; background:linear-gradient(135deg,var(--bg2),#04263a); display:flex; align-items:flex-start; justify-content:center; color:white; } /* subtle pattern */ .post::before{ content:""; position:absolute;inset:0; background:radial-gradient(circle at 15% 20%, rgba(255,255,255,0.03), transparent 8%), radial-gradient(circle at 85% 80%, rgba(0,0,0,0.08), transparent 10%); pointer-events:none; } .inner{width:86%;max-width:920px;margin-top:70px;display:grid;grid-template-columns:120px 1fr;gap:36px;align-items:start;} /* logo */ .logo-wrap{display:flex;flex-direction:column;align-items:center} .logo{width:120px;height:120px;border-radius:26px;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(4px)} .logo img{width:76px;height:76px;object-fit:contain} .brand{margin-top:12px;font-weight:700;letter-spacing:0.6px;font-size:14px;color:var(--accent)} /* content */ .content h1{margin:0;font-size:56px;line-height:1.02;font-weight:800;letter-spacing:-1px} .content p.lead{margin:18px 0 22px;color:var(--muted);font-size:18px;max-width:640px} /* features */ .features{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px} .chip{background:var(--glass);padding:10px 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--accent);border:1px solid rgba(255,255,255,0.04)} .cta-row{display:flex;gap:18px;align-items:center} .btn{background:linear-gradient(90deg,var(--accent),#3ae3c1);color:#052027;padding:14px 22px;border-radius:14px;font-weight:700;border:none;font-size:16px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,0.35);text-decoration:none} .btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--muted);padding:12px 18px;border-radius:12px} /* small footer */ .footer{position:absolute;left:36px;bottom:26px;font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center} .dot{width:8px;height:8px;border-radius:99px;background:var(--accent);box-shadow:0 0 18px rgba(126,231,196,0.18)} /* decorative right-side panel */ .right-panel{position:absolute;right:36px;top:72px;width:220px;padding:18px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(4px)} .stat{font-weight:800;font-size:26px} .stat small{display:block;color:var(--muted);font-weight:600;font-size:12px;margin-top:6px} /* responsive for smaller preview windows */ @media (max-width:1200px){ :root{--card-size:720px} .post{width:720px;height:720px} .inner{width:86%;gap:20px} .content h1{font-size:40px} } @media (max-width:760px){ :root{--card-size:540px} .post{width:540px;height:540px;border-radius:16px} .inner{grid-template-columns:90px 1fr} .content h1{font-size:30px} .right-panel{display:none} } </style> </head> <body> <div class="post" role="img" aria-label="Restarone Solutions — product and services spotlight"> <div class="inner"> <div class="logo-wrap"> <div class="logo"> <!-- Replace src with your Restarone logo file (png/svg) --> <img src="https://lh3.googleusercontent.com/d/ID" alt="Restarone logo"> </div> <div class="brand">Restarone Solutions</div> </div> <div class="content"> <h1>Build faster. Ship safer. Scale smarter.</h1> <p class="lead">Restarone Cloud + Violet Rails — enterprise-grade monitoring, automated ops, and talent-backed engineering to accelerate your product roadmap.</p> <div class="features"> <div class="chip">24/7 Monitoring</div> <div class="chip">Automated Alerts</div> <div class="chip">Dev Talent Network</div> </div> <div class="cta-row"> <a class="btn" href="#">Request a Demo</a> <a class="btn secondary" href="#">Learn More</a> </div> </div> </div> <div class="footer"><span class="dot"></span><span>restarone.com</span><span>•</span><span>@restarone</span></div> </div> </body> </html> ``` Co-authored-by: Restarone Solutions Inc. Software Engineering <engineering@restarone.solutions>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
sales collateral builder scaffold
fix send file
patch quality and wrap up
fix documentation and asset ordering
Sales Collateral Builder
Use HTML and CSS to create and export social media posts!
attaching assets
Google Drive User? Ensure link sharing is enabled and public for the image and copy its ID to link it in the markup with the google CDN URL:
reference it in your markup:
example
inline HTML and CSS. Remember when it used to be this easy?