From c1be7ba0eb651f76baf66ab7403199391994675a Mon Sep 17 00:00:00 2001
From: Neeraj Rekwar <88387699+neerajrekwar@users.noreply.github.com>
Date: Mon, 9 Sep 2024 09:07:24 +0000
Subject: [PATCH] gdf

---
 app/components/BackgroundAurra.tsx      |  2 +-
 app/components/DeviceAddress.tsx        |  1 +
 app/components/MultiStepLoader.tsx      |  2 +-
 app/components/WeatherApp.tsx           | 38 +++++++++++++++++++------
 app/components/footer.tsx               |  2 +-
 app/components/heroSection.tsx          |  2 +-
 app/components/homeSectionHeader.tsx    |  2 +-
 app/components/ui/multi-step-loader.tsx |  2 +-
 app/contact/layout.tsx                  |  7 -----
 app/contact/page.tsx                    | 24 +++++++++++-----
 10 files changed, 53 insertions(+), 29 deletions(-)
 delete mode 100644 app/contact/layout.tsx

diff --git a/app/components/BackgroundAurra.tsx b/app/components/BackgroundAurra.tsx
index 899fdc429..e8681bb9f 100644
--- a/app/components/BackgroundAurra.tsx
+++ b/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>
diff --git a/app/components/DeviceAddress.tsx b/app/components/DeviceAddress.tsx
index 41e40a178..f7f800a2b 100644
--- a/app/components/DeviceAddress.tsx
+++ b/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>
         ) : (
diff --git a/app/components/MultiStepLoader.tsx b/app/components/MultiStepLoader.tsx
index d24ef10f2..81133f5c0 100644
--- a/app/components/MultiStepLoader.tsx
+++ b/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} />
 
diff --git a/app/components/WeatherApp.tsx b/app/components/WeatherApp.tsx
index 1746dd182..de6bba171 100644
--- a/app/components/WeatherApp.tsx
+++ b/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,23 +58,40 @@ 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>{" "} */}
@@ -80,9 +99,10 @@ const Weather: React.FC = () => {
             <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>
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
index fc520725b..54ec0e317 100644
--- a/app/components/footer.tsx
+++ b/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">
diff --git a/app/components/heroSection.tsx b/app/components/heroSection.tsx
index 05e0a9b1e..23467eb69 100644
--- a/app/components/heroSection.tsx
+++ b/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>
diff --git a/app/components/homeSectionHeader.tsx b/app/components/homeSectionHeader.tsx
index 9e5503596..31b660876 100644
--- a/app/components/homeSectionHeader.tsx
+++ b/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>
diff --git a/app/components/ui/multi-step-loader.tsx b/app/components/ui/multi-step-loader.tsx
index cd367fdd3..27951b53a 100644
--- a/app/components/ui/multi-step-loader.tsx
+++ b/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>
diff --git a/app/contact/layout.tsx b/app/contact/layout.tsx
deleted file mode 100644
index 4b5417f27..000000000
--- a/app/contact/layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function ContactLayout({
-  children, // will be a page or nested layout
-}: {
-  children: React.ReactNode;
-}) {
-  return <body className="bg-primary">{children}</body>;
-}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 2668284e7..9df323189 100644
--- a/app/contact/page.tsx
+++ b/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>
   );