Skip to content

Instantly share code, notes, and snippets.

@GabrielShaad

GabrielShaad/Profile.tsx

Created September 2, 2025 21:20
Show Gist options
  • Save GabrielShaad/f73df0b2312b7f653c498cec5d142060 to your computer and use it in GitHub Desktop.
Save GabrielShaad/f73df0b2312b7f653c498cec5d142060 to your computer and use it in GitHub Desktop.
Download ZIP
Figma Dev Mode MCP
Raw
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Importar fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Text:wght@400;500;600;700&display=swap');
Raw
layout.tsx
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Raw
page.tsx
import Profile from './Profile';
import './globals.css';
export default function App() {
return (
<main className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div className="w-[375px] h-[812px] bg-white rounded-[20px] shadow-2xl overflow-hidden">
<Profile />
</div>
</main>
);
}
Raw
Profile.tsx
import React from 'react';
// Imagens do Figma - normalmente essas seriam servidas do seu CDN ou pasta de assets
const imgEllipse = "http://localhost:3845/assets/a17ff650293d51394c417e488625f34b0994eb1e.png";
const imgRectangle2 = "http://localhost:3845/assets/2ade0d98e2d017549828f132dd9448107195c2c4.png";
const imgRectangle25 = "http://localhost:3845/assets/4f39923b2742f2a4ab6d24ec1ad85d24d6f52320.png";
const imgRectangle21 = "http://localhost:3845/assets/4617a4ed0486a26c76e2f11f0a3c218ce8b03e0f.png";
const imgRectangle23 = "http://localhost:3845/assets/6f4ae089b252688e26d038f2271ab651705640e9.png";
const imgRectangle24 = "http://localhost:3845/assets/9494ed1b997f19ca25e99aaee58cbaa7ed86d004.png";
const imgRectangle22 = "http://localhost:3845/assets/b456b7729bfd87c2f756ad7eb04aa0b569616767.png";
const imgBattery = "http://localhost:3845/assets/e16700b23293e70a3f4ac9167587ead8c78b2ea5.svg";
const imgWifi = "http://localhost:3845/assets/866cadc675e45716dae6cde58ef3758954a6a0c3.svg";
const imgCell = "http://localhost:3845/assets/32bb98c5c87fc018c7ce88baa55668d5d2ddd88f.svg";
const imgHome = "http://localhost:3845/assets/2d92de8d2105bae8d99c647e1895b6994df077f3.svg";
const imgSearch = "http://localhost:3845/assets/1d07475633b3a36840c0910cb2aa351ca4b9b2df.svg";
const imgUpload = "http://localhost:3845/assets/85b4d456e135c173d82ad5fdabf910b58727d74d.svg";
const imgChat = "http://localhost:3845/assets/89874c3fe62efdacf0a50a40a68875ba33521379.svg";
const imgEllipse1 = "http://localhost:3845/assets/c92529ae55a95aff51db63648e564e0f5fe27077.svg";
const imgEllipse2 = "http://localhost:3845/assets/6d2dc107c9a3ccc8082d5d9ef13954ac583a9333.svg";
export default function Profile() {
return (
<div className="bg-white relative size-full" data-name="Profile" data-node-id="0:495">
{/* Container principal */}
<div className="absolute bg-white h-[812px] left-0 top-0 w-[375px]" data-name="Rectangle" data-node-id="0:496" />
{/* Foto de perfil */}
<div className="absolute left-[124px] size-32 top-[76px]" data-name="Ellipse" data-node-id="0:497">
<img
alt="Profile picture"
className="block max-w-none size-full rounded-full object-cover"
height="128"
src={imgEllipse}
width="128"
/>
</div>
{/* Nome do usuário */}
<div className="absolute flex flex-col font-['Comfortaa',sans-serif] font-normal justify-center leading-[0] left-[188px] text-[36px] text-black text-center text-nowrap top-64 tracking-[-0.54px] translate-x-[-50%] translate-y-[-50%]" data-node-id="0:498">
<p className="leading-[normal] whitespace-pre">Jane</p>
</div>
{/* Localização */}
<div className="absolute flex flex-col font-['Roboto',sans-serif] font-black justify-center leading-[0] left-[187.5px] text-[13px] text-black text-center text-nowrap top-[299.5px] tracking-[0.52px] translate-x-[-50%] translate-y-[-50%] uppercase" data-node-id="0:499">
<p className="leading-[normal] whitespace-pre">San francisco, ca</p>
</div>
{/* Grid de imagens da galeria */}
<div className="absolute bg-center bg-cover bg-no-repeat h-[220px] left-4 top-[491px] w-[167px] rounded-lg" data-node-id="0:500" style={{ backgroundImage: `url('${imgRectangle2}')` }} />
<div className="absolute bg-center bg-cover bg-no-repeat h-[220px] left-48 top-[1130px] w-[167px] rounded-lg" data-name="Rectangle 2.5" data-node-id="0:501" style={{ backgroundImage: `url('${imgRectangle25}')` }} />
<div className="absolute bg-center bg-cover bg-no-repeat h-[310px] left-48 top-[491px] w-[167px] rounded-lg" data-name="Rectangle 2.1" data-node-id="0:502" style={{ backgroundImage: `url('${imgRectangle21}')` }} />
<div className="absolute bg-center bg-cover bg-no-repeat h-[310px] left-48 top-[811px] w-[167px] rounded-lg" data-name="Rectangle 2.3" data-node-id="0:503" style={{ backgroundImage: `url('${imgRectangle23}')` }} />
<div className="absolute bg-center bg-cover bg-no-repeat h-[310px] left-4 top-[1040px] w-[167px] rounded-lg" data-name="Rectangle 2.4" data-node-id="0:504" style={{ backgroundImage: `url('${imgRectangle24}')` }} />
<div className="absolute bg-center bg-cover bg-no-repeat h-[310px] left-4 top-[721px] w-[167px] rounded-lg" data-name="Rectangle 2.2" data-node-id="0:505" style={{ backgroundImage: `url('${imgRectangle22}')` }} />
{/* Botão "See More" */}
<button className="absolute h-[52px] left-4 top-[1382px] w-[343px]" data-name="SeeMoreButton" data-node-id="0:1981">
<div className="absolute bg-white inset-0 rounded-[6px]">
<div aria-hidden="true" className="absolute border-2 border-black border-solid inset-0 pointer-events-none rounded-[6px]" />
</div>
<div className="absolute flex flex-col font-['Roboto',sans-serif] font-black inset-[36.54%_40.73%_34.62%_40.02%] justify-center leading-[0] text-[13px] text-black text-center text-nowrap tracking-[0.52px] uppercase" data-node-id="0:1983">
<p className="leading-[normal] whitespace-pre">see more</p>
</div>
</button>
{/* Botão "Follow Jane" */}
<button className="absolute h-[52px] left-4 top-[339px] w-[343px]" data-name="FollowButton" data-node-id="0:1978">
<div className="absolute bg-black inset-0 rounded-[6px]">
<div aria-hidden="true" className="absolute border-2 border-black border-solid inset-0 pointer-events-none rounded-[6px]" />
</div>
<div className="absolute flex flex-col font-['Roboto',sans-serif] font-black inset-[36.54%_36.94%_34.62%_36.53%] justify-center leading-[0] text-[13px] text-center text-nowrap text-white tracking-[0.52px] uppercase" data-node-id="0:1980">
<p className="leading-[normal] whitespace-pre">follow jane</p>
</div>
</button>
{/* Botão "Message" */}
<button className="absolute h-[52px] left-4 top-[407px] w-[343px]" data-name="MessageButton" data-node-id="0:1064">
<div className="absolute bg-white inset-0 rounded-[6px]">
<div aria-hidden="true" className="absolute border-2 border-black border-solid inset-0 pointer-events-none rounded-[6px]" />
</div>
<div className="absolute flex flex-col font-['Roboto',sans-serif] font-black inset-[36.54%_41.02%_34.62%_40.61%] justify-center leading-[0] text-[13px] text-black text-center text-nowrap tracking-[0.52px] uppercase" data-node-id="0:1067">
<p className="leading-[normal] whitespace-pre">message</p>
</div>
</button>
{/* Status Bar */}
<div className="absolute h-11 left-0 right-0 top-0" data-name="StatusBar" data-node-id="0:1045">
<div className="absolute h-4 right-3.5 top-[15px] w-[68px]" data-name="UI" data-node-id="0:1046">
{/* Bateria */}
<div className="absolute h-3 right-0 top-0.5 w-[25px]" data-name="Battery" data-node-id="0:1047">
<img alt="Battery" className="block max-w-none size-full" src={imgBattery} />
</div>
{/* WiFi */}
<div className="absolute bottom-0 left-[29.41%] right-[39.71%] top-[6.25%]" data-name="Wifi" data-node-id="0:1051">
<img alt="WiFi" className="block max-w-none size-full" src={imgWifi} />
</div>
{/* Sinal celular */}
<div className="absolute h-3 right-[50px] top-0.5 w-[18px]" data-name="Cell" data-node-id="0:1056">
<img alt="Cell signal" className="block max-w-none size-full" src={imgCell} />
</div>
</div>
{/* Horário */}
<div className="absolute h-[23px] left-[21px] top-2 w-14" data-name="Time" data-node-id="0:1062">
<div className="absolute font-['SF_Pro_Text',sans-serif] font-semibold leading-[0] left-[0.33px] right-[1.67px] text-[15px] text-black text-center tracking-[-0.3333px]" data-node-id="0:1063" style={{ top: "calc(50% - 5.5px)" }}>
<p className="leading-[normal]">9:27</p>
</div>
</div>
</div>
{/* Tab Bar inferior */}
<div className="absolute bottom-0 h-[83px] left-1/2 translate-x-[-50%] w-[375px]" data-name="TabBar" data-node-id="0:1068">
<div className="absolute inset-0" data-name="Background" data-node-id="0:1069">
<div className="absolute backdrop-blur-[13.591px] backdrop-filter bg-white inset-0 shadow-[0px_-0.5px_0px_0px_rgba(0,0,0,0.3)]" data-name="Background" data-node-id="0:1070" />
{/* Ícone Home */}
<button className="absolute block cursor-pointer inset-[10.84%_86.4%_40.96%_2.93%]" data-name="Home" data-node-id="0:287">
<img alt="Home" className="block max-w-none size-full" src={imgHome} />
</button>
{/* Ícone Search */}
<button className="absolute inset-[10.84%_67.47%_40.96%_21.87%]" data-name="Search" data-node-id="0:1081">
<img alt="Search" className="block max-w-none size-full" src={imgSearch} />
</button>
{/* Ícone Upload */}
<button className="absolute inset-[10.84%_40.53%_40.96%_40.8%]" data-name="Upload" data-node-id="0:1085">
<img alt="Upload" className="block max-w-none size-full" src={imgUpload} />
</button>
{/* Ícone Chat */}
<button className="absolute inset-[10.84%_21.6%_40.96%_67.73%]" data-name="Chat" data-node-id="0:1090">
<img alt="Chat" className="block max-w-none size-full" src={imgChat} />
</button>
{/* Ícone Profile */}
<div className="absolute inset-[10.84%_2.93%_40.96%_86.4%] overflow-clip" data-name="Profile" data-node-id="0:1095">
<div className="absolute contents left-[15px] top-3" data-name="person" data-node-id="0:1096">
<div className="absolute h-[6.522px] left-[15px] top-[20.48px] w-[10.435px]" data-name="Ellipse" data-node-id="0:1097">
<div className="absolute inset-[-7.67%_-4.79%]">
<img alt="Profile icon" className="block max-w-none size-full" src={imgEllipse1} />
</div>
</div>
<div className="absolute left-[16.3px] size-[7.826px] top-3" data-name="Ellipse" data-node-id="0:1098">
<div className="absolute inset-[-6.39%]">
<img alt="Profile icon detail" className="block max-w-none size-full" src={imgEllipse2} />
</div>
</div>
</div>
</div>
</div>
{/* Indicador da tab ativa */}
<div className="absolute bg-black inset-[84.34%_32%_9.64%_32%] rounded-[10px]" data-name="Shape" data-node-id="0:1099" />
</div>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment