Build: Update with staged changes

app/profile/about/page.tsx

@@ -0,0 +1,74 @@
+import { FC } from 'react'
+
+const AboutPage: FC = () => {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+      <div className="bg-black rounded-lg shadow-md border border-zinc-800 p-6">
+        <h2 className="text-2xl font-bold text-white mb-8">About</h2>
+
+        {/* Work and Education */}
+        <section className="mb-8">
+          <h3 className="text-xl font-semibold text-white mb-4">Work and Education</h3>
+          <div className="space-y-4">
+            <div className="flex items-start gap-4">
+              <div className="w-10 h-10 bg-zinc-900 rounded-lg flex-shrink-0" />
+              <div>
+                <p className="text-white font-medium">Works at Tech Company</p>
+                <p className="text-gray-400">2020 - Present</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-4">
+              <div className="w-10 h-10 bg-zinc-900 rounded-lg flex-shrink-0" />
+              <div>
+                <p className="text-white font-medium">Studied at University</p>
+                <p className="text-gray-400">2016 - 2020</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Places Lived */}
+        <section className="mb-8">
+          <h3 className="text-xl font-semibold text-white mb-4">Places Lived</h3>
+          <div className="flex items-start gap-4">
+            <div className="w-10 h-10 bg-zinc-900 rounded-lg flex-shrink-0" />
+            <div>
+              <p className="text-white font-medium">Lives in City, Country</p>
+              <p className="text-gray-400">Current City</p>
+            </div>
+          </div>
+        </section>
+
+        {/* Contact Info */}
+        <section className="mb-8">
+          <h3 className="text-xl font-semibold text-white mb-4">Contact Info</h3>
+          <div className="space-y-3">
+            <p className="text-gray-300">📧 [email protected]</p>
+            <p className="text-gray-300">🌐 website.com</p>
+          </div>
+        </section>
+
+        {/* Basic Info */}
+        <section>
+          <h3 className="text-xl font-semibold text-white mb-4">Basic Info</h3>
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <span className="text-gray-400">Gender:</span>
+              <span className="text-white">Male</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-gray-400">Birthday:</span>
+              <span className="text-white">January 1, 1990</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-gray-400">Languages:</span>
+              <span className="text-white">English, Spanish</span>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage 

app/profile/friends/page.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react'
+import Image from 'next/image'
+
+const FriendsPage: FC = () => {
+  const friends = Array(12).fill({
+    name: 'Friend Name',
+    mutualFriends: '5 mutual friends',
+    avatar: '/default-avatar.jpg'
+  })
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+      <div className="bg-black rounded-lg shadow-md border border-zinc-800 p-6">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-2xl font-bold text-white">Friends</h2>
+          <input
+            type="text"
+            placeholder="Search Friends"
+            className="bg-zinc-900 text-white px-4 py-2 rounded-lg border border-zinc-700 focus:outline-none focus:ring-2 focus:ring-white"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {friends.map((friend, index) => (
+            <div key={index} className="flex items-center gap-4 p-4 bg-zinc-900 rounded-lg hover:bg-zinc-800 transition-colors">
+              <div className="relative w-16 h-16 rounded-lg overflow-hidden">
+                <Image
+                  src={friend.avatar}
+                  alt={friend.name}
+                  fill
+                  className="object-cover"
+                />
+              </div>
+              <div>
+                <h3 className="text-white font-medium">{friend.name}</h3>
+                <p className="text-gray-400 text-sm">{friend.mutualFriends}</p>
+                <button className="mt-2 text-sm text-gray-300 hover:text-white">
+                  View Profile
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FriendsPage