fix case study in mobile dev

2025-07-28 19:57:37 +05:30
parent a3cacf7a6a
commit e67fd3163c
14 changed files with 464 additions and 237 deletions
--- a/components/GlobalOffices.tsx
+++ b/components/GlobalOffices.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { Phone, Mail } from "lucide-react";
+import { motion } from "framer-motion";
+
+const offices = [
+  {
+    region: "Asia Pacific",
+    address: `614, 6th Floor, Palms Spring center,\nLink Road, Malad (West), Mumbai - 400064, India`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapone.webp",
+  },
+  {
+    region: "America",
+    address: `215 Jefferson Street, Fort Collins,\nCO 80524, USA`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/maptwo.webp",
+  },
+  {
+    region: "Europe",
+    address: `2, Frederick Street, Kings Cross,\nLondon, WC1X 0ND, England, UK.\nCRN-14194669, UK`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapthree.webp",
+  },
+  {
+    region: "Middle East",
+    address: `Perth, WA 6000`,
+    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapfour.webp",
+  },
+];
+
+export default function GlobalOffices() {
+  return (
+      <section className="bg-wdi-grey text-white py-16 lg:px-8 container mx-auto">
+      {/* Section Heading */}
+      <motion.h2
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        viewport={{ once: true }}
+        className="text-3xl lg:text-4xl font-semibold leading-tight mb-16 text-center"
+      >
+        <span className="text-white">We serve customers </span>
+        <span className="text-[#E5195E]">globally</span>
+      </motion.h2>
+
+      {/* Office Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
+        {offices.map((office, index) => (
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: index * 0.1 }}
+            viewport={{ once: true }}
+            className="group relative p-6 rounded-xl overflow-hidden min-h-[250px] flex flex-col justify-between backdrop-blur-sm border border-gray-700/30 hover:border-[#E5195E]/30 transition-all duration-300"
+          >
+            {/* Background Image with Scale on Hover */}
+            <div
+              className="absolute inset-0 bg-cover bg-center opacity-20 transform transition-transform duration-500 group-hover:scale-105"
+              style={{ backgroundImage: `url(${office.image})` }}
+            ></div>
+
+            {/* Foreground Content */}
+            <div className="relative z-10 flex flex-col justify-between h-full">
+              {/* Top Content */}
+              <div>
+                <h3 className="text-2xl font-semibold text-[#E5195E] mb-2">
+                  {office.region}
+                </h3>
+                <p className="text-sm whitespace-pre-line leading-relaxed">
+                  {office.address}
+                </p>
+              </div>
+
+              {/* Bottom Contact Info */}
+              <div className="mt-4 space-y-2 text-sm">
+                <div className="flex items-center gap-2">
+                  <Phone size={16} />
+                  <span>(+91) 7700900039</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Mail size={16} />
+                  <span>ideas@wdipl.com</span>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}