Upload index.html with huggingface_hub

index.html

@@ -1,19 +1,34 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>About — [Your name], [what you do]</title>
+<meta name="description" content="The About page itself: who you are, who you work with, why they should trust you, and one clear way to contact you.">
+<style>:root{--bg:#ffffff;--fg:#16181d;--accent:#17505c;--muted:#5b6270}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;line-height:1.65}.wrap{max-width:1080px;margin:0 auto;padding:0 22px}header.nav{border-bottom:1px solid rgba(0,0,0,.08);position:sticky;top:0;background:var(--bg);z-index:9}header.nav .wrap{display:flex;gap:20px;align-items:center;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}header.nav a{color:var(--fg);text-decoration:none;font-size:15px}header.nav a.brand{font-weight:700;font-size:18px;margin-right:auto}section{padding:64px 0;border-bottom:1px solid rgba(0,0,0,.05)}section.hero{padding:96px 0}h1{font-size:clamp(30px,5vw,52px);line-height:1.15;margin:0 0 18px}h2{font-size:clamp(22px,3vw,32px);margin:0 0 14px}h3{font-size:18px;margin:0 0 8px}p{color:var(--muted);margin:0 0 14px;max-width:62ch}.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.card{border:1px solid rgba(0,0,0,.1);border-radius:14px;padding:22px}.btn{display:inline-block;background:var(--accent);color:#fff;padding:13px 24px;border-radius:10px;text-decoration:none;font-weight:600}footer{padding:40px 0;color:var(--muted);font-size:14px}@media(prefers-color-scheme:dark){:root{--bg:#101216;--fg:#eef1f5;--mu:#a7b0bd}.card{border-color:rgba(255,255,255,.14)}}</style>
+<script data-grow-initializer="">!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement("script");(e.type="text/javascript"),(e.src="https://faves.grow.me/main.js"),(e.defer=!0),e.setAttribute("data-grow-faves-site-id","U2l0ZTphZjljMzgyMC0yMmU5LTRhYjgtYTIxNS03OTRhMGY1N2ExYzM=");var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t);})();</script>
+<!--yj-canon-s101--><link rel="canonical" href="https://getreadystack.com/tools/about-page-template"></head>
+<body>
+<header class="nav"><div class="wrap"><a class="brand" href="index.html">About Page Template — Consultant Edition</a><a href="index.html">About</a><a href="services.html">Services</a><a href="process.html">Process</a><a href="work.html">Work</a><a href="pricing.html">Prices</a><a href="faq.html">FAQ</a><a href="contact.html">Contact</a><a href="legal.html">Legal</a></div></header>
+<main><!-- EDIT: heading -->
+<section class="hero" id="hero"><div class="wrap"><h1>[Your name] — [what you do] for [who you serve]</h1><!-- EDIT: text -->
+<p>I help [type of client, e.g. owner-managed firms with 5–50 staff] in [city / region] with [the one problem you solve].</p><!-- EDIT: text -->
+<p>Working independently since [year], from [city, country]. [One sentence on what you did before, and why it matters to this work.]</p><p><a class="btn" href="process.html">See how I work</a></p></div></section><!-- EDIT: heading -->
+<section class="about" id="about"><div class="wrap"><h2>Who this is for — and who it isn't</h2><!-- EDIT: text -->
+<p>Being specific here loses you the wrong enquiries and wins the right ones. Say plainly who you are a good fit for.</p><!-- EDIT: text -->
+<p>Replace all four points below with your own.</p><div class="grid"><div class="card"><h3>A good fit if</h3><p>[You are a [client type] with [situation], and you need [outcome] within [timeframe you can honestly meet].]</p></div><div class="card"><h3>A good fit if</h3><p>[You already have [prerequisite the client must bring, e.g. data, a team, a budget range] and want someone to [what you do with it].]</p></div><div class="card"><h3>Probably not a fit if</h3><p>[You are looking for [the adjacent service you do not offer] — for that I would point you to a specialist.]</p></div><div class="card"><h3>Probably not a fit if</h3><p>[Your project is under [your minimum engagement size] — below that, the setup costs more than the work.]</p></div></div></div></section><!-- EDIT: heading -->
+<section class="features" id="features"><div class="wrap"><h2>Background and credentials</h2><!-- EDIT: text -->
+<p>Only put things here that you can evidence if asked. Delete any card you cannot back up.</p><div class="grid"><div class="card"><h3>Experience</h3><p>[X years in [field]] — [where, and doing what].</p></div><div class="card"><h3>Qualification / membership</h3><p>[Degree, certification or professional body, with the awarding organisation and year.]</p></div><div class="card"><h3>Sectors I know</h3><p>[Sector 1], [sector 2], [sector 3] — [one line on what is different about each.]</p></div><div class="card"><h3>Languages</h3><p>[Working languages you can genuinely run a project in.]</p></div><div class="card"><h3>Where I work</h3><p>[Remote / on-site in [region] / hybrid — and your usual time zone.]</p></div></div></div></section><!-- EDIT: heading -->
+<section class="testimonial" id="testimonial"><div class="wrap"><h2>What clients say</h2><!-- EDIT: text -->
+<p>Use only real quotes you have written permission to publish, with the person's name and company. If you have none yet, delete this whole section — an empty quote block reads better than an invented one.</p><div class="grid"><div class="card"><h3>[Client name], [role], [company]</h3><p>[Their words, as they wrote them. Do not tidy the quote into marketing language.]</p></div><div class="card"><h3>[Client name], [role], [company]</h3><p>[Second real quote — ideally one that names the concrete result rather than praising you.]</p></div><div class="card"><h3>[Client name], [role], [company]</h3><p>[Third real quote, from a different sector if you have one.]</p></div></div></div></section><!-- EDIT: heading -->
+<section class="cta" id="cta"><div class="wrap"><h2>Tell me what you are working on</h2><!-- EDIT: text -->
+<p>One short message is enough: what you need, by when, and roughly what budget range you have in mind. I reply within [your honest response time].</p><p><a class="btn" href="contact.html">Contact</a></p></div></section></main>
+<footer><div class="wrap">© [Year] [Your company name] · [City, Country] · [your@email.com] — see the Legal page for company details and the privacy notice.</div></footer>
+
+
+<!--yj-share-s101--><div style="margin:28px 0 8px;text-align:center"><button id="yjcp" type="button" style="font:inherit;padding:10px 18px;border:1px solid #8884;border-radius:10px;background:transparent;cursor:pointer">Copy link</button></div><script>(function(){var b=document.getElementById("yjcp");if(!b)return;var t=b.textContent;b.addEventListener("click",function(){var u=location.href.split("#")[0];function d(){b.textContent="Link copied";setTimeout(function(){b.textContent=t;},1800);}if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(u).then(d,function(){prompt("",u);});}else{prompt("",u);}});})();</script>
+<section data-yj-cta="paid" style="margin:3rem auto;max-width:46rem;padding:1.5rem 1.25rem;border:1px solid #d8dee9;border-radius:12px;background:#fbfcfe;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif"><h2 style="margin:0 0 .5rem;font-size:1.25rem">Get the complete version <span class="yj-price">$49</span></h2><p style="margin:.25rem 0 1rem;color:#41505f">This page is the working piece. The full pack has everything below.</p><p style="margin:0 0 1rem;color:#41505f">8 HTML pages, 30 written sections, one $49 one-time file — it opens offline, uploads to any host, and keeps working after you stop paying any site builder.</p><p style="margin:0 0 1rem;color:#5b6b7c;font-size:.94rem">A comparable self-contained HTML business-site template is listed on this same shelf at $49 right now — that is the measured rival price, not a strikethrough. The other route, a hosted site builder such as Webflow, is a recurring </p><a href="https://getreadystack.com/free?p=about-page-template&amp;lang=en" rel="nofollow" style="display:inline-block;padding:.7rem 1.3rem;border-radius:8px;background:#1b64f2;color:#fff;text-decoration:none;font-weight:600">Send it to me</a></section>
+
+<script data-yj="yj-view-beacon">(function(){try{var p=location.pathname;var k='yjv:'+p;if(sessionStorage.getItem(k))return;sessionStorage.setItem(k,'1');fetch('/api/ev',{method:'POST',keepalive:true,headers:{'Content-Type':'application/json'},body:JSON.stringify({path:p,lang:"en"})}).catch(function(){});}catch(e){}})();</script>
+</body>
 </html>