Landing Page UI changes

app/page.tsx

@@ -5,13 +5,13 @@ import Link from "next/link";
 export default function Home() {
   return (
     <BackgroundLines className="flex items-center justify-center w-full flex-col">
-      <h2 className="text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight text-neutral-500 text-center">
+      <h2 className="text-3xl md:text-5xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight text-center text-[#cfd3d9]">
         Welcome to <br />
-        <span className="bg-clip-text text-transparent bg-gradient-to-r from-white via-neutral-600 to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
+        <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#2a628f] via-[#848f9a] to-[#2a628f]">
           NomeN
         </span>
       </h2>
-      <p className="max-w-5xl mx-auto text-sm md:text-lg text-neutral-400 text-center">
+      <p className="max-w-4xl mx-auto text-sm md:text-lg lg:text-xl text-neutral-300/85 text-center mt-4 lg:mt-6 leading-relaxed">
         {
           "It doesn't merely build your resume, but rather crafts a legendary professional legacy that transforms your career into a mesmerizing narrative that demands to be read and remembered."
         }

components/ui/special-button.tsx

@@ -1,17 +1,24 @@
+import { Button } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import React from "react";
 
-const SpecialButton = () => {
+interface SpecialButtonProps extends Button {
+  classButton?: string;
+  className?: string;
+}
+
+const SpecialButton: React.FC<SpecialButtonProps> = ({ className, icon, title = "Explore", classButton }) => {
   return (
-    <button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block mt-6">
+    <button className={cn("bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block mt-6", classButton)}>
       <span className="absolute inset-0 overflow-hidden rounded-full">
         <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span>
       </span>
-      <div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-1 px-6 ring-1 ring-white/10 ">
-        <span className="hover:line-through">Explore</span>
+      <div className={cn("relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-1 px-6 ring-1 ring-white/10", className)}>
+        <span className="p-1 text-sm">{icon || title}</span>
       </div>
       <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-blue-400/0 via-emerald-400/90 to-blue-400/0 transition-opacity duration-500 group-hover:opacity-40"></span>
     </button>
   );
 };
 
-export default SpecialButton;
+export default SpecialButton;

lib/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 export interface ResumeData {
   name: string;
   location: string;
@@ -47,3 +49,8 @@ export interface Info {
   avatar?: string;
   background?: string;
 }
+
+export interface Button{
+  icon?: ReactNode;
+  title?: string;
+}