ui: polish landing page trust strip and ENS search

src/app/(public)/components/features-section.tsx

@@ -63,8 +63,7 @@ export function FeaturesSection() {
         <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
           {features.map((feature, index) => (
             <div key={index} className="group relative">
-              <div className="from-primary/20 to-accent/20 absolute inset-0 rounded-2xl bg-gradient-to-r opacity-25 blur transition-opacity group-hover:opacity-40"></div>
-              <div className="bg-card border-border hover:border-primary/50 relative rounded-2xl border p-8 transition-all duration-300">
+              <div className="bg-card border-border hover:border-primary/50 relative rounded-2xl border p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
                 <div className="bg-primary/10 mb-6 flex h-12 w-12 items-center justify-center rounded-2xl">
                   {feature.icon}
                 </div>

src/app/(public)/components/footer.tsx

@@ -5,7 +5,7 @@ export function Footer() {
   return (
     <footer className="border-border bg-card/50 border-t py-12">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="flex flex-col items-center justify-between md:flex-row">
+        <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
           <Link href="/" className="flex items-center space-x-2 py-5">
             <Image
               src="/logo.svg"
@@ -18,21 +18,25 @@ export function Footer() {
             </span>
           </Link>
           <div className="text-muted-foreground flex items-center space-x-6 text-sm">
-           {/*<a href="#" className="hover:text-foreground transition-colors">
+            <a href="#" className="hover:text-foreground transition-colors">
               Privacy
             </a>
             <a href="#" className="hover:text-foreground transition-colors">
               Terms
             </a>
             <a href="#" className="hover:text-foreground transition-colors">
               Twitter
-            </a>*/}
+            </a>
             <a href="#" className="hover:text-foreground transition-colors">
               Discord
             </a>
-
           </div>
         </div>
+        <div className="border-border mt-8 border-t pt-6 text-center">
+          <p className="text-muted-foreground text-sm">
+            &copy; {new Date().getFullYear()} StartUpChain. All rights reserved.
+          </p>
+        </div>
       </div>
     </footer>
   )

src/app/(public)/components/hero-section.tsx

@@ -1,4 +1,4 @@
-import { Shield, Wallet } from 'lucide-react'
+import { Shield } from 'lucide-react'
 import Image from 'next/image'
 
 import { EnsNameChecker } from '../../../components/ens-name-checker'
@@ -7,7 +7,7 @@ export function HeroSection() {
   return (
     <section
       id="start"
-      className="relative flex min-h-[calc(100vh-4rem)] items-center justify-center overflow-hidden pt-20 pb-32"
+      className="relative flex min-h-[calc(100vh-4rem)] items-center justify-center overflow-hidden pt-60 pb-20 lg:pt-20"
     >
       {/* Background Effects */}
       <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] bg-[size:24px_24px] opacity-20" />
@@ -25,60 +25,73 @@ export function HeroSection() {
           </h1>
 
           {/* Subheadline */}
-          <p className="text-muted-foreground mt-6 max-w-2xl text-lg leading-relaxed md:text-xl">
+          <p className="text-muted-foreground mt-8 max-w-2xl text-lg leading-relaxed md:text-xl">
             The all-in-one operating system for your company. Secure your
             identity, manage treasury, and issue tokens in minutes.
           </p>
 
-          <div className="mt-12 w-full max-w-xl">
+          <div className="mt-14 w-full max-w-xl">
             <EnsNameChecker />
           </div>
 
-          <div className="mt-20 flex flex-col gap-8 lg:mt-24">
-            {/* Built at ETHGlobal */}
-            <div className="flex flex-col items-center gap-3 lg:items-start">
-              <p className="text-muted-foreground text-xs font-medium tracking-widest uppercase">
+          {/* Trust strip */}
+          <div className="mt-12 flex w-full max-w-xl flex-col items-center gap-6 lg:mt-14 lg:flex-row lg:gap-8">
+            {/* Built at */}
+            <div className="flex flex-col items-center gap-2">
+              <p className="text-muted-foreground text-xs font-medium tracking-widest uppercase lg:hidden">
                 Built at
               </p>
-              <div className="bg-card/30 border-border/50 hover:bg-card/50 flex items-center gap-3 rounded-xl border p-3 backdrop-blur-sm transition-colors">
-                <div className="relative h-10 w-10">
-                  <Image
-                    src="/eth-global.png"
-                    alt="ETHGlobal"
-                    fill
-                    className="object-contain invert"
-                  />
-                </div>
-                <span className="font-medium">ETHGlobal New York</span>
+              <div className="flex h-20 items-center lg:h-24">
+                <Image
+                  src="/eth-global-logo.png"
+                  alt="ETHGlobal New York"
+                  width={460}
+                  height={50}
+                  className="h-20 w-auto lg:h-24"
+                />
               </div>
+              <p className="text-muted-foreground hidden text-xs font-medium tracking-widest uppercase lg:block">
+                Built at
+              </p>
             </div>
 
-            {/* Partners */}
-            <div className="flex flex-col items-center gap-4 lg:items-start">
-              <p className="text-muted-foreground text-xs font-medium tracking-widest uppercase">
-                Powered by industry leaders
+            <div className="bg-muted-foreground/30 hidden w-px self-stretch lg:block" />
+
+            {/* Powered by */}
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <p className="text-muted-foreground text-xs font-medium tracking-widest uppercase lg:hidden">
+                Powered by
               </p>
-              <div className="flex flex-wrap items-center justify-center gap-4 lg:justify-start">
-                <div className="bg-card/30 border-border/50 hover:bg-card/50 flex items-center gap-3 rounded-xl border px-5 py-3 backdrop-blur-sm transition-all hover:scale-105">
-                  <div className="relative h-6 w-6">
-                    <Image
-                      src="/ens-logo.png"
-                      alt="ENS"
-                      fill
-                      className="object-contain brightness-0 invert"
-                    />
-                  </div>
-                  <span className="font-semibold">ENS</span>
+              <div className="flex w-full items-center justify-center gap-10 lg:h-24 lg:justify-between lg:gap-0">
+                <div className="flex items-center gap-1 lg:gap-1.5">
+                  <Image
+                    src="/ens-logo.png"
+                    alt="ENS"
+                    width={40}
+                    height={40}
+                    className="h-5 w-5 object-contain lg:h-8 lg:w-8"
+                  />
+                  <span className="text-sm font-semibold lg:text-lg">ENS</span>
                 </div>
-                <div className="bg-card/30 border-border/50 hover:bg-card/50 flex items-center gap-3 rounded-xl border px-5 py-3 backdrop-blur-sm transition-all hover:scale-105">
-                  <Wallet className="text-accent h-5 w-5" />
-                  <span className="font-semibold">Privy</span>
+                <div className="flex items-center">
+                  <Image
+                    src="/privy-logo.png"
+                    alt="Privy"
+                    width={120}
+                    height={32}
+                    className="h-10 w-auto object-contain lg:h-16"
+                  />
                 </div>
-                <div className="bg-card/30 border-border/50 hover:bg-card/50 flex items-center gap-3 rounded-xl border px-5 py-3 backdrop-blur-sm transition-all hover:scale-105">
-                  <Shield className="text-secondary h-5 w-5" />
-                  <span className="font-semibold">Safe</span>
+                <div className="flex items-center gap-1 lg:gap-1.5">
+                  <Shield className="h-5 w-5 opacity-80 lg:h-7 lg:w-7" />
+                  <span className="text-sm font-semibold opacity-80 lg:text-lg">
+                    Safe
+                  </span>
                 </div>
               </div>
+              <p className="text-muted-foreground hidden text-xs font-medium tracking-widest uppercase lg:block">
+                Powered by
+              </p>
             </div>
           </div>
         </div>

src/components/ens-name-checker/EnsInput.tsx

@@ -1,7 +1,6 @@
-import { type ChangeEvent, useState } from 'react'
+import type { ChangeEvent } from 'react'
 
 import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
 
 export const ENS_NAME_INPUT_ID = 'ens-name-input'
 
@@ -11,37 +10,24 @@ interface EnsInputProps {
 }
 
 export function EnsInput({ ensName, setEnsName }: EnsInputProps) {
-  const [isFocused, setIsFocused] = useState(false)
-
   return (
-    <div className="group relative w-full">
-      <div
-        className={cn(
-          'from-primary via-accent to-secondary absolute -inset-0.5 rounded-2xl bg-gradient-to-r opacity-30 blur transition duration-500 group-hover:opacity-60',
-          isFocused && 'opacity-100 blur-md duration-200'
-        )}
+    <div className="ens-input-shell relative w-full rounded-xl">
+      <Input
+        id={ENS_NAME_INPUT_ID}
+        type="text"
+        placeholder=""
+        value={ensName}
+        onChange={(event: ChangeEvent<HTMLInputElement>) =>
+          setEnsName(
+            event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')
+          )
+        }
+        className="placeholder:text-muted-foreground/50 focus-visible:ring-primary/30 relative z-10 h-16 w-full rounded-[11px] border-0 bg-transparent px-6 pr-20 text-xl transition-colors focus-visible:ring-1 md:text-2xl"
       />
-
-      <div className="relative">
-        <Input
-          id={ENS_NAME_INPUT_ID}
-          type="text"
-          placeholder="search-your-name"
-          value={ensName}
-          onChange={(event: ChangeEvent<HTMLInputElement>) =>
-            setEnsName(
-              event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')
-            )
-          }
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-          className="border-border/50 bg-background/80 placeholder:text-muted-foreground/80 h-16 w-full rounded-xl px-6 pr-20 text-xl shadow-xl backdrop-blur-xl transition-all focus-visible:border-transparent focus-visible:ring-0 md:text-2xl"
-        />
-        <div className="pointer-events-none absolute inset-y-0 right-6 flex items-center">
-          <span className="text-muted-foreground text-xl font-medium md:text-2xl">
-            .eth
-          </span>
-        </div>
+      <div className="pointer-events-none absolute inset-y-0 right-6 z-20 flex items-center">
+        <span className="text-muted-foreground text-xl font-medium md:text-2xl">
+          .eth
+        </span>
       </div>
     </div>
   )

src/components/ens-name-checker/EnsNameChecker.tsx

@@ -94,25 +94,28 @@ export function EnsNameChecker() {
   const [ensName, setEnsName] = useState('')
 
   return (
-    <div className="mx-auto mb-13 max-w-2xl md:mb-15 lg:mx-0">
-      <div className="bg-card border-border/50 relative min-h-[200px] overflow-hidden rounded-2xl border p-6 shadow-2xl backdrop-blur-sm">
-        <EnsInput ensName={ensName} setEnsName={setEnsName} />
-        {ready ? (
-          <EnsLogic ensName={ensName} />
-        ) : (
-          <EnsStatus
-            ensName={ensName}
-            normalizedName=""
-            isLoading={false}
-            error={null}
-            isTaken={false}
-            isAvailable={false}
-            resolvedAddress={null}
-            onProceed={() => {}}
-            isAuthenticating={false}
-          />
-        )}
-      </div>
+    <div className="mx-auto max-w-2xl lg:mx-0">
+      <EnsInput ensName={ensName} setEnsName={setEnsName} />
+      {!ensName && (
+        <p className="text-muted-foreground/60 mt-3 text-center text-sm lg:text-left">
+          Type a name to check .eth availability
+        </p>
+      )}
+      {ready ? (
+        <EnsLogic ensName={ensName} />
+      ) : (
+        <EnsStatus
+          ensName={ensName}
+          normalizedName=""
+          isLoading={false}
+          error={null}
+          isTaken={false}
+          isAvailable={false}
+          resolvedAddress={null}
+          onProceed={() => {}}
+          isAuthenticating={false}
+        />
+      )}
     </div>
   )
 }

src/components/ens-name-checker/EnsStatus.tsx

@@ -26,7 +26,7 @@ export function EnsStatus({
   isAuthenticating,
 }: EnsStatusProps) {
   return (
-    <div className="mt-4 min-h-[120px]">
+    <div className={ensName.length > 0 ? 'mt-4' : ''}>
       {normalizedName && isValidEnsName(ensName) && (
         <div className="animate-in fade-in duration-300">
           {isLoading ? (
@@ -89,7 +89,7 @@ export function EnsStatus({
                     </>
                   ) : (
                     <>
-                      Proceed to setup
+                      Register
                       <ArrowRight className="h-4 w-4" />
                     </>
                   )}

src/style.css

@@ -227,6 +227,40 @@
   }
 }
 
+@property --ens-border-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes ens-border-orbit {
+  to {
+    --ens-border-angle: 360deg;
+  }
+}
+
+.ens-input-shell {
+  border: 1px solid transparent;
+  background:
+    linear-gradient(var(--card), var(--card)) padding-box,
+    conic-gradient(
+        from var(--ens-border-angle),
+        var(--border) 0deg,
+        var(--border) 280deg,
+        var(--primary) 312deg,
+        var(--border) 344deg,
+        var(--border) 360deg
+      )
+      border-box;
+  animation: ens-border-orbit 4.5s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ens-input-shell {
+    animation: none;
+  }
+}
+
 .animate-blob {
   animation: blob 7s infinite;
 }