about page added
BIN
public/assets/images/image-3.png
Normal file
|
After Width: | Height: | Size: 120 KiB |
BIN
public/assets/images/teams/CEO.webp
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
public/assets/images/teams/fahim.webp
Normal file
|
After Width: | Height: | Size: 69 KiB |
BIN
public/assets/images/teams/forhadsir.webp
Normal file
|
After Width: | Height: | Size: 79 KiB |
BIN
public/assets/images/teams/pintu.webp
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
public/assets/images/teams/sahin-vai.jpeg
Normal file
|
After Width: | Height: | Size: 72 KiB |
BIN
public/assets/images/teams/shakil.webp
Normal file
|
After Width: | Height: | Size: 110 KiB |
470
src/app/about/page.tsx
Normal file
|
|
@ -0,0 +1,470 @@
|
|||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { ArrowRight, Share2, Instagram, Twitter, Facebook, Linkedin, MapPin, BrainCircuit, Captions, Hash, ChartLine, CalendarCheck } from "lucide-react"
|
||||
import Teams from "@/components/about/Teams"
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-20 overflow-hidden bg-gradient-to-b from-blue-50 to-white">
|
||||
<div className="container px-4 mx-auto max-w-7xl">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
|
||||
About <span className="text-[#6a47ed]">Planpost AI</span>
|
||||
</h1>
|
||||
<p className="max-w-2xl mt-6 text-xl text-gray-600">
|
||||
Revolutionizing social media content creation with the power of artificial intelligence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -bottom-24 left-1/2 transform -translate-x-1/2">
|
||||
<div className="w-64 h-64 bg-blue-100 rounded-full opacity-20"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Our Mission */}
|
||||
<section className="py-20">
|
||||
<div className="container px-4 mx-auto max-w-7xl">
|
||||
<div className="grid grid-cols-1 gap-12 md:grid-cols-2 items-center">
|
||||
<div>
|
||||
<Image
|
||||
src="/assets/images/teams/sahin-vai.jpeg"
|
||||
alt="Our Mission"
|
||||
width={500}
|
||||
height={500}
|
||||
className="rounded-lg shadow-xl"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-gray-900">Our Mission</h2>
|
||||
<div className="w-20 h-1 mt-2 bg-[#6a47ed]"></div>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
At Planpost AI, we're on a mission to simplify content creation for businesses and creators. We believe
|
||||
that everyone should have access to powerful AI tools that can help them create engaging social media
|
||||
content without the need for expensive designers or copywriters.
|
||||
</p>
|
||||
<p className="mt-4 text-lg text-gray-600">
|
||||
Our platform is designed to democratize content creation, making it accessible to businesses of all
|
||||
sizes, from solopreneurs to large enterprises.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What We Offer */}
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="container px-4 mx-auto max-w-7xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-gray-900">What We Offer</h2>
|
||||
<div className="w-20 h-1 mt-2 mx-auto bg-[#6a47ed]"></div>
|
||||
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Planpost AI combines cutting-edge artificial intelligence with intuitive design to help you create and
|
||||
distribute social media content effortlessly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Feature 1 */}
|
||||
<div className="p-6 bg-white rounded-lg shadow-md">
|
||||
<div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
|
||||
|
||||
<BrainCircuit className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-gray-900">AI-Generated Templates</h3>
|
||||
<p className="text-gray-600">
|
||||
Create stunning social media ad templates tailored to your brand with just a few clicks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<div className="p-6 bg-white rounded-lg shadow-md">
|
||||
<div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
|
||||
<Captions className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-gray-900">Engaging Captions</h3>
|
||||
<p className="text-gray-600">
|
||||
Generate compelling captions that resonate with your audience and drive engagement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<div className="p-6 bg-white rounded-lg shadow-md">
|
||||
<div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
|
||||
<Hash className="w-6 h-6 text-blue-600" />
|
||||
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-gray-900">Smart Hashtags</h3>
|
||||
<p className="text-gray-600">
|
||||
Discover trending and relevant hashtags that increase your content's visibility.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 4 */}
|
||||
<div className="p-6 bg-white rounded-lg shadow-md">
|
||||
<div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
|
||||
<Share2 className="w-6 h-6 text-blue-600" />
|
||||
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-gray-900">One-Click Sharing</h3>
|
||||
<p className="text-gray-600">
|
||||
Share your content across multiple social media platforms with a single click.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 5 */}
|
||||
<div className="p-6 bg-white rounded-lg shadow-md">
|
||||
<div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
|
||||
<ChartLine className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-gray-900">Performance Analytics</h3>
|
||||
<p className="text-gray-600">
|
||||
Track your content's performance and gain insights to optimize your strategy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 6 */}
|
||||
<div className="p-6 bg-white rounded-lg shadow-md">
|
||||
<div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
|
||||
<CalendarCheck className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-gray-900">Smart Scheduling</h3>
|
||||
<p className="text-gray-600">Schedule your posts for optimal times to maximize engagement and reach.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works */}
|
||||
<section className="py-20">
|
||||
<div className="container px-4 mx-auto max-w-7xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-gray-900">How It Works</h2>
|
||||
<div className="w-20 h-1 mt-2 mx-auto bg-[#6a47ed]"></div>
|
||||
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Creating and sharing content with Planpost AI is simple and intuitive.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{/* Step 1 */}
|
||||
<div className="relative">
|
||||
<div className="flex items-center justify-center w-16 h-16 mb-6 bg-[#6a47ed] rounded-full text-white text-2xl font-bold">
|
||||
1
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-gray-900">Generate Content</h3>
|
||||
<p className="text-gray-600">
|
||||
Describe what you need, and our AI will create templates, captions, and hashtags tailored to your brand.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="relative">
|
||||
<div className="flex items-center justify-center w-16 h-16 mb-6 bg-[#6a47ed] rounded-full text-white text-2xl font-bold">
|
||||
2
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-gray-900">Customize</h3>
|
||||
<p className="text-gray-600">
|
||||
Fine-tune the generated content to match your exact requirements and brand voice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="relative">
|
||||
<div className="flex items-center justify-center w-16 h-16 mb-6 bg-[#6a47ed] rounded-full text-white text-2xl font-bold">
|
||||
3
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-gray-900">Share</h3>
|
||||
<p className="text-gray-600">
|
||||
Share your content across multiple platforms with a single click or schedule it for later.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Teams />
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-[#6a47ed]">
|
||||
<div className="container px-4 mx-auto max-w-7xl">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-bold text-white">Ready to Transform Your Social Media Strategy?</h2>
|
||||
<p className="mt-4 text-xl text-blue-100 max-w-3xl mx-auto">
|
||||
Join thousands of businesses and creators who are saving time and creating better content with Planpost
|
||||
AI.
|
||||
</p>
|
||||
<div className="mt-8">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center px-6 py-3 text-base font-medium text-blue-600 bg-white border border-transparent rounded-md shadow-sm hover:bg-blue-50"
|
||||
>
|
||||
Get Started Free
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/demo"
|
||||
className="inline-flex items-center px-6 py-3 ml-4 text-base font-medium text-white bg-transparent border border-white rounded-md hover:bg-[#6641ef]"
|
||||
>
|
||||
Request Demo
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Social Proof */}
|
||||
<section className="py-20">
|
||||
<div className="container px-4 mx-auto max-w-7xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-gray-900">Trusted by Businesses Worldwide</h2>
|
||||
<div className="w-20 h-1 mt-2 mx-auto bg-[#6a47ed]"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-6">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="flex items-center justify-center">
|
||||
<Image
|
||||
src="/assets/images/logo.webp"
|
||||
alt={`Company ${i + 1}`}
|
||||
width={120}
|
||||
height={60}
|
||||
className="opacity-50 hover:opacity-100 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="container px-4 mx-auto max-w-7xl">
|
||||
<div className="grid grid-cols-1 gap-12 md:grid-cols-2">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-gray-900">Get in Touch</h2>
|
||||
<div className="w-20 h-1 mt-2 bg-[#6a47ed]"></div>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Have questions about Planpost AI? We're here to help. Reach out to our team for support, partnership
|
||||
opportunities, or just to say hello.
|
||||
</p>
|
||||
|
||||
<div className="mt-8">
|
||||
<div className="flex items-center mt-4">
|
||||
<div className="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-5 h-5 text-blue-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-900">Email</p>
|
||||
<p className="text-sm text-gray-600"> <a
|
||||
href="mailto:contact@adspillar.com"
|
||||
className="hover:underline"
|
||||
>
|
||||
shahin@adspillar.com
|
||||
</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mt-4">
|
||||
<div className="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-5 h-5 text-blue-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-900">Phone</p>
|
||||
<p className="text-sm text-gray-600"> <a
|
||||
href="tel:+8801784493232"
|
||||
className="hover:underline"
|
||||
>
|
||||
+880 1784-493232
|
||||
</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mt-4">
|
||||
<div className="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-5 h-5 text-blue-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<p className="text-sm font-medium text-gray-900">Address</p>
|
||||
<p className="text-sm text-gray-600">Ads Pillar - 965 (6th Floor, Apartment D, Begum Rokeya Avenue, Dhaka 1216)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex mt-8 space-x-4">
|
||||
<a
|
||||
href="https://www.facebook.com/PlanPostAI/"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<Facebook size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="https://x.com/planpost_ai"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<Twitter size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/company/planpost-ai"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.instagram.com/planpostai"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<Instagram size={20} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white rounded-lg shadow-md">
|
||||
<h3 className="mb-4 text-xl font-semibold text-gray-900">Send Us a Message</h3>
|
||||
<form>
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="first-name"
|
||||
className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="last-name" className="block text-sm font-medium text-gray-700">
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="last-name"
|
||||
className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-gray-700">
|
||||
Subject
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
rows={4}
|
||||
className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-4 py-2 text-white font-bold bg-pink-500 rounded-md hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/* Map Section */}
|
||||
<div className="mt-16 space-y-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<MapPin className="text-pink-500" size={24} />
|
||||
<h2 className="text-2xl font-semibold">Our Location</h2>
|
||||
</div>
|
||||
<p className="text-lg">
|
||||
Ads Pillar - 965 (6th Floor, Apartment D, Begum Rokeya Avenue, Dhaka
|
||||
1216)
|
||||
</p>
|
||||
|
||||
<div className="w-full h-[400px] rounded-lg overflow-hidden shadow-md">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3650.7368281727336!2d90.37267777531028!3d23.792384087163313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c5548eab48e1%3A0xdadd813caa2f692a!2sAds%20Pillar%20-!5e0!3m2!1sen!2sbd!4v1740984344459!5m2!1sen!2sbd"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Ads Pillar Location"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +71,7 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
className="clip-path"
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
width={650}
|
||||
width={560}
|
||||
height={491}
|
||||
style={
|
||||
imageUrl.endsWith(".gif") ? { clipPath: "inset(0 4px 0 0)" } : {}
|
||||
|
|
@ -84,10 +84,10 @@ const FeatureSection: React.FC<DesignToolProps> = ({
|
|||
const contentContainer = (
|
||||
<div className="details-box-content p-5 md:p-[50px]">
|
||||
<div className="">
|
||||
<span className="text-[#252525] text-xs md:text-2xl font-bold font-['Inter'] leading-normal">
|
||||
<span className="text-[#252525] text-xs md:text-xl font-bold font-['Inter'] leading-normal">
|
||||
{headingText}
|
||||
</span>
|
||||
<span className="text-[#6a47ed] text-2xl md:text-[56px] font-bold font-['Inter'] leading-8 md:leading-[56px] block">
|
||||
<span className="text-[#6a47ed] text-2xl md:text-5xl font-bold font-['Inter'] leading-8 md:leading-4xl block">
|
||||
{coloredHeading}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default function Footer() {
|
|||
];
|
||||
|
||||
const planpostAi = [
|
||||
{ label: "About Us", url: "https://blog.planpostai.com/about/" },
|
||||
{ label: "About Us", url: "/about/" },
|
||||
{ label: "Contact", url: "/contact" },
|
||||
{ label: "FAQ", url: "/#faqSection" },
|
||||
{ label: "Privacy Policy", url: "/privacy-policy" },
|
||||
|
|
|
|||
101
src/components/about/Teams.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
"use client";
|
||||
import Image from "next/image";
|
||||
import * as React from "react";
|
||||
|
||||
|
||||
export default function Teams() {
|
||||
|
||||
return (
|
||||
|
||||
< section className="py-20 bg-gray-50" >
|
||||
<div className="container px-4 mx-auto max-w-7xl">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-gray-900">Meet Our Team</h2>
|
||||
<div className="w-20 h-1 mt-2 mx-auto bg-[#6a47ed]"></div>
|
||||
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
We're a passionate team of AI experts, designers, and social media enthusiasts dedicated to making content
|
||||
creation accessible to everyone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5">
|
||||
{/* Team Member 1 */}
|
||||
<div className="text-center">
|
||||
<div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
|
||||
<Image
|
||||
src="/assets/images/teams/CEO.webp"
|
||||
alt="Team Member"
|
||||
width={160}
|
||||
height={160}
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900">Md. Shaniur Rahman</h3>
|
||||
<p className="text-[#6a47ed]">CEO & Founder</p>
|
||||
</div>
|
||||
|
||||
{/* Team Member 2 */}
|
||||
<div className="text-center">
|
||||
<div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
|
||||
<Image
|
||||
src="/assets/images/teams/forhadsir.webp"
|
||||
alt="Team Member"
|
||||
width={160}
|
||||
height={160}
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900">Forhad Hossen</h3>
|
||||
<p className="text-[#6a47ed]">COO</p>
|
||||
</div>
|
||||
|
||||
{/* Team Member 3 */}
|
||||
<div className="text-center">
|
||||
<div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
|
||||
<Image
|
||||
src="/assets/images/teams/shakil.webp"
|
||||
alt="Team Member"
|
||||
width={160}
|
||||
height={160}
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900">Shahriar Kabir Shakil</h3>
|
||||
<p className="text-[#6a47ed]">Software Engineer</p>
|
||||
</div>
|
||||
|
||||
{/* Team Member 4 */}
|
||||
<div className="text-center">
|
||||
<div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
|
||||
<Image
|
||||
src="/assets/images/teams/fahim.webp"
|
||||
alt="Team Member"
|
||||
width={160}
|
||||
height={160}
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900">Fahim Hossen</h3>
|
||||
<p className="text-[#6a47ed]">Software Engineer</p>
|
||||
</div>
|
||||
{/* Team Member 5 */}
|
||||
<div className="text-center">
|
||||
<div className="relative mx-auto w-40 h-40 mb-4 overflow-hidden rounded-full">
|
||||
<Image
|
||||
src="/assets/images/teams/pintu.webp"
|
||||
alt="Team Member"
|
||||
width={160}
|
||||
height={160}
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900">Jahid Hasan Pintu</h3>
|
||||
<p className="text-[#6a47ed]">Software Engineer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
|
@ -84,28 +84,28 @@ export default function ContactPage() {
|
|||
<h3 className="text-xl font-semibold mb-4">Follow us:</h3>
|
||||
<div className="flex space-x-4">
|
||||
<a
|
||||
href="#"
|
||||
href="https://www.facebook.com/PlanPostAI/"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<Facebook size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
href="https://x.com/planpost_ai"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<Twitter size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
href="https://www.linkedin.com/company/planpost-ai"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<Linkedin size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
href="https://www.instagram.com/planpostai"
|
||||
className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
|
|
|
|||