Components : About Our Vision

Preview content adapted to proportion

About Our Vision

AboutUs

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

This component showcases the company's vision through three key areas, highlighting innovative solutions, global expertise, and sustainable growth strategies.

The component features interactive elements such as hover effects on the grid items and button, which enhances user engagement.


The layout adjusts responsively with grid columns changing from one to three at different screen sizes, ensuring optimal display on all devices.

Date : May 29, 2025
Views : 40
Copys : 0

fa-tags

Corporate websites, landing pages, about us sections, and presentation slides.

Code

<section class="bg-gradient-to-br from-[#2A2F5F] to-[#4A5C8F] py-16 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
  <h2 class="text-4xl font-bold text-white text-center mb-12 animate-fade-in">
   About Our Vision
  </h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
   <div class="group bg-white/10 backdrop-blur-lg rounded-2xl p-8 transition-all duration-300 hover:bg-white/20 hover:shadow-xl lg:shadow-md lg:hover:shadow-2xl">
    <div class="flex flex-col space-y-6">
     <div class="flex justify-center">
      <span class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] p-4 rounded-full text-3xl">
       🔗
      </span>
     </div>
     <p class="text-gray-200 text-lg leading-relaxed transition-transform group-hover:translate-y-1">
      Innovative solutions shaping tomorrow's digital landscape through cutting-edge technology and creative problem-solving.
     </p>
     <ul class="flex justify-center space-x-4">
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       📱
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       💡
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       🌐
      </li>
     </ul>
    </div>
   </div>
   <div class="group bg-white/10 backdrop-blur-lg rounded-2xl p-8 transition-all duration-300 hover:bg-white/20 hover:shadow-xl lg:shadow-md lg:hover:shadow-2xl">
    <div class="flex flex-col space-y-6">
     <div class="flex justify-center">
      <span class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] p-4 rounded-full text-3xl">
       🚀
      </span>
     </div>
     <p class="text-gray-200 text-lg leading-relaxed transition-transform group-hover:translate-y-1">
      Global network of experts collaborating to deliver exceptional results across multiple industries and platforms.
     </p>
     <ul class="flex justify-center space-x-4">
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       🔒
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       ⚡
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       🤝
      </li>
     </ul>
    </div>
   </div>
   <div class="group bg-white/10 backdrop-blur-lg rounded-2xl p-8 transition-all duration-300 hover:bg-white/20 hover:shadow-xl lg:shadow-md lg:hover:shadow-2xl">
    <div class="flex flex-col space-y-6">
     <div class="flex justify-center">
      <span class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] p-4 rounded-full text-3xl">
       🎯
      </span>
     </div>
     <p class="text-gray-200 text-lg leading-relaxed transition-transform group-hover:translate-y-1">
      Sustainable growth strategies combined with measurable outcomes for long-term client success.
     </p>
     <ul class="flex justify-center space-x-4">
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       📈
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       ♻️
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       🏆
      </li>
     </ul>
    </div>
   </div>
  </div>
  <div class="mt-12 text-center">
   <button class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 hover:shadow-lg transition-all">
    Explore Our Journey
   </button>
  </div>
 </div>
</section>


<template>
 <section class="bg-gradient-to-br from-[#2A2F5F] to-[#4A5C8F] py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
   <h2 class="text-4xl font-bold text-white text-center mb-12 animate-fade-in">
    About Our Vision
   </h2>
   <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
    <div class="group bg-white/10 backdrop-blur-lg rounded-2xl p-8 transition-all duration-300 hover:bg-white/20 hover:shadow-xl lg:shadow-md lg:hover:shadow-2xl">
     <div class="flex flex-col space-y-6">
      <div class="flex justify-center">
       <span class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] p-4 rounded-full text-3xl">
        🔗
       </span>
      </div>
      <p class="text-gray-200 text-lg leading-relaxed transition-transform group-hover:translate-y-1">
       Innovative solutions shaping tomorrow's digital landscape through cutting-edge technology and creative problem-solving.
      </p>
      <ul class="flex justify-center space-x-4">
       <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
        📱
       </li>
       <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
        💡
       </li>
       <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
        🌐
       </li>
      </ul>
     </div>
    </div>
    <div class="group bg-white/10 backdrop-blur-lg rounded-2xl p-8 transition-all duration-300 hover:bg-white/20 hover:shadow-xl lg:shadow-md lg:hover:shadow-2xl">
     <div class="flex flex-col space-y-6">
      <div class="flex justify-center">
       <span class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] p-4 rounded-full text-3xl">
        🚀
       </span>
      </div>
      <p class="text-gray-200 text-lg leading-relaxed transition-transform group-hover:translate-y-1">
       Global network of experts collaborating to deliver exceptional results across multiple industries and platforms.
      </p>
      <ul class="flex justify-center space-x-4">
       <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
        🔒
       </li>
       <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
        ⚡
       </li>
       <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
        🤝
       </li>
      </ul>
     </div>
    </div>
    <div class="group bg-white/10 backdrop-blur-lg rounded-2xl p-8 transition-all duration-300 hover:bg-white/20 hover:shadow-xl lg:shadow-md lg:hover:shadow-2xl">
     <div class="flex flex-col space-y-6">
      <div class="flex justify-center">
       <span class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] p-4 rounded-full text-3xl">
        🎯
       </span>
      </div>
      <p class="text-gray-200 text-lg leading-relaxed transition-transform group-hover:translate-y-1">
       Sustainable growth strategies combined with measurable outcomes for long-term client success.
      </p>
      <ul class="flex justify-center space-x-4">
       <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
        📈
       </li>
       <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
        ♻️
       </li>
       <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
        🏆
       </li>
      </ul>
     </div>
    </div>
   </div>
   <div class="mt-12 text-center">
    <button class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 hover:shadow-lg transition-all">
     Explore Our Journey
    </button>
   </div>
  </div>
 </section>
</template>
<script>
 export default {
    name: 'MyAboutUsComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyAboutUsComponent = () => {
    return (
<div>
<section class="bg-gradient-to-br from-[#2A2F5F] to-[#4A5C8F] py-16 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
  <h2 class="text-4xl font-bold text-white text-center mb-12 animate-fade-in">
   About Our Vision
  </h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
   <div class="group bg-white/10 backdrop-blur-lg rounded-2xl p-8 transition-all duration-300 hover:bg-white/20 hover:shadow-xl lg:shadow-md lg:hover:shadow-2xl">
    <div class="flex flex-col space-y-6">
     <div class="flex justify-center">
      <span class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] p-4 rounded-full text-3xl">
       🔗
      </span>
     </div>
     <p class="text-gray-200 text-lg leading-relaxed transition-transform group-hover:translate-y-1">
      Innovative solutions shaping tomorrow's digital landscape through cutting-edge technology and creative problem-solving.
     </p>
     <ul class="flex justify-center space-x-4">
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       📱
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       💡
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       🌐
      </li>
     </ul>
    </div>
   </div>
   <div class="group bg-white/10 backdrop-blur-lg rounded-2xl p-8 transition-all duration-300 hover:bg-white/20 hover:shadow-xl lg:shadow-md lg:hover:shadow-2xl">
    <div class="flex flex-col space-y-6">
     <div class="flex justify-center">
      <span class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] p-4 rounded-full text-3xl">
       🚀
      </span>
     </div>
     <p class="text-gray-200 text-lg leading-relaxed transition-transform group-hover:translate-y-1">
      Global network of experts collaborating to deliver exceptional results across multiple industries and platforms.
     </p>
     <ul class="flex justify-center space-x-4">
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       🔒
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       ⚡
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       🤝
      </li>
     </ul>
    </div>
   </div>
   <div class="group bg-white/10 backdrop-blur-lg rounded-2xl p-8 transition-all duration-300 hover:bg-white/20 hover:shadow-xl lg:shadow-md lg:hover:shadow-2xl">
    <div class="flex flex-col space-y-6">
     <div class="flex justify-center">
      <span class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] p-4 rounded-full text-3xl">
       🎯
      </span>
     </div>
     <p class="text-gray-200 text-lg leading-relaxed transition-transform group-hover:translate-y-1">
      Sustainable growth strategies combined with measurable outcomes for long-term client success.
     </p>
     <ul class="flex justify-center space-x-4">
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       📈
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       ♻️
      </li>
      <li class="bg-white/20 p-3 rounded-full hover:bg-white/30 transition-colors">
       🏆
      </li>
     </ul>
    </div>
   </div>
  </div>
  <div class="mt-12 text-center">
   <button class="bg-gradient-to-r from-[#FF6B35] to-[#2D4263] text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 hover:shadow-lg transition-all">
    Explore Our Journey
   </button>
  </div>
 </div>
</section>

</div>
    )
}
export default MyAboutUsComponent;

Recommended Related Components

More+

About Our Vision

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

40
0

About Our Vision

It is used to present the company's mission, core values, and achievements in a visually appealing and 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