team section and ui improvements

package.json

@@ -39,6 +39,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.0.1",
     "react-phone-number-input": "^3.3.12",
     "react-select": "^5.8.0",
     "react-spring": "^9.7.3",

src/app/page.tsx

@@ -15,6 +15,7 @@ import WaitlistModal from '@/components/WaitlistModal';
 import CurvyZigzagLine from '@/components/CurvyZigzagLine';
 import FeaturesSection from '@/components/FeaturesSection';
 import Head from 'next/head';
+import Team from '@/components/Team';
 
 export default function Home() {
 
@@ -49,7 +50,7 @@ export default function Home() {
                 <div className="w-[30px] h-[70px] -translate-y-[10px] translate-x-1">
 
                   <Image
-                    src="/portfolioAILogo.png"
+                    src="/logo.png"
                     width={10000}
                     height={10000}
                     alt="Picture of social logins"
@@ -248,6 +249,8 @@ export default function Home() {
 
         <FeaturesSection />
 
+        <Team />
+
         <div className='flex justify-center'>
           <button onClick={handleOpenModal} className='bg-gray-900 text-gray-100 px-4 py-2 rounded-lg shadow-lg absolute'>
             <div>Join the waitlist</div>

src/components/Navbar.tsx

@@ -21,7 +21,7 @@ const Navbar = () => {
             <div className="w-[30px] h-full">
               <a href="/">
                 <Image
-                  src="/portfolioAILogo.png"
+                  src="/logo.png"
                   width={10000}
                   height={10000}
                   alt="Picture of social logins"

src/components/Team.tsx

@@ -0,0 +1,110 @@
+
+import { squareBackground } from '@/constants/colors';
+import { Linkedin, Mail, Twitter } from 'lucide-react';
+import Image from 'next/image';
+import React from 'react';
+import advisorPic from '../../public/assets/srikantWithoutBg.png'; // Updated to import local image
+import founderPic from '../../public/assets/arpit2.png'; // Updated to import local image
+import cofounderPic from '../../public/assets/mehak.png'; // Updated to import local image
+import { FaSquareXTwitter } from "react-icons/fa6";
+
+
+type Props = {};
+
+const Team = (props: Props) => {
+    // const founderPic =
+    //     'https://talking-with-pdf.s3.ap-south-1.amazonaws.com/assets/arpit.png';
+    // const advisorPic = '/assets/srikantWithoutBg.png'
+
+    const founders = [
+        {
+            id: 1,
+            name: 'Arpit Dhamija',
+            imageUrl: founderPic,
+            description: 'Founder & CEO',
+            achievementL1: '- ex Amazon, Adobe, & top startups',
+            achievementL2: '- Multiple research papers published in ML/AI',
+            linkedin: 'https://www.linkedin.com/in/arpitdhamija/',
+            twitter: 'https://twitter.com/arpit_dhamija',
+            email: '[email protected]',
+        },
+        {
+            id: 2,
+            name: 'Mehak Dhamija',
+            imageUrl: cofounderPic,
+            description: 'Co-Founder & Chief of Strategy',
+            achievementL1: '- Microsoft Research, Bain & Co. 20U20',
+            achievementL2: '- Developer, strategic consultant',
+            linkedin: 'https://www.linkedin.com/in/mehak-dhamija-95407522b/',
+            email: '[email protected]',
+        },
+        {
+            id: 3,
+            name: 'Srikant Aggarwal',
+            imageUrl: advisorPic,
+            description: 'Advisor',
+            achievementL1: '- ex Uber, Meta, Amazon & top startups',
+            achievementL2: '- MS @ Stony Brook',
+            linkedin: 'https://www.linkedin.com/in/srikantaggarwal/',
+            twitter: 'https://twitter.com/srikant_1986',
+
+        },
+
+    ];
+
+    const handleEmailClick = (email: string) => {
+        window.location.href = `mailto:${email}`;
+    };
+
+
+    return (
+        <div className={`${squareBackground} h-[100vh]`}>
+            <section className={`mx-auto max-w-screen-2xl px-4 sm:px-6 sm:py-12 lg:px-8 lg:py-1`}>
+                <div className="container mx-auto px-4">
+                    <h2 className="text-4xl font-bold text-center mb-8">Team</h2>
+                    <div className="flex flex-wrap justify-center -mx-4">
+                        {founders.map((founder) => (
+                            <div key={founder.id} className="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 flex justify-center">
+                                <div className="bg-white rounded-lg shadow-2xl overflow-hidden min-w-[25vw]">
+                                    <div className={`${squareBackground}`}>
+                                        <Image
+                                            src={founder.imageUrl}
+                                            width={150}
+                                            height={10}
+                                            alt="founder pic"
+                                            layout="responsive"
+                                            objectFit="contain"
+                                        />
+                                    </div>
+                                    <div className="p-4">
+                                        <div className='flex justify-between'>
+                                            <h3 className="text-xl font-semibold mb-2">{founder.name}</h3>
+                                            <div className='flex justify-around space-x-1'>
+                                                <a href={founder.linkedin} target="_blank" rel="noopener noreferrer">
+                                                    <Linkedin size={24} strokeWidth={0} className='fill-white bg-blue-500 p-[2px] rounded-sm' />
+                                                </a>
+                                                {founder.twitter &&
+                                                    <a href={founder.twitter} target="_blank" rel="noopener noreferrer">
+                                                        <FaSquareXTwitter size={24} />
+                                                    </a>}
+                                                {founder.email &&
+                                                    <a href={`mailto:${founder.email}`} onClick={() => handleEmailClick(founder.email)}>
+                                                        <Mail size={24} color="#0b2900" strokeWidth={2.25} className='rounded-sm bg-gray-100 shadow-md' />
+                                                    </a>}
+                                            </div>
+                                        </div>
+                                        <p className="text-gray-600 text-base bg-gray-100 w-fit p-1 shadow-md rounded-sm mb-2">{founder.description}</p>
+                                        <p className="text-gray-600">{founder.achievementL1}</p>
+                                        <p className="text-gray-600">{founder.achievementL2}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+};
+
+export default Team;

src/constants/colors.ts

@@ -1 +1,2 @@
-export const squareBackground = "bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_5px),linear-gradient(to_bottom,#8080800a_1px,transparent_5px)] bg-[size:14px_24px]";
+export const squareBackground = "bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_5px),linear-gradient(to_bottom,#8080800a_1px,transparent_5px)] bg-[size:14px_24px]";
+// export const squareBackgroundDark = "bg-[#] bg-[linear-gradient(to_right,#FFFFFF_1px,transparent_5px),linear-gradient(to_bottom,#FFFFFF_1px,transparent_5px)] bg-[size:14px_24px]";

src/middleware.ts

@@ -4,7 +4,7 @@ import { authMiddleware } from "@clerk/nextjs";
 // Please edit this to allow other routes to be public as needed.
 // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your middleware
 export default authMiddleware({
-    publicRoutes: ["/", "api/webhook", "/learn", "/news", "/talkwithportfolio", "/buyasset", "/manageportfolio"],
+    publicRoutes: ["/", "api/webhook", "/learn", "/news", "/talkwithportfolio", "/buyasset", "/manageportfolio", '/contact'],
 });
 
 export const config = {