diff --git a/public/css/home.css b/public/css/home.css index 1b70037..e3411bb 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -15,10 +15,7 @@ filter: blur(28px); z-index: 9999; mix-blend-mode: screen; - transition: - transform 0.1s ease-out, - width 0.3s ease, - height 0.3s ease; + transition: transform 0.1s ease-out, width 0.3s ease, height 0.3s ease; transform: translate(-50%, -50%); display: none; /* JS will reveal it to avoid popping instantly */ @@ -38,6 +35,7 @@ } @keyframes blink { + 0%, 100% { opacity: 1; @@ -144,6 +142,8 @@ gap: 6px; } + + @media (max-width: 768px) { .navbar-actions { gap: 6px; @@ -157,6 +157,14 @@ } } + + + + + + + + .btn-nav-ghost { color: var(--text-secondary); border: 1px solid var(--border); @@ -374,7 +382,7 @@ color: var(--accent-light); } [data-theme="light"] .mega-item:hover .mega-item-title { - color: #111111 !important; + color: #111111 !important; } /* Dropdown CTA Banner */ @@ -386,11 +394,7 @@ } .mega-cta-content { - background: linear-gradient( - 135deg, - rgba(168, 85, 247, 0.08), - rgba(236, 72, 153, 0.08) - ); + background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(236, 72, 153, 0.08)); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 14px; padding: 16px 24px; @@ -567,12 +571,7 @@ } .gradient-text { - background: linear-gradient( - 135deg, - var(--accent-light), - var(--accent2-light), - var(--accent) - ); + background: linear-gradient(135deg, var(--accent-light), var(--accent2-light), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -669,6 +668,7 @@ } @keyframes heroFloat { + 0%, 100% { transform: translateY(0); @@ -719,12 +719,7 @@ position: absolute; inset: -3px; border-radius: 50%; - background: conic-gradient( - from 0deg, - var(--accent), - var(--accent2), - var(--accent) - ); + background: conic-gradient(from 0deg, var(--accent), var(--accent2), var(--accent)); animation: rotateGlow 4s linear infinite; filter: blur(3px); opacity: 0.7; @@ -801,15 +796,12 @@ } .mock-featured { - background: linear-gradient( - 135deg, - rgba(168, 85, 247, 0.1), - rgba(236, 72, 153, 0.1) - ); + background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1)); border-color: rgba(168, 85, 247, 0.25); } @keyframes mockLinkFloat { + 0%, 100% { transform: translateX(0); @@ -920,11 +912,7 @@ /* ─── Theme Gallery ─── */ .theme-gallery-section { - background: radial-gradient( - ellipse 60% 40% at 50% 50%, - rgba(168, 85, 247, 0.04), - transparent - ); + background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(168, 85, 247, 0.04), transparent); } .theme-showcase { @@ -1010,11 +998,7 @@ font-family: var(--font-heading); font-size: 3.5rem; font-weight: 800; - background: linear-gradient( - 135deg, - var(--accent-light), - var(--accent2-light) - ); + background: linear-gradient(135deg, var(--accent-light), var(--accent2-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -1029,11 +1013,7 @@ /* ─── Pricing Section ─── */ .pricing-section { - background: radial-gradient( - ellipse 70% 50% at 50% 50%, - rgba(168, 85, 247, 0.04), - transparent - ); + background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(168, 85, 247, 0.04), transparent); } .billing-toggle { @@ -1131,11 +1111,7 @@ /* Popular card – gradient border glow */ .pricing-card-popular { - background: linear-gradient( - 135deg, - rgba(168, 85, 247, 0.06), - rgba(236, 72, 153, 0.06) - ); + background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(236, 72, 153, 0.06)); border-color: rgba(168, 85, 247, 0.3); box-shadow: 0 0 40px rgba(168, 85, 247, 0.08); transform: scale(1.03); @@ -1227,22 +1203,14 @@ font-size: 3.2rem; font-weight: 800; line-height: 1; - background: linear-gradient( - 135deg, - var(--text-primary), - var(--text-secondary) - ); + background: linear-gradient(135deg, var(--text-primary), var(--text-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pricing-card-popular .price-amount { - background: linear-gradient( - 135deg, - var(--accent-light), - var(--accent2-light) - ); + background: linear-gradient(135deg, var(--accent-light), var(--accent2-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -1346,11 +1314,7 @@ } .cta-card { - background: linear-gradient( - 135deg, - rgba(168, 85, 247, 0.08), - rgba(236, 72, 153, 0.08) - ); + background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(236, 72, 153, 0.08)); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: var(--radius-xl); padding: 60px 40px; @@ -1453,321 +1417,74 @@ } } -/* ========================= - FOOTER -========================= */ - +/* ─── Footer ─── */ .site-footer { - position: relative; - overflow: hidden; border-top: 1px solid var(--border); - padding: 80px 24px 32px; - background: radial-gradient( - circle at top center, - rgba(99, 102, 241, 0.08), - transparent 50% - ); -} - -/* Decorative Glow */ -.footer-bg-glow { - position: absolute; - inset: 0; - pointer-events: none; - background: radial-gradient( - circle at 50% 0%, - rgba(120, 119, 198, 0.12), - transparent 45% - ); - z-index: 0; + padding: 48px 24px 32px; + position: relative; + z-index: 1; } .footer-inner { max-width: 1200px; margin: 0 auto; - position: relative; - z-index: 1; -} - -/* ========================= - CTA SECTION -========================= */ - -.footer-cta { - display: grid; - grid-template-columns: 1.3fr 0.8fr; - gap: 40px; - margin-bottom: 64px; - padding: 36px; - border: 1px solid var(--border); - border-radius: var(--radius-xl); - backdrop-filter: blur(20px); - background: rgba(255, 255, 255, 0.03); -} - -.footer-badge { - display: inline-flex; - align-items: center; - padding: 6px 12px; - border-radius: 999px; - margin-bottom: 16px; - font-size: 0.8rem; - background: rgba(255, 255, 255, 0.05); - color: var(--text-secondary); -} - -.footer-cta h2 { - font-size: clamp(1.8rem, 3vw, 2.6rem); - line-height: 1.15; - margin-bottom: 12px; -} - -.footer-cta p { - color: var(--text-muted); - max-width: 600px; -} - -.footer-cta-actions { - display: flex; - gap: 14px; - margin-top: 24px; - flex-wrap: wrap; -} - -/* ========================= - NEWSLETTER -========================= */ - -.footer-newsletter h3 { - margin-bottom: 10px; -} - -.footer-newsletter p { - color: var(--text-muted); - margin-bottom: 18px; -} - -.newsletter-form { - display: flex; - gap: 10px; -} - -.newsletter-form input { - flex: 1; - min-width: 0; - height: 46px; - padding: 0 14px; - border-radius: 12px; - border: 1px solid var(--border); - background: rgba(255, 255, 255, 0.04); - color: var(--text-primary); -} - -.newsletter-form button { - height: 46px; - padding: 0 18px; - border: none; - border-radius: 12px; - cursor: pointer; -} - -/* ========================= - MAIN FOOTER GRID -========================= */ - -.footer-main-grid { - display: grid; - grid-template-columns: 320px 1fr; - gap: 60px; - margin-bottom: 40px; } .footer-brand-section { - margin-bottom: 0; + margin-bottom: 32px; } -.footer-description { - margin-top: 16px; +.footer-brand-section p { color: var(--text-muted); - line-height: 1.7; - max-width: 300px; -} - -/* ========================= - SOCIAL LINKS -========================= */ - -.footer-socials { - display: flex; - gap: 12px; - margin-top: 24px; - flex-wrap: wrap; + font-size: 0.85rem; + margin-top: 10px; } -.social-link { - width: 42px; - height: 42px; +.footer-links-grid { display: flex; - align-items: center; + gap: 60px; + margin-bottom: 32px; justify-content: center; - border-radius: 12px; - text-decoration: none; - color: var(--text-secondary); - border: 1px solid var(--border); - background: rgba(255, 255, 255, 0.03); - transition: all 0.25s ease; -} - -.social-link:hover { - color: var(--text-primary); - transform: translateY(-3px); - border-color: rgba(255, 255, 255, 0.2); - background: rgba(255, 255, 255, 0.06); } -/* ========================= - LINK COLUMNS -========================= */ - -.footer-links-grid { - display: grid; - grid-template-columns: repeat(5, minmax(120px, 1fr)); - gap: 32px; - margin-bottom: 0; +.footer-links-grid > div { + text-align: center; } -.footer-column h4 { +.footer-links-grid h4 { font-family: var(--font-heading); - font-size: 0.9rem; font-weight: 600; - margin-bottom: 16px; - color: var(--text-primary); + font-size: 0.85rem; + margin-bottom: 12px; + color: var(--text-secondary); } -.footer-column a { +.footer-links-grid a { display: block; - text-decoration: none; color: var(--text-muted); - font-size: 0.9rem; - padding: 7px 0; - transition: all 0.25s ease; + font-size: 0.85rem; + padding: 4px 0; + transition: color var(--duration-fast) var(--ease-out); + text-decoration: none; } -.footer-column a:hover { +.footer-links-grid a:hover { color: var(--text-primary); - transform: translateX(4px); } -/* ========================= - BOTTOM BAR -========================= */ - .footer-bottom { - border-top: 1px solid var(--border); padding-top: 24px; - - display: flex; - align-items: center; - justify-content: space-between; - gap: 20px; - - color: var(--text-muted); - font-size: 0.82rem; -} - -.footer-bottom-right { - display: flex; - gap: 18px; -} - -.footer-bottom-right a { - text-decoration: none; + border-top: 1px solid var(--border); + font-size: 0.78rem; color: var(--text-muted); - transition: color 0.2s ease; -} - -.footer-bottom-right a:hover { - color: var(--text-primary); -} - -/* ========================= - RESPONSIVE -========================= */ - -@media (max-width: 1024px) { - .footer-main-grid { - grid-template-columns: 1fr; - gap: 40px; - } - - .footer-links-grid { - grid-template-columns: repeat(3, 1fr); - } - - .footer-cta { - grid-template-columns: 1fr; - } -} - -@media (max-width: 768px) { - .site-footer { - padding: 64px 20px 28px; - } - - .footer-links-grid { - grid-template-columns: repeat(2, 1fr); - gap: 28px; - } - - .newsletter-form { - flex-direction: column; - } - - .footer-bottom { - flex-direction: column; - text-align: center; - } - - .footer-bottom-right { - justify-content: center; - flex-wrap: wrap; - } -} - -@media (max-width: 520px) { - .footer-links-grid { - grid-template-columns: 1fr; - text-align: center; - } - - .footer-socials { - justify-content: center; - } - - .footer-brand-section { - text-align: center; - } - - .footer-description { - max-width: 100%; - } - - .footer-cta { - padding: 24px; - } - - .footer-cta-actions { - flex-direction: column; - } } +/* ─── Scroll Animations ─── */ /* ─── Scroll Animations ─── */ .animate-on-scroll { opacity: 0; transform: translateY(40px); - transition: - opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), - transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); + transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--delay, 0s); will-change: opacity, transform; } @@ -1816,11 +1533,7 @@ align-items: center; position: relative; min-height: 300px; - background: radial-gradient( - circle at center, - rgba(168, 85, 247, 0.1), - transparent 70% - ); + background: radial-gradient(circle at center, rgba(168, 85, 247, 0.1), transparent 70%); } .mock-card { @@ -2141,6 +1854,7 @@ } @media (max-width: 768px) { + .use-case-card, .use-case-card.reverse { flex-direction: column; @@ -2235,6 +1949,7 @@ } @media (max-width: 768px) { + .navbar-links, .navbar-actions { display: none !important; @@ -2311,40 +2026,6 @@ grid-template-columns: 1fr 1fr; } } -#scrollTopBtn { - position: fixed; - bottom: 32px; - right: 32px; - width: 48px; - height: 48px; - border-radius: 50%; - background: var(--accent, #a855f7); - border: none; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - pointer-events: none; - transform: translateY(12px); - transition: - opacity 0.3s ease, - transform 0.3s ease; - z-index: 9999; - box-shadow: 0 4px 20px rgba(168, 85, 247, 0.5); -} -#scrollTopBtn.visible { - opacity: 1; - pointer-events: auto; - transform: translateY(0); -} -#scrollTopBtn:hover { - transform: translateY(-3px); - box-shadow: 0 8px 28px rgba(168, 85, 247, 0.7); -} -#scrollTopBtn svg { - stroke: #fff; -} @media (max-width: 768px) { .navbar-links, diff --git a/public/home.html b/public/home.html index 0679869..3654b88 100644 --- a/public/home.html +++ b/public/home.html @@ -1,813 +1,374 @@ - + - - - - - Conn — All Links at One Place | Best Link in Bio Tool - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
-
-
-
-
- - - - + - -
-
-
- - ✨ Your links, your style -
-

- One Link.
- Infinite Possibilities. -

-

- |
- Choose from 12+ stunning themes, track analytics, and make your - online presence unforgettable. -

-
- - - - - Get Started Free - - - See Demo - - - - - + +
+
+
+
+
+
+
C
+
+
Creator Name
+
Digital creator & developer
+
+
🚀 My Portfolio
+
📸 Instagram
+
🎵 Spotify
+
💼 LinkedIn
+
+
+
+
- -
-
-
-
-
-
-
C
+ +
+
+
+
+
+ Share content +

Share every type of content in limitless ways. +

+

Connect all your content across social media, websites, stores, and more in one link in bio. Customize + every detail to match your brand and drive more clicks.

+
+
+
+ + + + Latest Video
-
Creator Name
-
Digital creator & developer
-
-
- 🚀 My Portfolio -
-
📸 Instagram
-
- 🎵 Spotify -
-
💼 LinkedIn
+
+ + + + New Podcast
-
-
-
- -
-
-
-
-
- Share content -

- Share every type of content in - limitless ways. -

-

- Connect all your content across social media, websites, stores, - and more in one link in bio. Customize every detail to match - your brand and drive more clicks. -

-
-
-
- - - - Latest Video -
-
- - - - New Podcast -
-
+
+
+ Monetize +

Sell products, collect payments and make monetization + simple.

+

Turn your Conn page into a storefront that pays. Add affiliate products, share what you love, and start + earning by directing your audience to your curated offers.

- -
-
- Monetize -

- Sell products, collect payments and make - monetization simple. -

-

- Turn your Conn page into a storefront that pays. Add affiliate - products, share what you love, and start earning by directing - your audience to your curated offers. -

-
-
-
-
Total Earnings
-
₹42,500
-
-
-
-
-
-
-
-
+
+
+
Total Earnings
+
₹42,500
+
+
+
+
+
+
+
+
-
-
- Grow -

- Grow, own and engage your audience - across all channels. -

-

- Track your engagement over time, monitor click-throughs, and - learn what’s converting your audience. Make informed updates on - the fly to keep them coming back. -

-
-
-
-
- Clicks - 12.4K -
-
- CTR - 4.8% -
+
+
+ Grow +

Grow, own and engage your audience across all + channels.

+

Track your engagement over time, monitor click-throughs, and learn what’s converting your audience. Make + informed updates on the fly to keep them coming back.

+
+
+
+
+ Clicks + 12.4K +
+
+ CTR + 4.8%
-
+
+ + + +
+
+
+ Features +

Everything you need.
Nothing you don't.

+

Powerful tools to build and manage your online presence, wrapped in a beautiful + interface.

+
- -
-
-
- Features -

- Everything you need.
Nothing you don't. -

-

- Powerful tools to build and manage your online presence, wrapped in - a beautiful interface.

@@ -1070,134 +546,64 @@

26+ Stunning Themes

-
-
-
- - - - - -
-

12+ Stunning Themes

-

- From Midnight Noir to Neon Cyber — find the perfect aesthetic that - matches your vibe. One click to switch. -

+
+
+ + + + +
+

Real-Time Analytics

+

Track every click, see what's working, optimize your links. Powerful insights with a clean dashboard.

+
-
-
- - - - - -
-

Real-Time Analytics

-

- Track every click, see what's working, optimize your links. - Powerful insights with a clean dashboard. -

+
+
+ + + +
+

Full Customization

+

Edit your name, bio, avatar, and social links. Drag to reorder. Toggle links on and off instantly.

+
-
-
- - - - -
-

Full Customization

-

- Edit your name, bio, avatar, and social links. Drag to reorder. - Toggle links on and off instantly. -

+
+
+ + + +
+

Unlimited Links

+

No limits on how many links you can add. Portfolios, music, stores, socials — all in one beautiful page. +

+
-
-
- - - - -
-

Unlimited Links

-

- No limits on how many links you can add. Portfolios, music, - stores, socials — all in one beautiful page. -

+
+
+ + + + +
+

Mobile-First Design

+

Pixel-perfect on every device. Your page looks incredible whether viewed on a phone, tablet, or desktop. +

+
-
-
- - - - - -
-

Mobile-First Design

-

- Pixel-perfect on every device. Your page looks incredible whether - viewed on a phone, tablet, or desktop. -

+
+
+ + +

Fast & Secure

Lightning-fast load times. No tracking scripts. Your data stays yours. Built with performance in mind.

@@ -1216,459 +622,241 @@

Find your aesthetic.

-
-
- - - +
+
+
+
+ + +
-

Fast & Secure

-

- Lightning-fast load times. No tracking scripts. Your data stays - yours. Built with performance in mind. -

-
-
-
- - - - - -
-
-
- Why Conn? -

- Built for creators. -

@@ -1696,641 +884,284 @@

Built for creators.
0
ms Load Time

-
-
-
0
-
Themes
-
-
-
0
-
% Free
-
-
-
0
-
Ads
-
-
-
0
-
ms Load Time
-
-
- +
+ - -
-
-
- Trusted By -

- The only link in bio - trusted by creators. -

-
-
-
-
DC
-

- "Once I got Conn set up, I was like, oh my god – why did I spend - ₹5000 on a website? I don’t need all of that! Now, I can see the - monetization of my following becoming a full-time thing." -

-
-

David Coleman

- Digital Creator -
-
-
-
- CT -
-

- "It’s so much easier to set up and have all of your links in one - place in a well-designed format. I hardly touch my Wordpress site - anymore. I just send people to my Conn page!" -

-
-

Catie T.

- Musician -
+ +
+
+
+ Trusted By +

The only link in bio trusted by creators.

+
+
+
+
DC
+

"Once I got Conn set up, I was like, oh my god – why did I spend ₹5000 on a + website? I don’t need all of that! Now, I can see the monetization of my following becoming a full-time + thing."

+
+

David Coleman

+ Digital Creator
-
-
TF
-

- "We love how Conn has helped us manage our business by having all - social media and ways to pay in one location. The verified badge - and custom domain make it look extremely professional." -

-
-

Tiffany

- Business Owner -
+
+
+
CT
+

"It’s so much easier to set up and have all of your links in one place in a + well-designed format. I hardly touch my Wordpress site anymore. I just send people to my Conn page!"

+
+

Catie T.

+ Musician
-
-
- - -
-
-
- Resources -

- Learn & Grow. -

-

- Master the platform, scale your audience, and boost your earnings - with our ultimate guides. +

+
TF
+

"We love how Conn has helped us manage our business by having all social media + and ways to pay in one location. The verified badge and custom domain make it look extremely professional."

-
-
- -
- - - -
-
- Guide -

Getting Started with Conn

-

- Everything you need to know to set up your profile and share - your first link to the world. -

-
- - -
- - - - -
-
- Strategy -

How to Monetize Your Audience

-

- Proven strategies for earning more through digital products, - storefronts, and affiliate links. -

-
- - -
- - - -
-
- Success Story -

Zero to 100k: A Creator's Journey

-

- How one creator skyrocketed their engagement by consolidating - their web presence on Conn. -

-
- +
+

Tiffany

+ Business Owner +
-
+
+
- -
-
-
- FAQ -

- Questions? Answered. -

-
-
-
- -
-

- Every time you have something new to share, changing the link in - each of your social bios is time-consuming. Conn means you never - have to compromise. You can keep everything you want to share - online in one link! If you don't have a website, that's fine. If - you have a Conn page, you don't need one. -

-
+ +
+
+
+ Resources +

Learn & Grow.

+

Master the platform, scale your audience, and boost your earnings with our ultimate guides.

+
+
+ +
+
-
- -
-

- Yes! Conn is a trusted, identifiable, and familiar link that - your audience will feel perfectly safe clicking on. It is fully - compliant with the guidelines of major platforms like Instagram, - TikTok, and YouTube. -

-
+
+ Guide +

Getting Started with Conn

+

Everything you need to know to set up your profile and share your first link to the world.

-
- -
-

- Absolutely! You can share affiliate links, direct audiences to - your online stores, or collect leads for your services. Removing - the friction between discovery and purchase significantly boosts - your conversion rates. -

-
+ + +
+
-
- -
-

- No coding skills are required! You can change themes, update - links, and edit your profile directly from our beautifully - simple dashboard. For advanced users on the Plus/Pro plans, we - do offer custom CSS if you really want to get technical. -

-
+
+ Strategy +

How to Monetize Your Audience

+

Proven strategies for earning more through digital products, storefronts, and affiliate links.

-
+ + +
+ +
+
+ Success Story +

Zero to 100k: A Creator's Journey

+

How one creator skyrocketed their engagement by consolidating their web presence on Conn.

+
+
-
+
+
- -
-
-
-

Ready to stand out?

-

Create your page in under a minute. No sign-up needed.

-
- - - - - Launch Your Page - + +
+
+
+ FAQ +

Questions? Answered.

+
+
+
+ +
+

Every time you have something new to share, changing the link in each of your social bios is + time-consuming. Conn means you never have to compromise. You can keep everything you want to share online + in one link! If you don't have a website, that's fine. If you have a Conn page, you don't need one.

-
-
- - -
-
-
- Contact -

- Get in touch. -

-

- Have a question, feedback, or want to collaborate? Drop us a message - and we'll get back to you. -

+
+ +
+

Yes! Conn is a trusted, identifiable, and familiar link that your audience will feel perfectly safe + clicking on. It is fully compliant with the guidelines of major platforms like Instagram, TikTok, and + YouTube.

+
- -
-
-
-
- - -
-
- - -
-
-
- - -
- -
- -
- - -
- -
-
- © 2026 Conn. All rights reserved. -
- -
- Built with ⚡ by Aether Code Society + + +
+ © 2026 Conn. Built with ⚡ +
+
+ + + + - - + + + + + - - - - -