gfsd

neerajrekwar · Jul 9, 2024 · d413fa8 · d413fa8
1 parent 67b9692
commit d413fa8
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 80 deletions.
diff --git a/app/components/DeviceAddress.tsx b/app/components/DeviceAddress.tsx
@@ -1,6 +1,6 @@
 // components/DeviceAddress.tsx
-'use client';
-import { useEffect, useState } from 'react';
+"use client";
+import { useEffect, useState } from "react";
 
 type DeviceAddress = {
   ip: string;
@@ -16,9 +16,9 @@ const DeviceAddress: React.FC = () => {
   useEffect(() => {
     const fetchDeviceAddress = async () => {
       try {
-        const response = await fetch('https://ipapi.co/json/');
+        const response = await fetch("https://ipapi.co/json/");
         if (!response.ok) {
-          throw new Error('Failed to fetch device address');
+          throw new Error("Failed to fetch device address");
         }
         const data: DeviceAddress = await response.json();
         setAddress(data);
@@ -38,13 +38,11 @@ const DeviceAddress: React.FC = () => {
             <p>Error: {error}</p>
           </div>
         ) : address ? (
-          <div>
+          <div className="flex gap-1 text-primaryText font-semibold">
             {/* <h2 className="text-2xl font-bold mb-4 text-center">Device Address</h2> */}
             {/* <p className="text-lg"><strong>IP:</strong> {address.ip}</p> */}
-            <p className=""> {address.city}</p>
-            <p className=""> {address.region}</p>
+            <p className=""> {address.city},</p>
             <p className=""> {address.country}</p>
-
           </div>
         ) : (
           <div className="text-center">

diff --git a/app/components/StickyRelativeDemo.tsx b/app/components/StickyRelativeDemo.tsx
@@ -4,34 +4,35 @@ import Image from "next/image";
 import Link from "next/link";
 import { Source_Code_Pro } from "next/font/google";
 
-
 const source_Code_Pro = Source_Code_Pro({
-  weight: '400',
-  subsets: ['latin'],
+  weight: "400",
+  subsets: ["latin"],
 });
 
 const StickyRelativeDemo: NextPage = () => {
   return (
     <div className="m-auto justify-between p-2 max-h-fit max-w-6xl">
-      <div className="justify-start text-semibold flex items-center gap-2 sm:gap-1 py-10 text-2xl text-primaryText visible sm:text-4xl">
-        <div className="text-secondaryText text-4xl sm:text-6xl sm:mx-2">&#8226;</div>
+      <div className="justify-start text-semibold flex items-center gap-2 sm:gap-1 py-10 text-2xl text-secondaryText font-semibold visible sm:text-4xl">
+        <div className="text-thirdText text-4xl sm:text-6xl sm:mx-2">
+          &#8226;
+        </div>
         Recent projects
       </div>
 
       <div className="relative m-auto min-h-screen max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
         <div className="relative visible  top-0 flex min-h-full basis-1/2 flex-col justify-between  border-rose-500 sm:gap-10">
           <div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center  border-green-500">
             <div className="flex flex-wrap border-yellow-400">
-              <div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-sBorder text-primaryText  px-3 py-1 text-sm">
+              <div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-fourText  px-3 py-1 text-sm">
                 2024
               </div>
             </div>
             <div className="border-yellow-400 sm:pr-10">
               <div className="max-w-2xl">
-                <h2 className="text-2xl py-2 pb-3 font-semibold text-primaryText">
+                <h2 className="text-2xl py-2 pb-3 font-semibold text-secondaryText">
                   Craft &amp; Code: Building the Future, One Line at a Time
                 </h2>
-                <div >
+                <div>
                   <p className="text-secondaryText text-base">
                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
                     Repudiandae quo natus accusantium eius molestiae expedita
@@ -42,23 +43,34 @@ const StickyRelativeDemo: NextPage = () => {
                 </div>
               </div>
               <div className="text-sm  pt-12 ">
-                <ul className=" flex justify-between font-semibold text-secondaryText py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Role</li>
                   <li>Digital Marketing</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
-                  <li className="text-secondaryText font-normal">Deliverables</li>
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
+                  <li className="text-secondaryText font-normal">
+                    Deliverables
+                  </li>
                   <li>Survey checks</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Company</li>
                   <li>VMR</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Visit Site</li>
                   <li className="px-2">
                     <Link href="https://veecrew.com" className="">
-                      <svg xmlns="http://www.w3.org/2000/svg" className="fill-secondaryText hover:fill-third" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" /></svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="fill-secondaryText hover:fill-third"
+                        height="24px"
+                        viewBox="0 -960 960 960"
+                        width="24px"
+                        fill="#5f6368"
+                      >
+                        <path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" />
+                      </svg>
                     </Link>
                   </li>
                 </ul>
@@ -67,7 +79,7 @@ const StickyRelativeDemo: NextPage = () => {
           </div>
         </div>
         <div className="relative basis-1/2 pt-10 overflow-hidden  border-rose-500">
-          <div className=" mb-4 max-w-fit rounded-full border-2 bg-secondary border-pBorder text-primaryText  px-3 py-1 text-sm">
+          <div className="mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-fourText  px-3 py-1 text-sm">
             Showcase
           </div>
           <div className="grid gap-4 p-2 pt-4 sm:gap-10">
@@ -99,17 +111,17 @@ const StickyRelativeDemo: NextPage = () => {
         <div className="relative visible  top-0 flex min-h-full basis-1/2 flex-col justify-between  border-rose-500 sm:gap-10">
           <div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center  border-green-500">
             <div className="flex flex-wrap border-yellow-400">
-              <div className=" mb-4 max-w-fit rounded-full border-2 bg-secondary border-pBorder text-primaryText  px-3 py-1 text-sm">
+              <div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-fourText  px-3 py-1 text-sm">
                 2024
               </div>
             </div>
             <div className="border-yellow-400 sm:pr-10">
               <div className="max-w-2xl">
-                <h2 className="text-2xl py-2 pb-3 font-semibold text-primaryText">
+                <h2 className="text-2xl py-2 pb-3 font-semibold text-secondaryText">
                   Craft &amp; Code: Building the Future, One Line at a Time
                 </h2>
-                <div >
-                  <p className="text-secondaryText text-base">
+                <div>
+                  <p className="text-fourText text-base">
                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
                     Repudiandae quo natus accusantium eius molestiae expedita
                     possimus accusamus, aspernatur, quia quae asperiores
@@ -119,23 +131,34 @@ const StickyRelativeDemo: NextPage = () => {
                 </div>
               </div>
               <div className="text-sm  pt-12 ">
-                <ul className=" flex justify-between font-semibold text-secondaryText py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Role</li>
                   <li>Digital Marketing</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
-                  <li className="text-secondaryText font-normal">Deliverables</li>
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
+                  <li className="text-secondaryText font-normal">
+                    Deliverables
+                  </li>
                   <li>Survey checks</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Company</li>
                   <li>VMR</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Visit Site</li>
                   <li className="px-2">
                     <Link href="https://veecrew.com" className="">
-                      <svg xmlns="http://www.w3.org/2000/svg" className="fill-secondaryText hover:fill-third" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" /></svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="fill-secondaryText hover:fill-third"
+                        height="24px"
+                        viewBox="0 -960 960 960"
+                        width="24px"
+                        fill="#5f6368"
+                      >
+                        <path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" />
+                      </svg>
                     </Link>
                   </li>
                 </ul>
@@ -144,7 +167,7 @@ const StickyRelativeDemo: NextPage = () => {
           </div>
         </div>
         <div className="relative basis-1/2 pt-10 overflow-hidden  border-rose-500">
-          <div className=" mb-4 max-w-fit rounded-full border-2 bg-secondary border-pBorder text-primaryText  px-3 py-1 text-sm">
+          <div className="mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-fourText  px-3 py-1 text-sm">
             Showcase
           </div>
           <div className="grid gap-4 p-2 pt-4 sm:gap-10">
@@ -174,6 +197,7 @@ const StickyRelativeDemo: NextPage = () => {
       </div>
 
 
+
     </div>
   );
 };

diff --git a/app/components/backgroundBeams.tsx b/app/components/backgroundBeams.tsx
@@ -3,13 +3,33 @@ import React from "react";
 import { motion } from "framer-motion";
 import { BackgroundBeams } from "./ui/background-beams";
 import TextFlipper from "./TextFlipper";
-import AdminWeather from "./AdminWeather";
 import Link from "next/link";
+import Image from "next/image";
 
 export function BackgroundBeamsDemo() {
   return (
     <div className="min-h-screen w-full bg-primary relative flex flex-col items-start justify-center antialiased">
       <div className="max-w-6xl text-left mx-auto p-4">
+        {/* <motion.div className="gap-2 flex  flex-row justify-start items-center  text-secondaryText text-semibold">
+          <Image
+            src={"/me.jpg"}
+            width={24}
+            height={24}
+            alt="Digital marketing for expert"
+            className="aspact-square h-10 w-10 rounded-full"
+          />
+          <div className="font-semibold text-secondaryText">
+            <p>Neeraj Rekwar</p>
+            <div className="flex gap-1 h-4">
+              <p className="text-thirdText flex flex-row justify-start items-center text-3xl">
+                &#8226;
+              </p>
+              <p className="text-secondaryText flex flex-row justify-start items-center font-normal text-sm">
+                Available for freelance work
+              </p>
+            </div>
+          </div>
+        </motion.div> */}
         <motion.h1
           initial={{ opacity: 0, y: 100 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -37,9 +57,7 @@ export function BackgroundBeamsDemo() {
             ease: "backIn",
           }}
           className="flex w-full flex-col items-center justify-center"
-        >
-          <AdminWeather />
-        </motion.div>
+        ></motion.div>
         <p></p>
         <motion.p
           initial={{ opacity: 0, y: 100 }}
@@ -58,29 +76,32 @@ export function BackgroundBeamsDemo() {
           covered.
         </motion.p>
         <motion.div 
-          className="text-secondaryText flex gap-2 pt-8 justify-center items-center max-w-fit"
+          initial={{ opacity: 0, y: 100 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{
+            delay: 0.3,
+            duration: 0.6,
+            ease: "easeInOut",
+          }}
+          className="flex mt-8 gap-2 max-w-fit text-secondaryText">
+          <motion.button
+            initial={{ opacity: 0, y: 100 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{
+              delay: 0.3,
+              duration: 0.8,
+              ease: "easeInOut",
+            }}
+            className="bg-third text-thirdText border-2 border-fBorderp-1 px-3 md:p-2 md:px-4 rounded-full text-secondaryText"
           >
-          <Link href={"blog"}>
-            <motion.button
-              initial={{ opacity: 0, y: 100 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{
-                delay: 0.3,
-                duration: 0.8,
-                ease: "easeInOut",
-              }}
-              className="bg-third border-2 border-tBorder rounded-full p-2"
-            >
-              Get started
-            </motion.button>
-          </Link>
+            Get started
+          </motion.button>
           <Link
             href={
               "https://058d7161-3d82-455c-8a08-75929c749baa-00-33ncm1e7y6818.pike.replit.dev/"
             }
             className=""
           >
-
             <motion.button
               initial={{ opacity: 0, y: 100 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -89,9 +110,9 @@ export function BackgroundBeamsDemo() {
                 duration: 0.8,
                 ease: "easeInOut",
               }}
-              className="bg-primary border-2 border-tBorder rounded-full p-2 px-3"
-            >
-              Learn more
+              className="bg-secondary border-2 border-tBorder text-base p-1 px-3 md:p-2 md:px-4 rounded-full text-fourText"
+              > {/*  ▲ Next.js 14.2.3 */}
+              Let's talk
             </motion.button>
           </Link>
         </motion.div>

diff --git a/app/components/reviewSection.tsx b/app/components/reviewSection.tsx
@@ -1,13 +1,21 @@
 import { InfiniteMovingCardsDemo } from "./infiniteCard";
+import { motion } from "framer-motion";
 
 export function ReviewSection() {
     return (
         <>
-            <div className="justify-start m-auto max-w-6xl text-semibold flex items-center gap-2 sm:gap-1 py-10 text-2xl text-primaryText visible sm:text-4xl">
-                <div className="text-secondaryText text-4xl sm:text-6xl sm:mx-2">&#8226;</div>
+            <div className="justify-start text-semibold flex items-center gap-2 sm:gap-1 py-10 text-2xl text-secondaryText font-semibold visible sm:text-4xl">
+                <div className="text-thirdText text-4xl sm:text-6xl sm:mx-2">
+                  &#8226;
+                </div>
                 Recent projects
+              </div>
+            <div 
+              className="border-2 border-sBorder max-w-fit"
+              >
+
             </div>
             <InfiniteMovingCardsDemo />
         </>
     );
-};
+}