Components : About Our Company

Preview content adapted to proportion

About Our Company

AboutUs

The component is used to present company information on a website, highlighting key aspects such as innovation, collaboration, and growth.

This component showcases information about a company, including its mission, core values, team, and a call-to-action for joining the team.

The component includes interactive elements like hover effects on cards and a clickable button to join the team.


The design is responsive, with a grid layout that adjusts for different screen sizes, ensuring readability and visual appeal on both mobile and desktop devices.

Date : June 16, 2025
Views : 19
Copys : 0

fa-tags

Company website, corporate landing page, about us section

Code

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
 <div class="text-center mb-12 space-y-4">
  <h2 class="text-4xl font-bold text-[#2D3748]">
   About Our Company
  </h2>
  <p class="text-gray-600 max-w-2xl mx-auto">
   Innovating solutions for tomorrow's challenges
  </p>
 </div>
 <div class="md:flex md:overflow-x-auto pb-6 space-x-4 md:flex-nowrap grid grid-cols-1 gap-6 md:gap-0">
  <div class="min-w-[300px] bg-gradient-to-br from-[#2D3748] to-[#F97316] p-6 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer">
   <div class="bg-white p-4 rounded-xl">
    <div class="text-4xl mb-4">
     💡
    </div>
    <h3 class="text-xl font-bold mb-2">
     Innovation
    </h3>
    <p class="text-gray-600">
     Pioneering new approaches in technology
    </p>
   </div>
  </div>
  <div class="min-w-[300px] bg-gradient-to-tr from-[#2D3748] to-[#F97316] p-6 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer">
   <div class="bg-white p-4 rounded-xl">
    <div class="text-4xl mb-4">
     🤝
    </div>
    <h3 class="text-xl font-bold mb-2">
     Collaboration
    </h3>
    <p class="text-gray-600">
     Building success through teamwork
    </p>
   </div>
  </div>
  <div class="min-w-[300px] bg-gradient-to-bl from-[#2D3748] to-[#F97316] p-6 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer">
   <div class="bg-white p-4 rounded-xl">
    <div class="text-4xl mb-4">
     🚀
    </div>
    <h3 class="text-xl font-bold mb-2">
     Growth
    </h3>
    <p class="text-gray-600">
     Continuous learning and development
    </p>
   </div>
  </div>
 </div>
 <div class="my-12">
  <h3 class="text-3xl font-bold text-[#2D3748] text-center mb-8">
   Our Team
  </h3>
  <div class="grid md:grid-cols-3 gap-6">
   <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
    <div class="text-5xl mb-4">
     👩💻
    </div>
    <h4 class="text-xl font-semibold">
     Tech Experts
    </h4>
    <p class="text-gray-600 mt-2">
     Cutting-edge technical specialists
    </p>
   </div>
   <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
    <div class="text-5xl mb-4">
     👥
    </div>
    <h4 class="text-xl font-semibold">
     Global Network
    </h4>
    <p class="text-gray-600 mt-2">
     Worldwide professional community
    </p>
   </div>
   <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
    <div class="text-5xl mb-4">
     🎯
    </div>
    <h4 class="text-xl font-semibold">
     Industry Leaders
    </h4>
    <p class="text-gray-600 mt-2">
     Market-shaping visionaries
    </p>
   </div>
  </div>
 </div>
 <div class="text-center mt-12">
  <button class="bg-[#F97316] text-white px-8 py-3 rounded-full hover:bg-[#2D3748] hover:scale-110 transition-all duration-300 font-semibold">
   Join Our Team
  </button>
 </div>
</div>


<template>
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="text-center mb-12 space-y-4">
   <h2 class="text-4xl font-bold text-[#2D3748]">
    About Our Company
   </h2>
   <p class="text-gray-600 max-w-2xl mx-auto">
    Innovating solutions for tomorrow's challenges
   </p>
  </div>
  <div class="md:flex md:overflow-x-auto pb-6 space-x-4 md:flex-nowrap grid grid-cols-1 gap-6 md:gap-0">
   <div class="min-w-[300px] bg-gradient-to-br from-[#2D3748] to-[#F97316] p-6 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer">
    <div class="bg-white p-4 rounded-xl">
     <div class="text-4xl mb-4">
      💡
     </div>
     <h3 class="text-xl font-bold mb-2">
      Innovation
     </h3>
     <p class="text-gray-600">
      Pioneering new approaches in technology
     </p>
    </div>
   </div>
   <div class="min-w-[300px] bg-gradient-to-tr from-[#2D3748] to-[#F97316] p-6 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer">
    <div class="bg-white p-4 rounded-xl">
     <div class="text-4xl mb-4">
      🤝
     </div>
     <h3 class="text-xl font-bold mb-2">
      Collaboration
     </h3>
     <p class="text-gray-600">
      Building success through teamwork
     </p>
    </div>
   </div>
   <div class="min-w-[300px] bg-gradient-to-bl from-[#2D3748] to-[#F97316] p-6 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer">
    <div class="bg-white p-4 rounded-xl">
     <div class="text-4xl mb-4">
      🚀
     </div>
     <h3 class="text-xl font-bold mb-2">
      Growth
     </h3>
     <p class="text-gray-600">
      Continuous learning and development
     </p>
    </div>
   </div>
  </div>
  <div class="my-12">
   <h3 class="text-3xl font-bold text-[#2D3748] text-center mb-8">
    Our Team
   </h3>
   <div class="grid md:grid-cols-3 gap-6">
    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
     <div class="text-5xl mb-4">
      👩💻
     </div>
     <h4 class="text-xl font-semibold">
      Tech Experts
     </h4>
     <p class="text-gray-600 mt-2">
      Cutting-edge technical specialists
     </p>
    </div>
    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
     <div class="text-5xl mb-4">
      👥
     </div>
     <h4 class="text-xl font-semibold">
      Global Network
     </h4>
     <p class="text-gray-600 mt-2">
      Worldwide professional community
     </p>
    </div>
    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
     <div class="text-5xl mb-4">
      🎯
     </div>
     <h4 class="text-xl font-semibold">
      Industry Leaders
     </h4>
     <p class="text-gray-600 mt-2">
      Market-shaping visionaries
     </p>
    </div>
   </div>
  </div>
  <div class="text-center mt-12">
   <button class="bg-[#F97316] text-white px-8 py-3 rounded-full hover:bg-[#2D3748] hover:scale-110 transition-all duration-300 font-semibold">
    Join Our Team
   </button>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyAboutUsComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyAboutUsComponent = () => {
    return (
<div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
 <div class="text-center mb-12 space-y-4">
  <h2 class="text-4xl font-bold text-[#2D3748]">
   About Our Company
  </h2>
  <p class="text-gray-600 max-w-2xl mx-auto">
   Innovating solutions for tomorrow's challenges
  </p>
 </div>
 <div class="md:flex md:overflow-x-auto pb-6 space-x-4 md:flex-nowrap grid grid-cols-1 gap-6 md:gap-0">
  <div class="min-w-[300px] bg-gradient-to-br from-[#2D3748] to-[#F97316] p-6 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer">
   <div class="bg-white p-4 rounded-xl">
    <div class="text-4xl mb-4">
     💡
    </div>
    <h3 class="text-xl font-bold mb-2">
     Innovation
    </h3>
    <p class="text-gray-600">
     Pioneering new approaches in technology
    </p>
   </div>
  </div>
  <div class="min-w-[300px] bg-gradient-to-tr from-[#2D3748] to-[#F97316] p-6 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer">
   <div class="bg-white p-4 rounded-xl">
    <div class="text-4xl mb-4">
     🤝
    </div>
    <h3 class="text-xl font-bold mb-2">
     Collaboration
    </h3>
    <p class="text-gray-600">
     Building success through teamwork
    </p>
   </div>
  </div>
  <div class="min-w-[300px] bg-gradient-to-bl from-[#2D3748] to-[#F97316] p-6 rounded-2xl shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer">
   <div class="bg-white p-4 rounded-xl">
    <div class="text-4xl mb-4">
     🚀
    </div>
    <h3 class="text-xl font-bold mb-2">
     Growth
    </h3>
    <p class="text-gray-600">
     Continuous learning and development
    </p>
   </div>
  </div>
 </div>
 <div class="my-12">
  <h3 class="text-3xl font-bold text-[#2D3748] text-center mb-8">
   Our Team
  </h3>
  <div class="grid md:grid-cols-3 gap-6">
   <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
    <div class="text-5xl mb-4">
     👩💻
    </div>
    <h4 class="text-xl font-semibold">
     Tech Experts
    </h4>
    <p class="text-gray-600 mt-2">
     Cutting-edge technical specialists
    </p>
   </div>
   <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
    <div class="text-5xl mb-4">
     👥
    </div>
    <h4 class="text-xl font-semibold">
     Global Network
    </h4>
    <p class="text-gray-600 mt-2">
     Worldwide professional community
    </p>
   </div>
   <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
    <div class="text-5xl mb-4">
     🎯
    </div>
    <h4 class="text-xl font-semibold">
     Industry Leaders
    </h4>
    <p class="text-gray-600 mt-2">
     Market-shaping visionaries
    </p>
   </div>
  </div>
 </div>
 <div class="text-center mt-12">
  <button class="bg-[#F97316] text-white px-8 py-3 rounded-full hover:bg-[#2D3748] hover:scale-110 transition-all duration-300 font-semibold">
   Join Our Team
  </button>
 </div>
</div>

</div>
    )
}
export default MyAboutUsComponent;

Recommended Related Components

More+

About Our Vision

It is used to present the company's mission, core values, and achievements in a visually appealing and engaging manner.

39
0

About Our Vision

It is used to present the company's mission and core values in a visually engaging manner.

38
0

Vision and Values

It is used to present the company's mission, principles, and achievements to potential employees, customers, and stakeholders, fostering trust and engagement.

26
0

About Our Company

The component is used to present company information on a website, highlighting key aspects such as innovation, collaboration, and growth.

19
0