feat: add Instagram handle everywhere and optimize Link/Contact layouts

Author: laveshparyani

README.md

@@ -683,7 +683,7 @@ A professional video player with:
 - **Phone**: +91 9727579905
 - **WhatsApp**: +91 9727579905
 - **Email**: euphoricparth1003@gmail.com
-- **Instagram**: [@_euphoric_live_](https://www.instagram.com/_euphoric_live_)
+- **Instagram**: [@_euphoric_live_](https://www.instagram.com/_euphoric_live_) | [@musicbypaarth](https://www.instagram.com/musicbypaarth/)
 
 ## 🐛 Troubleshooting
 

frontend/src/components/Hero.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
-import { FaPhone, FaWhatsapp, FaEnvelope } from "react-icons/fa";
+import { FaPhone, FaWhatsapp, FaEnvelope, FaInstagram } from "react-icons/fa";
 import heroImg from "../assets/hero_img.jpg";
 // import heroImg2 from "../assets/hero_img_2.jpg";
 import heroImg2 from "../assets/hero_img_2.png";
@@ -36,6 +36,11 @@ const Hero = () => {
       label: "Mail",
       href: "mailto:euphoricparth1003@gmail.com",
     },
+    {
+      icon: FaInstagram,
+      label: "Instagram",
+      href: "https://www.instagram.com/musicbypaarth/",
+    },
   ];
 
   const contactInfo = [
@@ -57,6 +62,12 @@ const Hero = () => {
       href: "mailto:euphoricparth1003@gmail.com",
       value: "euphoricparth1003@gmail.com",
     },
+    {
+      icon: FaInstagram,
+      label: "Instagram",
+      href: "https://www.instagram.com/musicbypaarth/",
+      value: "@musicbypaarth",
+    },
   ];
 
   return (
@@ -83,9 +94,8 @@ const Hero = () => {
             },
           }}
           style={{
-            transform: `translate(${mousePosition.x * 0.02}px, ${
-              mousePosition.y * 0.02
-            }px)`,
+            transform: `translate(${mousePosition.x * 0.02}px, ${mousePosition.y * 0.02
+              }px)`,
             filter: "brightness(1.3) contrast(1.1)",
           }}
         />
@@ -109,9 +119,8 @@ const Hero = () => {
             },
           }}
           style={{
-            transform: `translate(${mousePosition.x * 0.02}px, ${
-              mousePosition.y * 0.02
-            }px)`,
+            transform: `translate(${mousePosition.x * 0.02}px, ${mousePosition.y * 0.02
+              }px)`,
             filter: "brightness(1.3) contrast(1.1)",
           }}
         />

frontend/src/components/QuickActionBox.jsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion'
-import { FaDownload, FaWhatsapp } from 'react-icons/fa'
+import { FaDownload, FaWhatsapp, FaInstagram } from 'react-icons/fa'
 
 /**
  * Quick Action Box Component
@@ -59,6 +59,17 @@ END:VCARD`
           <FaWhatsapp />
           WhatsApp Quick Message
         </motion.a>
+        <motion.a
+          href="https://www.instagram.com/musicbypaarth/"
+          target="_blank"
+          rel="noopener noreferrer"
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          className="flex items-center justify-center gap-3 px-6 py-3 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white font-semibold hover:opacity-90 transition-opacity"
+        >
+          <FaInstagram />
+          Instagram Message
+        </motion.a>
       </div>
     </motion.div>
   )

frontend/src/pages/Contact.jsx

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion'
 import { useEffect } from 'react'
-import { FaPhone, FaWhatsapp, FaEnvelope, FaMapMarkerAlt, FaDownload } from 'react-icons/fa'
+import { FaPhone, FaWhatsapp, FaEnvelope, FaMapMarkerAlt, FaDownload, FaInstagram } from 'react-icons/fa'
 
 const Contact = () => {
   useEffect(() => {
@@ -26,6 +26,12 @@ const Contact = () => {
       value: 'euphoricparth1003@gmail.com',
       href: 'mailto:euphoricparth1003@gmail.com',
     },
+    {
+      icon: FaInstagram,
+      label: 'Instagram',
+      value: '@musicbypaarth',
+      href: 'https://www.instagram.com/musicbypaarth/',
+    },
   ]
 
   const generateVCard = () => {
@@ -70,8 +76,8 @@ END:VCARD`
           <p className="text-gray-400 text-lg">Get in touch with us</p>
         </motion.div>
 
-        <div className="max-w-4xl mx-auto">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
             {contactInfo.map((contact, index) => (
               <motion.a
                 key={index}
@@ -86,7 +92,7 @@ END:VCARD`
               >
                 <contact.icon className="text-yellow-400 text-3xl mb-4 mx-auto group-hover:scale-110 transition-transform" />
                 <h3 className="text-white font-semibold mb-2">{contact.label}</h3>
-                <p className="text-gray-400 text-sm">{contact.value}</p>
+                <p className="text-gray-400 text-xs md:text-sm break-words">{contact.value}</p>
               </motion.a>
             ))}
           </div>
@@ -121,6 +127,17 @@ END:VCARD`
                 <FaWhatsapp />
                 WhatsApp Quick Message
               </motion.a>
+              <motion.a
+                href="https://www.instagram.com/musicbypaarth/"
+                target="_blank"
+                rel="noopener noreferrer"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="flex items-center justify-center gap-3 px-6 py-3 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white font-semibold hover:opacity-90 transition-opacity"
+              >
+                <FaInstagram />
+                Instagram Message
+              </motion.a>
             </div>
           </motion.div>
 

frontend/src/pages/Links.jsx

@@ -16,6 +16,13 @@ const Links = () => {
       href: 'https://www.instagram.com/_euphoric_live_',
       color: 'from-purple-500 to-pink-500',
     },
+    {
+      icon: FaInstagram,
+      title: "Paarth's Instagram",
+      subtitle: 'Music and Vibes',
+      href: 'https://www.instagram.com/musicbypaarth/',
+      color: 'from-pink-500 to-rose-500',
+    },
     {
       icon: SiGoogledrive,
       title: 'Video Drafts',