forked from UKSOURCE/hailearning.edu.vn
feat: Create FE home page and about page
This commit is contained in:
Đỗ Minh Nhật
@@ -1,47 +0,0 @@
|
||||
interface AchievementsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
items: {
|
||||
value: string;
|
||||
suffix: string;
|
||||
label: string;
|
||||
description: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const Achievements = ({ data }: AchievementsProps) => {
|
||||
return (
|
||||
<section className="counter-section section-padding pb-0 fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg-2.jpg')" }}>
|
||||
<div className="shape">
|
||||
<img src="/assets/img/home-1/feature/shape-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title bg-2 wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="text-white split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="counter-wrapper">
|
||||
<div className="container">
|
||||
<div className="counter-main-item">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className={`counter-item ${index < 3 ? 'style-2' : ''}`}>
|
||||
<h2><span className="odometer" data-count={item.value}>00</span>{item.suffix}</h2>
|
||||
<h5>{item.label}</h5>
|
||||
<p>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Achievements;
|
||||
@@ -1,116 +0,0 @@
|
||||
import { getCmsImageUrl } from '@/utils/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface BlogPreviewProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
items: {
|
||||
title: string;
|
||||
excerpt: string;
|
||||
category: string;
|
||||
date: string;
|
||||
author: {
|
||||
name: string;
|
||||
avatar: string;
|
||||
};
|
||||
comments: number;
|
||||
link: string;
|
||||
thumbnail: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const BlogPreview = ({ data }: BlogPreviewProps) => {
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="news-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="section-title-area">
|
||||
<div className="section-title">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="row">
|
||||
{data.items.map((item, index) => {
|
||||
const thumbUrl = getCmsImageUrl(item.thumbnail);
|
||||
return (
|
||||
<div key={index} className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay={`.${(index + 1) * 2 + 1}s`}>
|
||||
<div className="news-card-item">
|
||||
<div className="news-image">
|
||||
<img
|
||||
src={thumbUrl}
|
||||
alt="img"
|
||||
style={{
|
||||
width: '419px',
|
||||
height: '312px',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
/>
|
||||
<span>{item.category}</span>
|
||||
<div className="news-layer-wrapper">
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="news-content">
|
||||
<div className="list">
|
||||
<span>Comment ({item.comments.toString().padStart(2, '0')})</span>
|
||||
<span>_ {formatDate(item.date)}</span>
|
||||
</div>
|
||||
<h3>
|
||||
<Link href={item.link}>
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<div className="news-bottom">
|
||||
<div className="info-item">
|
||||
<div
|
||||
style={{
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
backgroundColor: '#d1d5db',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: '#374151',
|
||||
marginRight: '10px'
|
||||
}}
|
||||
>
|
||||
{item.author.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span>By {item.author.name}</span>
|
||||
</div>
|
||||
<Link href={item.link} className="link-btn">View Articles<i className="fa-solid fa-arrow-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPreview;
|
||||
@@ -1,83 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface FAQSectionProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
items: {
|
||||
question: string;
|
||||
answer: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const FAQSection = ({ data }: FAQSectionProps) => {
|
||||
return (
|
||||
<section className="faq-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="faq-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-5">
|
||||
<div className="faq-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text">
|
||||
{data.description}
|
||||
</p>
|
||||
<Link href={data.ctaButton.href} className="theme-btn">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="faq-items">
|
||||
<div className="accordion" id="accordionExample">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className="accordion-item wow fadeInUp" data-wow-delay={`.${(index + 1) * 2}s`}>
|
||||
<h5 className="accordion-header" id={`heading${index}`}>
|
||||
<button
|
||||
className="accordion-button collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#collapse${index}`}
|
||||
aria-expanded="false"
|
||||
aria-controls={`collapse${index}`}
|
||||
>
|
||||
{item.question}
|
||||
</button>
|
||||
</h5>
|
||||
<div
|
||||
id={`collapse${index}`}
|
||||
className="accordion-collapse collapse"
|
||||
aria-labelledby={`heading${index}`}
|
||||
data-bs-parent="#accordionExample"
|
||||
>
|
||||
<div className="accordion-body">
|
||||
<p>
|
||||
{item.answer}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FAQSection;
|
||||
@@ -1,141 +1,46 @@
|
||||
import { getCmsImageUrl } from '@/utils/image';
|
||||
import Link from 'next/link';
|
||||
import Link from "next/link";
|
||||
|
||||
interface HeroSlide {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description: string;
|
||||
primaryButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
secondaryButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
heroImage?: string;
|
||||
videoUrl: string;
|
||||
}
|
||||
const HeroSection = () => {
|
||||
return (
|
||||
<section id="hero-banner" className="hero-home">
|
||||
<div className="hero-home__overlay">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Paris University Campus"
|
||||
className="hero-home__bg-img"
|
||||
/>
|
||||
<div className="hero-home__gradient" />
|
||||
</div>
|
||||
|
||||
interface HeroSectionProps {
|
||||
data: {
|
||||
backgroundImage: string;
|
||||
// Optional multi-slide support from CMS
|
||||
slides?: HeroSlide[];
|
||||
// Legacy single-slide fields (fallback)
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
description?: string;
|
||||
primaryButton?: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
secondaryButton?: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
heroImage?: string;
|
||||
videoUrl?: string;
|
||||
};
|
||||
}
|
||||
<div className="hero-home__container">
|
||||
<div className="hero-home__content">
|
||||
<div className="hero-home__badge">
|
||||
<span className="hero-home__badge-dot" />
|
||||
<span className="hero-home__badge-text">Leading Research Institution</span>
|
||||
</div>
|
||||
|
||||
const HeroSection = ({ data }: HeroSectionProps) => {
|
||||
const slides: HeroSlide[] =
|
||||
(data.slides && data.slides.length > 0)
|
||||
? data.slides
|
||||
: [{
|
||||
title: data.title || '',
|
||||
subtitle: data.subtitle || '',
|
||||
description: data.description || '',
|
||||
primaryButton: data.primaryButton || { label: '', href: '#' },
|
||||
secondaryButton: data.secondaryButton || { label: '', href: '#' },
|
||||
heroImage: data.heroImage,
|
||||
videoUrl: data.videoUrl || '',
|
||||
}];
|
||||
<h1 className="hero-home__title">
|
||||
Advancing Knowledge in the Heart of Paris
|
||||
</h1>
|
||||
|
||||
const firstSlide = slides[0];
|
||||
<p className="hero-home__desc">
|
||||
A premier liberal arts and research university dedicated to fostering
|
||||
interdisciplinary innovation, global partnerships, and academic excellence.
|
||||
</p>
|
||||
|
||||
return (
|
||||
<section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${getCmsImageUrl(data.backgroundImage)}')` }}>
|
||||
<div className="left-shape">
|
||||
<img src="/assets/img/home-1/hero/sape-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="hero-shape">
|
||||
<img src="/assets/img/home-1/hero/shape.png" alt="img" />
|
||||
</div>
|
||||
<div className="top-shape">
|
||||
<img src="/assets/img/home-1/hero/shape-3.png" alt="img" />
|
||||
</div>
|
||||
<div className="right-shape">
|
||||
<img src="/assets/img/home-1/hero/shape-4.png" alt="img" />
|
||||
</div>
|
||||
<div className="pagi-item">
|
||||
<div className="dot-number">
|
||||
<span className="dot-num">
|
||||
<span>03</span>
|
||||
</span>
|
||||
<span className="dot-num">
|
||||
<span>05</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="swiper hero-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{slides.map((slide, index) => (
|
||||
<div className="swiper-slide" key={index}>
|
||||
<div className="hero-content">
|
||||
<h6>{slide.subtitle}</h6>
|
||||
<h1>
|
||||
{slide.title}
|
||||
{slide.videoUrl && (
|
||||
<a href={slide.videoUrl} className="video-btn video-popup">
|
||||
<i className="fa-solid fa-play"></i>
|
||||
</a>
|
||||
)}
|
||||
</h1>
|
||||
<p>
|
||||
{slide.description}
|
||||
</p>
|
||||
<div className="hero-button">
|
||||
{slide.primaryButton?.href && (
|
||||
<Link href={slide.primaryButton.href} className="theme-btn">
|
||||
{slide.primaryButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
)}
|
||||
{slide.secondaryButton?.href && (
|
||||
<Link href={slide.secondaryButton.href} className="theme-btn style-2">
|
||||
{slide.secondaryButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="swiper image-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{slides.map((slide, index) => (
|
||||
<div className="swiper-slide" key={index}>
|
||||
<div className="hero-image">
|
||||
<img src={slide.heroImage || firstSlide.heroImage || "/assets/img/home-1/hero/man.png"} alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
<div className="hero-home__actions">
|
||||
<button className="hero-home__btn hero-home__btn--primary">
|
||||
Explore Research
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</button>
|
||||
<button className="hero-home__btn hero-home__btn--secondary">
|
||||
Partner With Us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
import { getCmsImageUrl } from '@/utils/image';
|
||||
|
||||
interface PartnersProps {
|
||||
data: {
|
||||
visaConsultancy: {
|
||||
items: {
|
||||
name: string;
|
||||
icon: string;
|
||||
year: string;
|
||||
}[];
|
||||
};
|
||||
brands: {
|
||||
items: {
|
||||
logo: string;
|
||||
}[];
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const Partners = ({ data }: PartnersProps) => {
|
||||
return (
|
||||
<>
|
||||
{/* Awards Section */}
|
||||
<section className="visa-consultency-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="row g-4">
|
||||
{(data.visaConsultancy?.items || []).map((partner, index) => (
|
||||
<div key={index} className="col-xl-3 col-lg-4 col-md-6">
|
||||
<div className="visa-consultency-item">
|
||||
<div className="image d-flex justify-content-center">
|
||||
<img src={getCmsImageUrl(partner.icon)} alt={partner.name} />
|
||||
</div>
|
||||
<h3>{partner.name}</h3>
|
||||
<h6>{partner.year}</h6>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Brand Partners Section */}
|
||||
<div className="brand-section fix">
|
||||
<div className="container">
|
||||
<div className="brand-wrapper style-1">
|
||||
<div className="brand-item">
|
||||
<div className="swiper brand-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{(data.brands?.items || []).map((brand, index) => (
|
||||
<div key={index} className="swiper-slide">
|
||||
<div className="brand-image d-flex justify-content-center">
|
||||
<img src={getCmsImageUrl(brand.logo)} alt="brand-logo" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Partners;
|
||||
67
app/components/home/QuickLinksGrid.tsx
Normal file
67
app/components/home/QuickLinksGrid.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const LINKS = [
|
||||
{
|
||||
icon: "fa-solid fa-microscope",
|
||||
title: "Research Hub",
|
||||
desc: "Discover our ongoing projects, facilities, and interdisciplinary centers.",
|
||||
cta: "View Hub",
|
||||
href: "/research",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-book-open",
|
||||
title: "Publications",
|
||||
desc: "Access our extensive repository of peer-reviewed papers and journals.",
|
||||
cta: "Browse",
|
||||
href: "/publications",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-handshake",
|
||||
title: "Partnerships",
|
||||
desc: "Collaborate with us through industry, academic, and global networks.",
|
||||
cta: "Connect",
|
||||
href: "/partnerships",
|
||||
},
|
||||
{
|
||||
icon: "fa-solid fa-newspaper",
|
||||
title: "News & Events",
|
||||
desc: "Stay updated with our latest breakthroughs, seminars, and campus life.",
|
||||
cta: "Read More",
|
||||
href: "/blog",
|
||||
},
|
||||
];
|
||||
|
||||
const QuickLinksGrid = () => {
|
||||
return (
|
||||
<section id="quick-links" className="quick-links">
|
||||
<div className="container">
|
||||
<div className="quick-links__header text-center">
|
||||
<h2 className="quick-links__title">Explore Our Ecosystem</h2>
|
||||
<p className="quick-links__subtitle">
|
||||
Navigate through our core pillars of academic excellence and global partnerships.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="quick-links__grid">
|
||||
{LINKS.map((item, i) => (
|
||||
<Link href={item.href} key={i} className="quick-links__card">
|
||||
<div className="quick-links__icon-wrap">
|
||||
<i className={item.icon}></i>
|
||||
</div>
|
||||
<h3 className="quick-links__card-title">{item.title}</h3>
|
||||
<p className="quick-links__card-desc">{item.desc}</p>
|
||||
<div className="quick-links__card-footer">
|
||||
<span className="quick-links__cta">{item.cta}</span>
|
||||
<span className="quick-links__arrow">
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuickLinksGrid;
|
||||
@@ -1,74 +0,0 @@
|
||||
interface TestimonialsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
videoUrl: string;
|
||||
videoThumbnail: string;
|
||||
items: {
|
||||
name: string;
|
||||
role: string;
|
||||
country: string;
|
||||
rating: number;
|
||||
comment: string;
|
||||
avatar: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const Testimonials = ({ data }: TestimonialsProps) => {
|
||||
return (
|
||||
<section className="testimonial-section section-padding pb-0 fix">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="testimonial-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-4">
|
||||
<div className="testimonia-image tp-clip-anim p-relative">
|
||||
<img src={data.videoThumbnail} alt="img" className="tp-anim-img" data-animate="true" />
|
||||
<a href={data.videoUrl} className="video-btn video-popup">
|
||||
<i className="fa-solid fa-play"></i></a>
|
||||
<h5>Real stories</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<div className="swiper testimonial-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{data.items.map((testimonial, index) => (
|
||||
<div key={index} className="swiper-slide">
|
||||
<div className="testimonial-box">
|
||||
<div className="star">
|
||||
{Array.from({ length: testimonial.rating }).map((_, i) => (
|
||||
<i key={i} className="fa-solid fa-star"></i>
|
||||
))}
|
||||
</div>
|
||||
<p>
|
||||
{testimonial.comment}
|
||||
</p>
|
||||
<div className="info-item">
|
||||
<div className="client-image">
|
||||
<img src={testimonial.avatar} alt="img" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>{testimonial.name}</h5>
|
||||
<span>{testimonial.country}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
@@ -1,35 +0,0 @@
|
||||
interface VideoGalleryProps {
|
||||
data: {
|
||||
heading: string;
|
||||
videoUrl: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
}
|
||||
|
||||
const VideoGallery = ({ data }: VideoGalleryProps) => {
|
||||
return (
|
||||
<section className="video-section bg-cover">
|
||||
<video autoPlay loop muted playsInline className="video-bg">
|
||||
<source src={data.videoUrl} type="video/mp4" />
|
||||
</video>
|
||||
<div className="text-image">
|
||||
<img src="/assets/img/home-1/feature/text.png" alt="img" />
|
||||
</div>
|
||||
<div className="text-image-2">
|
||||
<img src="/assets/img/home-1/feature/text-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="video-content">
|
||||
<div className="shape">
|
||||
<img src="/assets/img/home-1/feature/Vector.png" alt="img" />
|
||||
</div>
|
||||
<h2 className="split-text-right split-text-in-right">{data.heading.split(' ').map((word, index) => (
|
||||
<span key={index}>{word}{index === 0 ? <br /> : ' '}</span>
|
||||
))}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoGallery;
|
||||
@@ -1,82 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface VisaCountriesProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
countries: {
|
||||
name: string;
|
||||
code: string;
|
||||
flag: string;
|
||||
link: string;
|
||||
visaTypes: string[];
|
||||
}[];
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const VisaCountries = ({ data }: VisaCountriesProps) => {
|
||||
// Display the first country as featured
|
||||
const featuredCountry = data.countries[0];
|
||||
const halfLength = Math.ceil(featuredCountry.visaTypes.length / 2);
|
||||
const firstColumn = featuredCountry.visaTypes.slice(0, halfLength);
|
||||
const secondColumn = featuredCountry.visaTypes.slice(halfLength);
|
||||
|
||||
return (
|
||||
<section className="feature-section section-padding fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg.png')" }}>
|
||||
<div className="container">
|
||||
<div className="feature-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title bg-2 wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="text-white split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.description}
|
||||
</p>
|
||||
<div className="feature-list-item wow fadeInUp" data-wow-delay=".5s">
|
||||
<ul className="list">
|
||||
{firstColumn.map((visaType, index) => (
|
||||
<li key={index}>
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
{visaType}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul className="list">
|
||||
{secondColumn.map((visaType, index) => (
|
||||
<li key={index}>
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
{visaType}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Link href={data.ctaButton.href} className="theme-btn">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-image">
|
||||
<img src={featuredCountry.flag} alt="img" />
|
||||
<h6>{featuredCountry.code}.{featuredCountry.name}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default VisaCountries;
|
||||
@@ -1,52 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface VisaSolutionsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
items: {
|
||||
number: string;
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const VisaSolutions = ({ data }: VisaSolutionsProps) => {
|
||||
return (
|
||||
<div className="service-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className={`service-wrapper ${index === 1 ? 'active' : ''}`}>
|
||||
<div className="container">
|
||||
<div className="service-item">
|
||||
|
||||
<div className="left-item">
|
||||
<h5 className="number">{item.number}</h5>
|
||||
<h3>
|
||||
<Link href={item.link}>{item.title}</Link>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="right-item">
|
||||
<p>
|
||||
{item.description}
|
||||
</p>
|
||||
<Link href={item.link} className="service-btn">Service Details <i className="fa-solid fa-arrow-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VisaSolutions;
|
||||
@@ -1,109 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface WhyChooseUsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
highlightWord?: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
mainImage?: string;
|
||||
secondaryImage?: string;
|
||||
items: {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
features: string[];
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
|
||||
const highlight = data.highlightWord?.trim();
|
||||
|
||||
let headingContent: React.ReactNode = data.heading;
|
||||
|
||||
if (highlight) {
|
||||
const index = data.heading.indexOf(highlight);
|
||||
if (index !== -1) {
|
||||
const before = data.heading.slice(0, index);
|
||||
const after = data.heading.slice(index + highlight.length);
|
||||
headingContent = (
|
||||
<>
|
||||
{before}
|
||||
<span>{highlight}</span>
|
||||
{after}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="about-section section-padding fix pb-0">
|
||||
<div className="top-shape">
|
||||
<img src="/assets/img/home-1/about/globe.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="about-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="about-image">
|
||||
<img src={data.mainImage || "/assets/img/home-1/about/about-1.jpg"} alt="img" className="wow img-custom-anim-left" />
|
||||
<div className="about-image-2">
|
||||
<img src={data.secondaryImage || "/assets/img/home-1/about/about-02.jpg"} alt="img" className="wow img-custom-anim-right" />
|
||||
</div>
|
||||
<div className="bg-shape">
|
||||
<img src="/assets/img/home-1/about/Vector.png" alt="img" />
|
||||
</div>
|
||||
<div className="plane-shape float-bob-y">
|
||||
<img src="/assets/img/home-1/about/plane.png" alt="img" />
|
||||
</div>
|
||||
<div className="top-shape float-bob-y">
|
||||
<img src="/assets/img/home-1/about/shape.png" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="about-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{headingContent}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.description}
|
||||
</p>
|
||||
<div className="about-item wow fadeInUp" data-wow-delay=".5s">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className="content">
|
||||
<span><img src={item.icon} alt="" /> {item.title}-</span>
|
||||
<p>{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<ul className="list wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.features.map((feature, index) => (
|
||||
<li key={index}>
|
||||
<i className="fa-solid fa-chevrons-right"></i>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".5s">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhyChooseUs;
|
||||
514
app/components/home/home.css
Normal file
514
app/components/home/home.css
Normal file
@@ -0,0 +1,514 @@
|
||||
/* ============================================================
|
||||
HOME PAGE — shared styles
|
||||
============================================================ */
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Hero Section
|
||||
------------------------------------------------------------ */
|
||||
.hero-home {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 560px;
|
||||
background-color: #1b254b;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-home__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.hero-home__bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.hero-home__gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to right, #1b254b, rgba(27, 37, 75, 0.9), transparent);
|
||||
}
|
||||
|
||||
.hero-home__container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.hero-home__container {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-home__content {
|
||||
max-width: 42rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.hero-home__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.hero-home__badge-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: #60a5fa;
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.hero-home__badge-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #bfdbfe;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.hero-home__title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.hero-home__title {
|
||||
font-size: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.hero-home__desc {
|
||||
font-size: 1.125rem;
|
||||
color: #bfdbfe;
|
||||
line-height: 1.7;
|
||||
max-width: 36rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.hero-home__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.hero-home__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hero-home__btn--primary {
|
||||
background: #ffffff;
|
||||
color: #1b254b;
|
||||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.hero-home__btn--primary:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.hero-home__btn--secondary {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.hero-home__btn--secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Research Impact Section
|
||||
------------------------------------------------------------ */
|
||||
.research-impact {
|
||||
padding: 80px 0;
|
||||
background-color: #f8fbff;
|
||||
}
|
||||
|
||||
.research-impact__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.research-impact__title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.research-impact__year {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
background: #e5e7eb;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.research-impact__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.research-impact__stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.research-impact__stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.research-impact__stat-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.research-impact__stat-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.research-impact__stat-value-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.research-impact__stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.research-impact__stat-trend {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.research-impact__stat-trend--up {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.research-impact__stat-trend--down {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.research-impact__stat-trend--stable {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.research-impact__stat-sub {
|
||||
font-size: 0.8rem;
|
||||
color: #9ca3af;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.research-impact__charts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.research-impact__charts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.research-impact__chart-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 1.75rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.research-impact__chart-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.research-impact__chart-sub {
|
||||
font-size: 0.8rem;
|
||||
color: #9ca3af;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.research-impact__bar-chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 1.5rem;
|
||||
height: 160px;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.research-impact__bar-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.research-impact__bar {
|
||||
width: 100%;
|
||||
border-radius: 6px 6px 0 0;
|
||||
min-height: 8px;
|
||||
transition: height 0.4s ease;
|
||||
}
|
||||
|
||||
.research-impact__bar--journals {
|
||||
background: #1b254b;
|
||||
}
|
||||
|
||||
.research-impact__bar--conferences {
|
||||
background: #74c0fc;
|
||||
}
|
||||
|
||||
.research-impact__bar-label {
|
||||
font-size: 0.78rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.research-impact__donut-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.research-impact__donut {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
-webkit-mask: radial-gradient(circle, transparent 40%, black 41%);
|
||||
mask: radial-gradient(circle, transparent 40%, black 41%);
|
||||
}
|
||||
|
||||
.research-impact__legend {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.research-impact__legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.research-impact__legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.research-impact__legend-label {
|
||||
color: #374151;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.research-impact__legend-value {
|
||||
font-weight: 600;
|
||||
color: #1b254b;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Quick Links Grid
|
||||
------------------------------------------------------------ */
|
||||
.quick-links {
|
||||
padding: 80px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.quick-links__header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.quick-links__title {
|
||||
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.quick-links__subtitle {
|
||||
color: #6b7280;
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.quick-links__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.quick-links__grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.quick-links__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-links__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f8fbff;
|
||||
padding: 2rem;
|
||||
border-radius: 1.5rem;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quick-links__card:hover {
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
border-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.quick-links__icon-wrap {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: #1b254b;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.quick-links__card:hover .quick-links__icon-wrap {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.quick-links__card-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #1b254b;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.quick-links__card-desc {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.quick-links__card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quick-links__cta {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #1b254b;
|
||||
}
|
||||
|
||||
.quick-links__arrow {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background: #1b254b;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.quick-links__card:hover .quick-links__arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user