feat: update landing page layout and links, improve visual elements

Author: codeaashu

src/app/iconlogo/IconLogoLandingClient.tsx

@@ -9,9 +9,7 @@ export default function IconLogoLandingClient() {
     <TanStackQueryProvider>
       <main className="min-h-screen bg-black text-white overflow-x-hidden">
         <TopNavbar />
-        <div className="pt-16">
-          <LandingPage />
-        </div>
+        <LandingPage />
       </main>
     </TanStackQueryProvider>
   );

src/iconlogo/features/editor/AppShell.tsx

@@ -95,14 +95,18 @@ export function AppShell({
           </motion.div>
           <motion.div variants={itemVariants}>
             <a
-              href="https://www.producthunt.com/products/iconlogo?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-iconlogo"
+              href="https://peerlist.io/aashuu/project/removebanana"
               target="_blank"
-              rel="noopener noreferrer"
-              className="ph-glow inline-block"
-              data-umami-event="click producthunt"
+              rel="noreferrer"
+              className="inline-block"
+              data-umami-event="click peerlist"
               data-umami-event-source="editor"
             >
-              <img alt="IconLogo - Generate clean, export-ready logos from icons in seconds. | Product Hunt" width="250" height="54" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1101768&amp;theme=dark&amp;t=1773894483224" />
+              <img
+                src="https://peerlist.io/api/v1/projects/embed/PRJHNN7JQ6QA9KKLJ1OA9AK8O9AQP8?showUpvote=true&theme=dark"
+                alt="RemoveBanana"
+                style={{ width: "auto", height: "72px" }}
+              />
             </a>
           </motion.div>
         </motion.div>

src/iconlogo/features/landing/HeroSection.tsx

@@ -4,73 +4,77 @@ import { motion } from 'framer-motion'
 
 export function HeroSection() {
   return (
-    <section className="relative flex flex-col items-center justify-center min-h-[88vh] px-4 pt-24 pb-0 text-center">
+    <section className="pt-44 md:pt-36 pb-20 px-6 relative">
       <motion.div
-        className="flex flex-col items-center max-w-4xl w-full"
+        className="max-w-4xl mx-auto text-center relative z-10"
         initial={false}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
       >
-        <motion.a
-          href="https://www.producthunt.com/products/iconlogo?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-iconlogo"
-          target="_blank"
-          rel="noopener noreferrer"
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-          initial={false}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.25, ease: [0.22, 1, 0.36, 1] }}
-          className='mb-4 ph-glow'
-          data-umami-event="click producthunt"
-          data-umami-event-source="landing"
-        >
-          <img alt="IconLogo - Generate clean, export-ready logos from icons in seconds. | Product Hunt" width="250" height="54" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1101768&amp;theme=dark&amp;t=1773894483224" />
-        </motion.a>
-        {/* Headline */}
+
         <motion.h1
-          className="text-5xl md:text-7xl font-bold tracking-tight mb-6 leading-[1.08]"
+          className="mb-6 text-center tracking-tight"
           initial={false}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.15, ease: [0.22, 1, 0.36, 1] }}
+          transition={{ duration: 0.5, delay: 0.1 }}
         >
-          The Free SVG
-          <br />
-          <span className="bg-linear-to-r from-muted via-(--foreground)/80 to-muted bg-clip-text text-transparent">Logo Maker</span>
+          <span className="inline-block whitespace-nowrap leading-[1.16] pb-[0.12em] bg-gradient-to-r from-orange-600 to-amber-500 bg-clip-text text-transparent text-[clamp(1.95rem,6.2vw,5.5rem)]">
+            The Free Icon Logo Maker
+          </span>
         </motion.h1>
 
-        {/* Subheadline */}
         <motion.p
-          className="text-lg md:text-xl text-[var(--muted)] max-w-2xl leading-relaxed mb-4"
+          className="text-lg md:text-xl text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed"
           initial={false}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
+          transition={{ duration: 0.5, delay: 0.2 }}
         >
           Pick from 300,000+ icons, customize colors and multi-stop gradients,
           export to SVG, PNG, ICO, or favicon — entirely in your browser.
         </motion.p>
 
-        {/* Privacy note */}
-        <motion.p
-          className="text-sm text-[var(--muted)]/60 mb-10"
+        <motion.div
           initial={false}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.28, ease: 'easeOut' }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.25 }}
+          className="flex flex-col items-center"
         >
-          Everything stays in your browser. 100% Open-source.
-        </motion.p>
+          <a
+            href="https://peerlist.io/aashuu/project/removebanana"
+            target="_blank"
+            rel="noreferrer"
+            className="mb-4"
+            aria-label="RemoveBanana on Peerlist"
+            data-umami-event="click peerlist"
+            data-umami-event-source="iconlogo"
+          >
+            <img
+              src="https://peerlist.io/api/v1/projects/embed/PRJHNN7JQ6QA9KKLJ1OA9AK8O9AQP8?showUpvote=true&theme=dark"
+              alt="RemoveBanana"
+              style={{ width: "auto", height: "72px" }}
+            />
+          </a>
+
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-sm md:text-base text-gray-300 mb-10">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75" />
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-orange-500" />
+            </span>
+            Supports: 300k+ Icons • SVG • PNG • ICO
+          </div>
+        </motion.div>
 
-        {/* CTAs */}
         <motion.div
-          className="flex flex-col sm:flex-row items-center gap-3"
+          className="flex flex-col sm:flex-row items-center justify-center gap-3"
           initial={false}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.32, ease: [0.22, 1, 0.36, 1] }}
+          transition={{ duration: 0.5, delay: 0.32 }}
         >
           <a href="/iconlogo/editor">
             <Button
               size="lg"
-              variant="primary"
-              className="font-semibold px-8 gap-2"
+              variant="ghost"
+              className="font-semibold px-8 gap-2 text-white bg-gradient-to-r from-orange-600 to-amber-500 hover:brightness-110"
             >
               Open Web Editor
               <Icon icon="lucide:arrow-right" width={16} />
@@ -88,12 +92,11 @@ export function HeroSection() {
           </Button>
         </motion.div>
 
-        {/* App screenshot */}
         <motion.div
           className="mt-16 w-full max-w-4xl mb-24"
           initial={false}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.7, delay: 0.42, ease: [0.22, 1, 0.36, 1] }}
+          transition={{ duration: 0.7, delay: 0.42 }}
         >
           <div className="rounded-2xl border border-[var(--border)] overflow-hidden shadow-2xl shadow-black/40">
             <img

src/iconlogo/features/landing/LandingPage.tsx

@@ -1,11 +1,13 @@
-import { GridBackground } from '#/features/editor/GridBackground'
 import { HeroSection } from './HeroSection'
 import { BentoGrid } from './BentoGrid'
 
 export function LandingPage() {
   return (
-    <div className="relative min-h-screen">
-      <GridBackground />
+    <div className="relative min-h-screen overflow-hidden">
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-[400px] opacity-20 pointer-events-none">
+        <div className="absolute inset-0 bg-gradient-to-r from-orange-600 to-amber-500 blur-[100px] rounded-full mix-blend-screen" />
+      </div>
+
       <div className="relative z-10">
         <HeroSection />
         <BentoGrid />

src/iconlogo/features/landing/PrivacyCard.tsx

@@ -17,7 +17,7 @@ export function PrivacyCard() {
       </div>
 
       <a
-        href="https://github.com/monawwar/iconlogo.dev"
+        href="https://github.com/codeaashu/RemoveBanana"
         target="_blank"
         rel="noreferrer"
       >