Components : About Our Vision

Preview content adapted to proportion

About Our Vision

AboutUs

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

This component showcases the company's vision, values, leadership team, global reach, and client testimonials through a series of well-designed sections.

Interactive elements include hover effects on grid items, scrollable testimonials, and clickable buttons with hover and active states.


The design is responsive, with a grid layout that adjusts to different screen sizes using md:grid-cols-3 and md:grid-cols-2 classes for medium and larger screens.

Date : June 03, 2025
Views : 41
Copys : 0

fa-tags

Company websites, corporate landing pages, about us sections, marketing pages

Code

<div class="container mx-auto px-4 py-16 scroll-smooth">
 <div class="text-center mb-20">
  <h2 class="text-5xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent mb-6">
   About Our Vision
  </h2>
  <div class="h-1 bg-gray-800 w-24 mx-auto mb-8">
  </div>
 </div>
 <div class="grid md:grid-cols-3 gap-8 mb-20">
  <div class="bg-gray-800 p-8 rounded-2xl hover:scale-105 transition-transform duration-300 hover:shadow-[0_20px_50px_rgba(255,140,0,0.1)]">
   <div class="text-pink-400 text-4xl mb-4">
    🚀
   </div>
   <h3 class="text-2xl font-semibold text-white mb-4">
    Innovation Driven
   </h3>
   <p class="text-gray-400">
    Pioneering solutions through cutting-edge technology and creative thinking
   </p>
  </div>
  <div class="bg-blue-50 p-8 rounded-2xl hover:scale-105 transition-transform duration-300 hover:shadow-[0_20px_50px_rgba(0,200,255,0.1)]">
   <div class="text-blue-500 text-4xl mb-4">
    🤝
   </div>
   <h3 class="text-2xl font-semibold text-gray-800 mb-4">
    Client Centric
   </h3>
   <p class="text-gray-600">
    Tailored services ensuring maximum value and satisfaction
   </p>
  </div>
  <div class="bg-purple-900 p-8 rounded-2xl hover:scale-105 transition-transform duration-300 hover:shadow-[0_20px_50px_rgba(147,51,234,0.1)]">
   <div class="text-yellow-400 text-4xl mb-4">
    🌟
   </div>
   <h3 class="text-2xl font-semibold text-white mb-4">
    Quality Excellence
   </h3>
   <p class="text-purple-200">
    Rigorous standards delivering unmatched performance
   </p>
  </div>
 </div>
 <div class="flex overflow-x-auto snap-x pb-12 mb-20 scrollbar-hide">
  <div class="flex-none w-80 snap-center mr-8 bg-white p-6 rounded-xl shadow-lg">
   <div class="flex items-center mb-4">
    <div class="text-3xl mr-4">
     👥
    </div>
    <div>
     <h4 class="font-bold text-gray-800">
      Leadership Team
     </h4>
     <p class="text-sm text-gray-600">
      20+ years combined experience
     </p>
    </div>
   </div>
   <p class="text-gray-700">
    Strategic visionaries driving technological evolution
   </p>
  </div>
  <div class="flex-none w-80 snap-center mr-8 bg-gray-100 p-6 rounded-xl shadow-lg">
   <div class="flex items-center mb-4">
    <div class="text-3xl mr-4">
     🎯
    </div>
    <div>
     <h4 class="font-bold text-gray-800">
      Global Reach
     </h4>
     <p class="text-sm text-gray-600">
      50+ countries served
     </p>
    </div>
   </div>
   <p class="text-gray-700">
    Worldwide network delivering localized solutions
   </p>
  </div>
 </div>
 <div class="grid md:grid-cols-2 gap-8 mb-20">
  <div class="bg-gradient-to-br from-purple-500 to-pink-600 p-8 rounded-3xl text-white">
   <blockquote class="text-xl italic mb-6">
    "Transformative solutions that redefine industry standards"
   </blockquote>
   <div class="flex items-center">
    <div class="text-2xl mr-4">
     🌟
    </div>
    <div>
     <p class="font-semibold">
      Tech Enterprises
     </p>
     <p class="text-sm opacity-80">
      Fortune 500 Company
     </p>
    </div>
   </div>
  </div>
  <div class="bg-gray-800 p-8 rounded-3xl">
   <div class="text-orange-400 text-3xl mb-4">
    💡
   </div>
   <h3 class="text-2xl font-bold text-white mb-4">
    Join Our Journey
   </h3>
   <p class="text-gray-400 mb-6">
    Be part of the innovation revolution
   </p>
   <div class="flex gap-4">
    <button class="bg-gradient-to-r from-purple-500 to-pink-600 text-white px-8 py-3 rounded-full hover:scale-110 transition-transform duration-300 active:scale-95">
     Contact Us
    </button>
    <button class="border-2 border-purple-500 text-purple-500 px-8 py-3 rounded-full hover:bg-purple-500 hover:text-white transition-colors duration-300">
     Careers
    </button>
   </div>
  </div>
 </div>
</div>


<template>
 <div class="container mx-auto px-4 py-16 scroll-smooth">
  <div class="text-center mb-20">
   <h2 class="text-5xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent mb-6">
    About Our Vision
   </h2>
   <div class="h-1 bg-gray-800 w-24 mx-auto mb-8">
   </div>
  </div>
  <div class="grid md:grid-cols-3 gap-8 mb-20">
   <div class="bg-gray-800 p-8 rounded-2xl hover:scale-105 transition-transform duration-300 hover:shadow-[0_20px_50px_rgba(255,140,0,0.1)]">
    <div class="text-pink-400 text-4xl mb-4">
     🚀
    </div>
    <h3 class="text-2xl font-semibold text-white mb-4">
     Innovation Driven
    </h3>
    <p class="text-gray-400">
     Pioneering solutions through cutting-edge technology and creative thinking
    </p>
   </div>
   <div class="bg-blue-50 p-8 rounded-2xl hover:scale-105 transition-transform duration-300 hover:shadow-[0_20px_50px_rgba(0,200,255,0.1)]">
    <div class="text-blue-500 text-4xl mb-4">
     🤝
    </div>
    <h3 class="text-2xl font-semibold text-gray-800 mb-4">
     Client Centric
    </h3>
    <p class="text-gray-600">
     Tailored services ensuring maximum value and satisfaction
    </p>
   </div>
   <div class="bg-purple-900 p-8 rounded-2xl hover:scale-105 transition-transform duration-300 hover:shadow-[0_20px_50px_rgba(147,51,234,0.1)]">
    <div class="text-yellow-400 text-4xl mb-4">
     🌟
    </div>
    <h3 class="text-2xl font-semibold text-white mb-4">
     Quality Excellence
    </h3>
    <p class="text-purple-200">
     Rigorous standards delivering unmatched performance
    </p>
   </div>
  </div>
  <div class="flex overflow-x-auto snap-x pb-12 mb-20 scrollbar-hide">
   <div class="flex-none w-80 snap-center mr-8 bg-white p-6 rounded-xl shadow-lg">
    <div class="flex items-center mb-4">
     <div class="text-3xl mr-4">
      👥
     </div>
     <div>
      <h4 class="font-bold text-gray-800">
       Leadership Team
      </h4>
      <p class="text-sm text-gray-600">
       20+ years combined experience
      </p>
     </div>
    </div>
    <p class="text-gray-700">
     Strategic visionaries driving technological evolution
    </p>
   </div>
   <div class="flex-none w-80 snap-center mr-8 bg-gray-100 p-6 rounded-xl shadow-lg">
    <div class="flex items-center mb-4">
     <div class="text-3xl mr-4">
      🎯
     </div>
     <div>
      <h4 class="font-bold text-gray-800">
       Global Reach
      </h4>
      <p class="text-sm text-gray-600">
       50+ countries served
      </p>
     </div>
    </div>
    <p class="text-gray-700">
     Worldwide network delivering localized solutions
    </p>
   </div>
  </div>
  <div class="grid md:grid-cols-2 gap-8 mb-20">
   <div class="bg-gradient-to-br from-purple-500 to-pink-600 p-8 rounded-3xl text-white">
    <blockquote class="text-xl italic mb-6">
     "Transformative solutions that redefine industry standards"
    </blockquote>
    <div class="flex items-center">
     <div class="text-2xl mr-4">
      🌟
     </div>
     <div>
      <p class="font-semibold">
       Tech Enterprises
      </p>
      <p class="text-sm opacity-80">
       Fortune 500 Company
      </p>
     </div>
    </div>
   </div>
   <div class="bg-gray-800 p-8 rounded-3xl">
    <div class="text-orange-400 text-3xl mb-4">
     💡
    </div>
    <h3 class="text-2xl font-bold text-white mb-4">
     Join Our Journey
    </h3>
    <p class="text-gray-400 mb-6">
     Be part of the innovation revolution
    </p>
    <div class="flex gap-4">
     <button class="bg-gradient-to-r from-purple-500 to-pink-600 text-white px-8 py-3 rounded-full hover:scale-110 transition-transform duration-300 active:scale-95">
      Contact Us
     </button>
     <button class="border-2 border-purple-500 text-purple-500 px-8 py-3 rounded-full hover:bg-purple-500 hover:text-white transition-colors duration-300">
      Careers
     </button>
    </div>
   </div>
  </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="container mx-auto px-4 py-16 scroll-smooth">
 <div class="text-center mb-20">
  <h2 class="text-5xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent mb-6">
   About Our Vision
  </h2>
  <div class="h-1 bg-gray-800 w-24 mx-auto mb-8">
  </div>
 </div>
 <div class="grid md:grid-cols-3 gap-8 mb-20">
  <div class="bg-gray-800 p-8 rounded-2xl hover:scale-105 transition-transform duration-300 hover:shadow-[0_20px_50px_rgba(255,140,0,0.1)]">
   <div class="text-pink-400 text-4xl mb-4">
    🚀
   </div>
   <h3 class="text-2xl font-semibold text-white mb-4">
    Innovation Driven
   </h3>
   <p class="text-gray-400">
    Pioneering solutions through cutting-edge technology and creative thinking
   </p>
  </div>
  <div class="bg-blue-50 p-8 rounded-2xl hover:scale-105 transition-transform duration-300 hover:shadow-[0_20px_50px_rgba(0,200,255,0.1)]">
   <div class="text-blue-500 text-4xl mb-4">
    🤝
   </div>
   <h3 class="text-2xl font-semibold text-gray-800 mb-4">
    Client Centric
   </h3>
   <p class="text-gray-600">
    Tailored services ensuring maximum value and satisfaction
   </p>
  </div>
  <div class="bg-purple-900 p-8 rounded-2xl hover:scale-105 transition-transform duration-300 hover:shadow-[0_20px_50px_rgba(147,51,234,0.1)]">
   <div class="text-yellow-400 text-4xl mb-4">
    🌟
   </div>
   <h3 class="text-2xl font-semibold text-white mb-4">
    Quality Excellence
   </h3>
   <p class="text-purple-200">
    Rigorous standards delivering unmatched performance
   </p>
  </div>
 </div>
 <div class="flex overflow-x-auto snap-x pb-12 mb-20 scrollbar-hide">
  <div class="flex-none w-80 snap-center mr-8 bg-white p-6 rounded-xl shadow-lg">
   <div class="flex items-center mb-4">
    <div class="text-3xl mr-4">
     👥
    </div>
    <div>
     <h4 class="font-bold text-gray-800">
      Leadership Team
     </h4>
     <p class="text-sm text-gray-600">
      20+ years combined experience
     </p>
    </div>
   </div>
   <p class="text-gray-700">
    Strategic visionaries driving technological evolution
   </p>
  </div>
  <div class="flex-none w-80 snap-center mr-8 bg-gray-100 p-6 rounded-xl shadow-lg">
   <div class="flex items-center mb-4">
    <div class="text-3xl mr-4">
     🎯
    </div>
    <div>
     <h4 class="font-bold text-gray-800">
      Global Reach
     </h4>
     <p class="text-sm text-gray-600">
      50+ countries served
     </p>
    </div>
   </div>
   <p class="text-gray-700">
    Worldwide network delivering localized solutions
   </p>
  </div>
 </div>
 <div class="grid md:grid-cols-2 gap-8 mb-20">
  <div class="bg-gradient-to-br from-purple-500 to-pink-600 p-8 rounded-3xl text-white">
   <blockquote class="text-xl italic mb-6">
    "Transformative solutions that redefine industry standards"
   </blockquote>
   <div class="flex items-center">
    <div class="text-2xl mr-4">
     🌟
    </div>
    <div>
     <p class="font-semibold">
      Tech Enterprises
     </p>
     <p class="text-sm opacity-80">
      Fortune 500 Company
     </p>
    </div>
   </div>
  </div>
  <div class="bg-gray-800 p-8 rounded-3xl">
   <div class="text-orange-400 text-3xl mb-4">
    💡
   </div>
   <h3 class="text-2xl font-bold text-white mb-4">
    Join Our Journey
   </h3>
   <p class="text-gray-400 mb-6">
    Be part of the innovation revolution
   </p>
   <div class="flex gap-4">
    <button class="bg-gradient-to-r from-purple-500 to-pink-600 text-white px-8 py-3 rounded-full hover:scale-110 transition-transform duration-300 active:scale-95">
     Contact Us
    </button>
    <button class="border-2 border-purple-500 text-purple-500 px-8 py-3 rounded-full hover:bg-purple-500 hover:text-white transition-colors duration-300">
     Careers
    </button>
   </div>
  </div>
 </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.

41
0

About Our Vision

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

40
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.

28
0

About Our Company

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

20
0