+
+
+
+
+
diff --git a/Templates/Vercel Theme/style.css b/Templates/Vercel Theme/style.css
new file mode 100644
index 000000000..40ad12c31
--- /dev/null
+++ b/Templates/Vercel Theme/style.css
@@ -0,0 +1,289 @@
+/* Vercel-Inspired Theme for LinkFree */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+ --bg-primary: #000000;
+ --bg-secondary: #111111;
+ --text-primary: #ffffff;
+ --text-secondary: #888888;
+ --border-color: #333333;
+ --hover-bg: #1a1a1a;
+ --accent-gradient: linear-gradient(to right, #0070f3, #00dfd8);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ background-color: var(--bg-primary);
+ color: var(--text-primary);
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.background-gradient {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(circle at 50% 0%, rgba(0, 112, 243, 0.15), transparent 50%),
+ radial-gradient(circle at 80% 50%, rgba(0, 223, 216, 0.1), transparent 50%);
+ pointer-events: none;
+ z-index: 0;
+}
+
+.container {
+ max-width: 640px;
+ width: 100%;
+ padding: 40px 24px;
+ position: relative;
+ z-index: 1;
+}
+
+/* Profile Section */
+.profile-section {
+ text-align: center;
+ margin-bottom: 48px;
+ animation: fadeInUp 0.6s ease-out;
+}
+
+.avatar {
+ width: 96px;
+ height: 96px;
+ margin: 0 auto 24px;
+ position: relative;
+}
+
+.avatar::before {
+ content: '';
+ position: absolute;
+ top: -4px;
+ left: -4px;
+ right: -4px;
+ bottom: -4px;
+ background: var(--accent-gradient);
+ border-radius: 50%;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.avatar:hover::before {
+ opacity: 1;
+}
+
+.avatar img {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 2px solid var(--border-color);
+ position: relative;
+ z-index: 1;
+}
+
+.username {
+ font-size: 32px;
+ font-weight: 700;
+ margin-bottom: 8px;
+ background: linear-gradient(to right, #ffffff, #888888);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ color: transparent;
+}
+
+.bio {
+ font-size: 16px;
+ color: var(--text-secondary);
+ font-weight: 400;
+ letter-spacing: -0.01em;
+}
+
+/* Links Section */
+.links-section {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 48px;
+}
+
+.link-card {
+ background-color: var(--bg-secondary);
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ padding: 20px 24px;
+ text-decoration: none;
+ color: var(--text-primary);
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+ animation: fadeInUp 0.6s ease-out backwards;
+}
+
+.link-card:nth-child(1) { animation-delay: 0.1s; }
+.link-card:nth-child(2) { animation-delay: 0.15s; }
+.link-card:nth-child(3) { animation-delay: 0.2s; }
+.link-card:nth-child(4) { animation-delay: 0.25s; }
+.link-card:nth-child(5) { animation-delay: 0.3s; }
+.link-card:nth-child(6) { animation-delay: 0.35s; }
+.link-card:nth-child(7) { animation-delay: 0.4s; }
+.link-card:nth-child(8) { animation-delay: 0.45s; }
+.link-card:nth-child(9) { animation-delay: 0.5s; }
+.link-card:nth-child(10) { animation-delay: 0.55s; }
+
+.link-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--accent-gradient);
+ opacity: 0;
+ transition: opacity 0.2s ease;
+}
+
+.link-card:hover {
+ border-color: transparent;
+ transform: translateY(-2px);
+ box-shadow: 0 10px 40px rgba(0, 112, 243, 0.2);
+}
+
+.link-card:hover::before {
+ opacity: 0.1;
+}
+
+.link-card:active {
+ transform: translateY(0);
+}
+
+.link-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ z-index: 1;
+}
+
+.link-title {
+ font-size: 16px;
+ font-weight: 500;
+ letter-spacing: -0.01em;
+}
+
+.link-arrow {
+ font-size: 20px;
+ transition: transform 0.2s ease;
+ opacity: 0.5;
+}
+
+.link-card:hover .link-arrow {
+ transform: translateX(4px);
+ opacity: 1;
+}
+
+/* Footer */
+.footer {
+ text-align: center;
+ padding-top: 24px;
+ border-top: 1px solid var(--border-color);
+ animation: fadeIn 0.6s ease-out 0.4s backwards;
+}
+
+.footer p {
+ font-size: 14px;
+ color: var(--text-secondary);
+ font-weight: 400;
+}
+
+.footer a {
+ color: var(--text-primary);
+ text-decoration: none;
+ transition: color 0.2s ease;
+ position: relative;
+}
+
+.footer a::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 100%;
+ height: 1px;
+ background: var(--accent-gradient);
+ transform: scaleX(0);
+ transition: transform 0.2s ease;
+}
+
+.footer a:hover {
+ color: #0070f3;
+}
+
+.footer a:hover::after {
+ transform: scaleX(1);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .container {
+ padding: 32px 20px;
+ }
+
+ .username {
+ font-size: 28px;
+ }
+
+ .bio {
+ font-size: 14px;
+ }
+
+ .link-card {
+ padding: 16px 20px;
+ }
+
+ .link-title {
+ font-size: 15px;
+ }
+}
+
+@media (max-width: 480px) {
+ .username {
+ font-size: 24px;
+ }
+
+ .avatar {
+ width: 80px;
+ height: 80px;
+ }
+}
+
+
+
+ 
+
+
+ Your Name
+Developer, Designer & Creator
+
+
+
+
+
+
+ GitHub
+ →
+
+
+
+
+
+ Twitter
+ →
+
+
+
+
+
+ LinkedIn
+ →
+
+
+
+
+
+ Website
+ →
+
+
+
+
+
+ Email
+ →
+
+
+