@localguide added htmlContent (English):
code:javascript\nexport default function LinkedInReplica() \r\n return (\r\n <div className=\min-h-screen w-full bg-gray-100 text-gray-900\>\r\n /* Top Nav */\r\n <header className=\sticky top-0 z-40 w-full border-b bg-white/80 backdrop-blur\>\r\n <div className=\mx-auto flex max-w-6xl items-center gap-4 px-4 py-3\>\r\n /* Faux LinkedIn mark */\r\n <div className=\flex h-8 w-8 items-center justify-center rounded-sm bg-blue-600 font-bold text-white\>in</div>\r\n <div className=\hidden flex-1 items-center gap-3 md:flex\>\r\n <input\r\n placeholder=\Search\\r\n className=\w-96 rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-sm outline-none focus:border-blue-600\\r\n />\r\n </div>\r\n <nav className=\ml-auto hidden items-center gap-6 md:flex\>\r\n <span className=\text-sm\>Home</span>\r\n <span className=\text-sm\>My Network</span>\r\n <span className=\text-sm\>Jobs</span>\r\n <span className=\text-sm\>Messaging</span>\r\n <span className=\text-sm\>Notifications</span>\r\n <div className=\flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-gray-200 to-gray-300 text-xs\>ME</div>\r\n </nav>\r\n </div>\r\n </header>\r\n\r\n /* Profile Top Card */\r\n <section className=\mx-auto mt-6 max-w-6xl px-4\>\r\n <div className=\overflow-hidden rounded-xl border bg-white shadow-sm\>\r\n <div className=\h-40 w-full bg-gradient-to-r from-sky-600 via-blue-600 to-indigo-600\ />\r\n <div className=\relative p-4 sm:p-6\>\r\n /* Avatar */\r\n <div className=\-mt-20 flex items-end gap-4\>\r\n <div className=\h-36 w-36 overflow-hidden rounded-full border-4 border-white bg-gray-200 shadow-md\ />\r\n <div className=\mt-14 flex-1\>\r\n <h1 className=\text-2xl font-semibold leading-6\>Shane Snow</h1>\r\n <p className=\mt-1 text-sm text-gray-700\>Author • Journalist • Entrepreneur</p>\r\n <p className=\mt-1 text-sm text-gray-500\>New York, United States · 500+ connections</p>\r\n <div className=\mt-3 flex flex-wrap gap-2\>\r\n <button className=\rounded-full bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700\>Message</button>\r\n <button className=\rounded-full border border-gray-300 bg-white px-4 py-2 text-sm font-medium hover:bg-gray-50\>Connect</button>\r\n <button className=\rounded-full border border-gray-300 bg-white px-4 py-2 text-sm font-medium hover:bg-gray-50\>More</button>\r\n </div>\r\n </div>\r\n </div>\r\n /* Meta Row */\r\n <div className=\mt-4 flex flex-wrap items-center gap-2 text-xs text-gray-500\>\r\n <span>shanesnow.com</span>\r\n <span>·</span>\r\n <span>[email protected]</span>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n /* Main Grid */\r\n <main className=\mx-auto mt-6 grid max-w-6xl grid-cols-12 gap-6 px-4\>\r\n /* Left / Main Column */\r\n <div className=\col-span-12 space-y-6 lg:col-span-8\>\r\n /* About */\r\n <section className=\rounded-xl border bg-white p-5 shadow-sm\>\r\n <h2 className=\text-lg font-semibold\>About</h2>\r\n <p className=\mt-3 text-sm leading-6 text-gray-700\>\r\n Storyteller and builder focused on the intersection of media, technology, and human behavior. Author of\r\n bestselling books on creativity and teamwork. I help teams communicate complex ideas clearly and build\r\n products that people love.\r\n </p>\r\n </section>\r\n\r\n /* Featured */\r\n <section className=\rounded-xl border bg-white p-5 shadow-sm\>\r\n <div className=\mb-3 flex items-center justify-between\>\r\n <h2 className=\text-lg font-semibold\>Featured</h2>\r\n <button className=\text-sm text-blue-600\>Add</button>\r\n </div>\r\n <div className=\grid gap-4 sm:grid-cols-2\>\r\n Array.from( length: 2 ).map((_, i) => (\r\n <article key=i className=\overflow-hidden rounded-lg border\>\r\n <div className=\h-28 bg-gradient-to-br from-gray-100 to-gray-200\ />\r\n <div className=\p-3\>\r\n <h3 className=\text-sm font-medium\>Article Title Example</h3>\r\n <p className=\mt-1 line-clamp-2 text-xs text-gray-600\>\r\n A short description of the featured article, project, or link.\r\n </p>\r\n </div>\r\n </article>\r\n ))\r\n </div>\r\n </section>\r\n\r\n /* Activity */\r\n <section className=\rounded-xl border bg-white p-5 shadow-sm\>\r\n <div className=\mb-3 flex items-center justify-between\>\r\n <h2 className=\text-lg font-semibold\>Activity</h2>\r\n <span className=\text-xs text-gray-500\>5,162 followers</span>\r\n </div>\r\n <div className=\space-y-4\>\r\n Array.from( length: 3 ).map((_, i) => (\r\n <div key=i className=\rounded-lg border p-4\>\r\n <p className=\text-sm\>\r\n Posted an update about creativity frameworks and how constraints can boost innovation.\r\n </p>\r\n <div className=\mt-2 flex gap-4 text-xs text-gray-500\>\r\n <span>34 comments</span>\r\n <span>·</span>\r\n <span>201 likes</span>\r\n </div>\r\n </div>\r\n ))\r\n </div>\r\n </section>\r\n\r\n /* Experience */\r\n <section className=\rounded-xl border bg-white p-5 shadow-sm\>\r\n <h2 className=\text-lg font-semibold\>Experience</h2>\r\n <div className=\mt-4 space-y-6\>\r\n [\r\n \r\n role: \Co-founder & Chief Creative Officer\,\r\n company: \Snow Co.\,\r\n dates: \2019 – Present · 6 yrs\,\r\n location: \New York, NY (Hybrid)\,\r\n bullets: [\r\n \Lead brand strategy and narrative design for technology clients.\,\r\n \Built frameworks for story-driven product launches and GTM.\,\r\n \Scaled a distributed creative team across design, content, and research.\,\r\n ],\r\n ,\r\n \r\n role: \Author\,\r\n company: \Portfolio / Penguin Random House\,\r\n dates: \2014 – Present\,\r\n location: \Global\,\r\n bullets: [\r\n \Wrote bestselling books on teamwork and creative collaboration.\,\r\n \Delivered 200+ keynotes and workshops for Fortune 500 teams.\,\r\n ],\r\n ,\r\n ].map((job, idx) => (\r\n <div key=idx className=\grid gap-3 sm:grid-cols-[48px_1fr]\>\r\n <div className=\h-12 w-12 rounded-md bg-gray-200\ />\r\n <div>\r\n <h3 className=\text-sm font-semibold\>job.role</h3>\r\n <p className=\text-sm text-gray-700\>job.company</p>\r\n <p className=\text-xs text-gray-500\>job.dates · job.location</p>\r\n <ul className=\mt-2 list-disc space-y-1 pl-5 text-sm text-gray-700\>\r\n job.bullets.map((b, i) => (\r\n <li key=i>b</li>\r\n ))\r\n </ul>\r\n </div>\r\n </div>\r\n ))\r\n </div>\r\n </section>\r\n\r\n /* Education */\r\n <section className=\rounded-xl border bg-white p-5 shadow-sm\>\r\n <h2 className=\text-lg font-semibold\>Education</h2>\r\n <div className=\mt-4 space-y-4\>\r\n <div className=\grid gap-3 sm:grid-cols-[48px_1fr]\>\r\n <div className=\h-12 w-12 rounded-md bg-gray-200\ />\r\n <div>\r\n <h3 className=\text-sm font-semibold\>Columbia University</h3>\r\n <p className=\text-sm text-gray-700\>M.S., Journalism</p>\r\n <p className=\text-xs text-gray-500\>2010 – 2011</p>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n /* Skills */\r\n <section className=\rounded-xl border bg-white p-5 shadow-sm\>\r\n <h2 className=\text-lg font-semibold\>Skills</h2>\r\n <div className=\mt-3 flex flex-wrap gap-2\>\r\n [\Storytelling\, \Writing\, \Public Speaking\, \Brand Strategy\, \Leadership\].map((s) => (\r\n <span\r\n key=s\r\n className=\rounded-full border border-gray-300 bg-gray-50 px-3 py-1 text-xs text-gray-800\\r\n >\r\n s\r\n </span>\r\n ))\r\n </div>\r\n </section>\r\n\r\n /* Recommendations */\r\n <section className=\rounded-xl border bg-white p-5 shadow-sm\>\r\n <h2 className=\text-lg font-semibold\>Recommendations</h2>\r\n <div className=\mt-4 space-y-4\>\r\n [1, 2].map((i) => (\r\n <blockquote key=i className=\rounded-lg border p-4 text-sm text-gray-700\>\r\n “Shane brings clarity to complex stories and inspires teams to do their best work.”\r\n <footer className=\mt-2 text-xs text-gray-500\>— Colleague</footer>\r\n </blockquote>\r\n ))\r\n </div>\r\n </section>\r\n </div>\r\n\r\n /* Right Sidebar */\r\n <aside className=\col-span-12 space-y-6 lg:col-span-4\>\r\n /* People You May Know / Resources */\r\n <section className=\rounded-xl border bg-white p-5 shadow-sm\>\r\n <h2 className=\text-lg font-semibold\>Resources</h2>\r\n <ul className=\mt-3 space-y-3 text-sm\>\r\n <li className=\flex items-start gap-3\>\r\n <div className=\mt-0.5 h-7 w-7 rounded bg-gray-200\ />\r\n <div>\r\n <p className=\font-medium\>Creator mode</p>\r\n <p className=\text-xs text-gray-500\>Grow your audience with featured topics.</p>\r\n </div>\r\n </li>\r\n <li className=\flex items-start gap-3\>\r\n <div className=\mt-0.5 h-7 w-7 rounded bg-gray-200\ />\r\n <div>\r\n <p className=\font-medium\>Analytics</p>\r\n <p className=\text-xs text-gray-500\>See profile and post insights.</p>\r\n </div>\r\n </li>\r\n </ul>\r\n </section>\r\n\r\n /* People also viewed */\r\n <section className=\rounded-xl border bg-white p-5 shadow-sm\>\r\n <h2 className=\text-lg font-semibold\>People also viewed</h2>\r\n <ul className=\mt-3 space-y-3\>\r\n [\Writer A\, \Founder B\, \Designer C\].map((n) => (\r\n <li key=n className=\flex items-center gap-3\>\r\n <div className=\h-10 w-10 rounded-full bg-gray-200\ />\r\n <div className=\flex-1\>\r\n <p className=\text-sm font-medium\>n</p>\r\n <p className=\text-xs text-gray-500\>Headline goes here</p>\r\n </div>\r\n <button className=\rounded-full border border-gray-300 px-3 py-1 text-xs\>Connect</button>\r\n </li>\r\n ))\r\n </ul>\r\n </section>\r\n </aside>\r\n </main>\r\n\r\n <footer className=\mx-auto mt-10 max-w-6xl px-4 pb-16 text-center text-xs text-gray-500\>\r\n <p>This is a look‑alike profile page for demo purposes.</p>\r\n </footer>\r\n </div>\r\n );\r\n\r\n\n\n\n,hideSignIn:false,hideMenu:false
You are viewing a single comment's thread from: