76 lines
4.6 KiB
TypeScript
76 lines
4.6 KiB
TypeScript
"use client";
|
||
import Link from 'next/link';
|
||
import React, { useState } from 'react';
|
||
import GsapReveal from '@/components/common/GsapReveal';
|
||
import CircularProgress from '@/components/common/CircularProgress/CircularProgress';
|
||
import ContactPopup from '@/components/common/ContactPopup/ContactPopup';
|
||
|
||
const About = () => {
|
||
const [isContactOpen, setIsContactOpen] = useState(false);
|
||
return (
|
||
<div className="about1-section-area sp1" id="about">
|
||
<img src="/assets/img/elements/elements9.png" alt="" className="elements9" />
|
||
<div className="container">
|
||
<div className="row align-items-center">
|
||
<div className="col-lg-6">
|
||
<div className="about-images-area" style={{ position: 'relative' }}>
|
||
<img src="/assets/img/elements/elements10.png" alt="" className="elements10" />
|
||
<img
|
||
src="/assets/img/home/section2/third-section.webp"
|
||
alt="About MetatronCube IT Solution"
|
||
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-1"></div>
|
||
<div className="col-lg-5">
|
||
<div className="about-glass-container about-header-area heading2">
|
||
<GsapReveal y={20}>
|
||
<h5><span><img src="/favicon.ico" alt="" /></span>About MetatronCube IT Solution</h5>
|
||
</GsapReveal>
|
||
<div className="space24"></div>
|
||
<GsapReveal y={20} delay={0.2}>
|
||
<h2 className="text-anime-style-3">Your Growth-Focused Website Development Partner</h2>
|
||
</GsapReveal>
|
||
<div className="space16"></div>
|
||
<p data-aos="fade-left" data-aos-duration="800">Your website is more than just a digital presence — it's your 24/7 sales machine. </p>
|
||
<div className="space28"></div>
|
||
|
||
<div className="about-specialties" data-aos="fade-left" data-aos-duration="900">
|
||
<h6>We specialize in:</h6>
|
||
<div className="specialty-row mt-3">
|
||
<ul className="specialty-list">
|
||
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Business Websites</li>
|
||
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Corporate Websites</li>
|
||
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Landing Pages</li>
|
||
</ul>
|
||
<ul className="specialty-list">
|
||
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> E-commerce Stores</li>
|
||
<li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Custom Web Applications</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space28"></div>
|
||
<div className="pera-box" data-aos="fade-left" data-aos-duration="1000">
|
||
<p>Our team combines strategy, design, development, and marketing expertise to create websites that don’t just look good — they perform.</p>
|
||
</div>
|
||
<div className="space28"></div>
|
||
<div className="btn-area1" data-aos="fade-left" data-aos-duration="1200">
|
||
<button onClick={() => setIsContactOpen(true)} className="vl-btn2">
|
||
Let’s Build Your Website <i className="fa-solid fa-angle-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ContactPopup isOpen={isContactOpen} onClose={() => setIsContactOpen(false)} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default About;
|