gdf

app/components/BackgroundAurra.tsx

@@ -88,7 +88,7 @@ export function AuroraBackgroundDemo() {
                   <p className=" flex flex-row justify-start text-third items-center text-xl">
                     &#8226;
                   </p>
-                  <p className="text-four text-xs flex flex-row font-semibold justify-start items-center font-normal text-sm">
+                  <p className="text-four text-xs flex flex-row justify-start items-center font-normal text-sm">
                     Available for freelance work
                   </p>
                 </motion.div>

app/components/DeviceAddress.tsx

@@ -50,6 +50,7 @@ const DeviceAddress: React.FC = () => {
             {/* <p className="text-lg"><strong>IP:</strong> {address.ip}</p> */}
             <IconLocationFilled className="h-4 sm:h-10 " />
             <p className=""> {address.city},</p>
+            {/* <p className=""> {address.region},</p> */}
             <p className=""> {address.country}</p>
           </motion.div>
         ) : (

app/components/MultiStepLoader.tsx

@@ -33,7 +33,7 @@ const loadingStates = [
 export function MultiStepLoader() {
   const [loading, setLoading] = useState(false);
   return (
-    <div className="w-full h-40 text-white flex items-center justify-center">
+    <div className="w-full h-40 text-secondary flex items-center justify-center">
       {/* Core Loader Modal */}
       <Loader loadingStates={loadingStates} loading={loading} duration={2000} />
 

app/components/WeatherApp.tsx

@@ -1,9 +1,11 @@
 // components/Weather.tsx
 "use client";
+import { IconCloudFilled, IconTemperature, IconWind } from "@tabler/icons-react";
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import { motion } from "framer-motion";
 
+
 const Weather: React.FC = () => {
   const [weather, setWeather] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
@@ -56,33 +58,51 @@ const Weather: React.FC = () => {
   return (
     <div>
       {error ? (
-        <motion.p>{error}</motion.p>
+        <motion.p
+          className="text-five"
+          initial={{ opacity: 0, x: 10 }}
+          animate={{ opacity: 1, x: 0 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          transition={{ delay: 6, duration: 2 }}
+        >{error}</motion.p>
       ) : weather ? (
-        <div className="sm:text-sm">
-          <motion.div>
+        <div className="sm:text-sm ">
+          <motion.div
+            initial={{ opacity: 0, x: 10 }}
+            animate={{ opacity: .7, x: 0 }}
+            transition={{ delay: 4,
+              ease: "easeInOut",
+
+              }}
+
+
+            className=" flex flex-col opacity-75 sm:flex-row md:gap-2  md:p-2   rounded-md items-end">
             <motion.p
               initial={{ opacity: 0, x: 10 }}
               animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: 4 }}
+              transition={{ delay: 4,  ease: "easeInOut", }}
+              className="flex w-fit gap-2 md:bg-seven md:p-1 rounded-full md:px-2 items-center justify-center"
             >
-              {weather.current_weather.temperature}°C
+              <IconTemperature />{weather.current_weather.temperature}°C
             </motion.p>
             <motion.p
               initial={{ opacity: 0, x: 10 }}
               animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: 6 }}
+              transition={{ delay: 6 ,  ease: "easeInOut",}}
+              className=" flex w-fit gap-2 md:bg-seven md:p-1 rounded-full md:px-2 items-center justify-center"
             >
-              Cloud {weather.hourly.cloudcover[0]}%
+              <IconCloudFilled /> {weather.hourly.cloudcover[0]}%
             </motion.p>
             {/* <p>Diffuse Radiation: {weather.hourly.diffuse_radiation[0]} W/m²</p> */}
             {/* <p>Rain: {weather.hourly.rain[0]} mm</p>{" "} */}
             {/* Display hourly rain data */}
             <motion.p
               initial={{ opacity: 0, x: 30 }}
               animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: 8 }}
+              transition={{ delay: 8 ,  ease: "easeInOut",}}
+              className=" flex w-fit gap-2 md:bg-seven md:p-1 rounded-full md:px-2 items-center justify-center"
             >
-              Wind {weather.hourly.wind_speed_10m[0]} km/h
+              <IconWind /> {weather.hourly.wind_speed_10m[0]} km/h
             </motion.p>{" "}
             {/* Display hourly wind speed */}
           </motion.div>

app/components/footer.tsx

@@ -123,7 +123,7 @@ export default function Footer() {
                   </svg>
                 </span>
                 <span className="px-4 text-four  text-sm font-semibold sm:font-normal ">
-                  Dwarka sec 7 New Delhi Delhi India 110075
+                Sec 7 Dwarka New Delhi, Delhi, India 110075
                 </span>
               </li>
               <li className="flex mb-4 justify-start items-center">

app/components/heroSection.tsx

@@ -388,7 +388,7 @@ export function HeroSection() {
                     transition={{ delay: 1 }}
                     className="m-2 flex justify-between items-end text-right p-3 flex-col  aspect-video rounded-lg text-four bg-six border-seven border"
                   >
-                    <div className="md:pb-4 text-five">
+                    <div className="md:pb-4  text-five">
                       <h4 className="px-2 text-2xl md:text-xl font-bold text-four">
                         How to Grow Online
                       </h4>

app/components/homeSectionHeader.tsx

@@ -31,7 +31,7 @@ export default function HomeSectionHeader() {
               </Link>
             </div>
             <div className="">
-              <div className="text-secondary pt-1  font-bold">
+              <div className="text-secondary pt-1 md:flex justify-center items-center gap-4 font-bold">
                 <DeviceAddress />
                 <Weather />
               </div>

app/components/ui/multi-step-loader.tsx

@@ -138,7 +138,7 @@ export const MultiStepLoader = ({
             <LoaderCore value={currentState} loadingStates={loadingStates} />
           </div>
 
-          <div className="bg-gradient-to-t inset-x-0 z-20 bottom-0 bg-white dark:bg-black h-full absolute [mask-image:radial-gradient(900px_at_center,transparent_30%,white)]" />
+          <div className="bg-gradient-to-t inset-x-0 z-20 bottom-0  dark:bg-black h-full absolute [mask-image:radial-gradient(900px_at_center,transparent_30%,white)]" />
         </motion.div>
       )}
     </AnimatePresence>

app/contact/page.tsx

@@ -198,19 +198,29 @@ const ContactPage: React.FC = () => {
           <p className="py-2 italic text-four">
             Please feel free to contact me with any questions or concerns.
           </p>
-          <div className="md:flex flex-col flex gap-4 my-1 text-four bg-seven rounded-md border-five p-4 items-start justify-evenly ">
-            <p className="border-five md:text-2xl">Delhi, Dwarka</p>
+
+            <div className="flex flex-col gap-8">
+            <div >
+              <h5>Lives at:</h5>
+              <ul className=" md:text-xl md:flex gap-2">
+                <li>New Delhi, Dwarka</li>
+
+              </ul>
+            </div>
             {/* <p>Hin &#9679; Eng &#9679; Sans</p> */}
             <div>
-              <p>Hindi</p>
-              <p>English</p>
-              <p>sankrit</p>
+              <h5>Languages:</h5>
+              <ul className=" md:text-xl md:flex gap-2">
+                <li>Hindi</li>
+                <li>Sanskrit</li>
+                <li>English</li>
+              </ul>
             </div>
-            <div className="md:text-2xl">
+            <div className="md:text-xl">
               <AdminWeather />
             </div>
+            </div>
           </div>
-        </div>
       </section>
     </main>
   );