feat: add images for character section

app/Section/Characters.tsx

@@ -49,7 +49,7 @@ export const Characters = () => {
           image="/images/protogen.png"
         />
       </div>
-      <div className="flex-col gap-8 mt-2 hidden md:flex">
+      <div className="flex-col gap-8 mt-2 hidden md:flex relative">
         <div className="flex gap-4">
           <CharacterImage
             name="Kentai"
@@ -66,18 +66,46 @@ export const Characters = () => {
               about
             </button>
           </div>
+          <div className="ml-21 hidden xl:block">
+            <img
+              className="rounded-4xl w-[372px] h-[288px] object-cover"
+              src="/images/red_panda2.png"
+              alt=""
+            />
+          </div>
+          <div className="hidden xl:block absolute -right-72">
+            <img
+              className="rounded-4xl w-[372px] h-[288px] object-cover"
+              src="/images/red_panda3.png"
+              alt=""
+            />
+          </div>
         </div>
-        <div className="flex gap-4">
+        <div className="flex gap-4 xl:flex-row-reverse">
           <CharacterImage
             name=""
             species="Protogen"
             gender="Male"
             image="/images/protogen.png"
           />
-          <div className="flex flex-col">
+          <div className="flex flex-col xl:text-right">
             <p className="mt-2 text-3xl">Protogen</p>
             <p className="text-3xl">Male</p>
           </div>
+          <div className="mr-16 hidden xl:block">
+            <img
+              className="rounded-4xl w-[372px] h-[288px] object-cover"
+              src="/images/protogen2.png"
+              alt=""
+            />
+          </div>
+          <div className="ml-10 hidden xl:block absolute -left-72">
+            <img
+              className="rounded-4xl w-[372px] h-[288px] object-cover"
+              src="/images/protogen3.png"
+              alt=""
+            />
+          </div>
         </div>
       </div>
     </Section>

app/Section/Contacts.tsx

@@ -33,7 +33,7 @@ export const Contacts = () => {
   return (
     <Section>
       <h2 className="text-4xl md:text-5xl">Contacts</h2>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
         {links.map((item) => {
           if (item.url) {
             return (

app/Section/Intro.tsx

@@ -1,20 +1,20 @@
 export const Intro = () => {
   return (
-    <div className="flex gap-4 flex-col">
+    <div className="flex gap-4 flex-col xl:gap-8">
       <div className="w-full flex items-center justify-center py-24 bg-[#101316] rounded-tl-[256px] rounded-br-[256px]">
-        <h1 className="text-[#FFB1CD] tracking-tight font-bold text-8xl md:text-[128px]">
+        <h1 className="text-[#FFB1CD] tracking-tight font-bold text-8xl md:text-[128px] xl:text-[200px] 2xl:text-[232px]">
           Radiquum
         </h1>
       </div>
       <div className="w-full flex items-center justify-center py-24 bg-[#161213] rounded-bl-[128px] rounded-tr-[128px] md:rounded-bl-[256px] md:rounded-tr-[256px]">
-        <div className="flex flex-col md:flex-row md:gap-8 md:flex-wrap md:justify-center">
-          <p className="text-[#C8E8FE] font-medium text-4xl md:text-5xl">
+        <div className="flex flex-col md:flex-row md:gap-8 md:flex-wrap md:justify-center 2xl:gap-16">
+          <p className="text-[#C8E8FE] font-medium text-4xl md:text-5xl xl:text-8xl 2xl:text-[128px]">
             Photographer
           </p>
-          <p className="text-[#FF8686] font-medium text-4xl md:text-5xl">
+          <p className="text-[#FF8686] font-medium text-4xl md:text-5xl xl:text-8xl 2xl:text-[128px]">
             Developer
           </p>
-          <p className="text-[#FF851A] font-medium text-4xl md:text-5xl">
+          <p className="text-[#FF851A] font-medium text-4xl md:text-5xl xl:text-8xl 2xl:text-[128px]">
             Self-Hosting admirer
           </p>
         </div>

app/Section/Photos.tsx

@@ -11,13 +11,13 @@ const links = [
     icon: "/icons/ic_baseline-telegram.svg",
     text: "Telegram",
     desc: "@photowah",
-    url: "https://x.com/radiquum",
+    url: "https://t.me/photowah",
   },
   {
     icon: "/icons/simple-icons_immich.svg",
     text: "Gallery",
     desc: "wah.su/photos",
-    url: "https://bsky.app/profile/@radiquum.wah.su",
+    url: "https://wah.su/photos",
   },
 ];
 

app/Section/Projects.tsx

@@ -51,7 +51,7 @@ export const Projects = () => {
   return (
     <Section>
       <h2 className="text-4xl md:text-5xl">Projects</h2>
-      <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+      <div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
         {links.map((item) => (
           <Link href={item.url} key={`socials.link.${item.text}`}>
             <IconWithText icon={item.icon} text={item.text} desc={item.desc} />

app/Section/Socials.tsx

@@ -51,7 +51,7 @@ export const Socials = () => {
   return (
     <Section>
       <h2 className="text-4xl md:text-5xl">Socials</h2>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-x-12 gap-y-2">
+      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-12 gap-y-2">
         {links.map((item) => (
           <Link href={item.url} key={`socials.link.${item.text}`}>
             <IconWithText icon={item.icon} text={item.text} desc={item.desc} />

app/components/Photos.Carousel.tsx

@@ -97,7 +97,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
                   <img
                     className="embla__slide__img embla__parallax__img"
                     src={index}
-                    alt="Your alt text"
+                    alt=""
                   />
                 </div>
               </div>

app/components/Section.tsx

@@ -2,7 +2,7 @@ export const Section = ({
   children,
 }: Readonly<{ children: React.ReactNode }>) => {
   return (
-    <div className="max-w-[400px] md:max-w-[542px] w-full mx-auto flex flex-col gap-2">
+    <div className="max-w-[400px] md:max-w-[542px] xl:max-w-[1012px] w-full mx-auto flex flex-col gap-2">
       {children}
     </div>
   );

app/page.tsx

@@ -14,7 +14,7 @@ export default function Home() {
         <Photos />
         <Projects />
       </div>
-      <div className="flex flex-col gap-8 md:gap-16 overflow-hidden bg-[#131314] rounded-t-4xl md:rounded-t-[128px] pt-4 md:pt-8 pb-8 md:pb-16">
+      <div className="flex flex-col gap-8 md:gap-16 overflow-hidden bg-[#131314] rounded-t-4xl md:rounded-t-[128px] pt-4 md:pt-8 pb-8 md:pb-16 xl:rounded-t-4xl 2xl:rounded-t-[128px]">
         <Characters />
         <Contacts />
       </div>