Welcome to
Academic Bridge English School
Starting the dream in September 2012 Academic Bridge Ltd opened its doors to students from all over the world to study and enjoy learning the English Language. Over the past three years we have grown from having only 10 students in the school to 300 students attending our school.
GET A QUOTE
Learn English in Ireland
HOW TO STUDY WITH US
Choose your consultant
Our consultants are experts in cultural exchanges. They will guide you through every step of the process.
Documents
After settling your course fees, you will receive an enrolment letter, a document confirming your attendance at the school, allowing you to travel with peace of mind and security.
Induction Day
A warm welcome for our students, during which we go over all the school’s rules and offer valuable tips to ensure the success of your exchange.
About Us
Starting the dream in September 2012 Academic Bridge Ltd opened its doors to students from all over the world to study and enjoy learning the English Language. Over the past three years we have grown from having only 10 students in the school to 300 students attending our school.
As a school we want to become the best and most memorable chain of English schools around the globe. We will do this by providing an unforgettable learning experience for students and deliver the best customer service in the existing market. Students’ happiness is our main concern in this company. We believe that if we work together as a team we will be able to reach both the dreams of the students and that of the school.
OUR SERVICES
TESTIMONIALS
I was very happy to be able to learn english in Ireland studying at Academic Bridge. My teachers and classmates are so nice! I am grateful for all the support given by the marketing team! It has been a great experience so far!
Academic Bridge is a great school, all the staff are lovely and they take their role as a school very seriously. There is an awesome students’ lounge, a huge yard for events and classes are always fun! I LOVE AB!
It’s a very good school! Academic Bridge gave me all the support that the agency did not give me. And the staff are friendly and helpful.
// components/ThreeDCarousel.tsx
"use client";
import React, {
useRef,
useEffect,
useState,
TouchEvent,
} from "react";
import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
import { Card, CardContent } from "@/app/component2/ui/card";
import { useIsMobile } from "../hooks/use-mobile";
import Link from "next/link";
export interface ThreeDCarouselItem {
id: number;
title: string;
brand: string;
description: string;
tags: string[];
imageUrl: string;
link: string;
}
interface ThreeDCarouselProps {
items: ThreeDCarouselItem[];
autoRotate?: boolean;
rotateInterval?: number;
cardHeight?: number;
title?: string;
subtitle?: string;
tagline?: string;
isMobileSwipe?: boolean;
}
const ThreeDCarousel = ({
items,
autoRotate = true,
rotateInterval = 4000,
cardHeight = 500,
title = "From Textile to Intelligence",
subtitle = "Customer Cases",
tagline = "Explore how our textile sensor technology is revolutionizing multiple industries with intelligent fabric solutions tailored to specific needs.",
isMobileSwipe = true,
}: ThreeDCarouselProps) => {
const [active, setActive] = useState(0);
const carouselRef = useRef<HTMLDivElement>(null);
const [isInView, setIsInView] = useState(false);
const [isHovering, setIsHovering] = useState(false);
const [touchStart, setTouchStart] = useState<number | null>(null);
const [touchEnd, setTouchEnd] = useState<number | null>(null);
const isMobile = useIsMobile();
const minSwipeDistance = 50;
useEffect(() => {
if (autoRotate && isInView && !isHovering) {
const interval = setInterval(() => {
setActive((prev) => (prev + 1) % items.length);
}, rotateInterval);
return () => clearInterval(interval);
}
}, [isInView, isHovering, autoRotate, rotateInterval, items.length]);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => setIsInView(entry.isIntersecting),
{ threshold: 0.2 }
);
return () => observer.disconnect();
}, []);
const onTouchStart = (e: TouchEvent) => {
setTouchStart(e.targetTouches[0].clientX);
setTouchEnd(null);
};
const onTouchMove = (e: TouchEvent) => {
setTouchEnd(e.targetTouches[0].clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd;
if (distance > minSwipeDistance) {
setActive((prev) => (prev + 1) % items.length);
} else if (distance < -minSwipeDistance) {
setActive((prev) => (prev - 1 + items.length) % items.length);
}
};
const getCardAnimationClass = (index: number) => {
if (index === active) return "scale-100 opacity-100 z-20";
if (index === (active + 1) % items.length)
return "translate-x-[40%] scale-95 opacity-60 z-10";
if (index === (active - 1 + items.length) % items.length)
return "translate-x-[-40%] scale-95 opacity-60 z-10";
return "scale-90 opacity-0";
};
return (
<section
id="ThreeDCarousel"
className="bg-transparent min-w-full mx-aut
flex items-center justify-center"
>
<div
className="w-full px-4 sm:px-6 lg:px-8
min-w-[350px] md:min-w-[1000px] max-w-7xl "
>
<div
className="relative overflow-hidden h-[550px] "
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
ref={carouselRef}
>
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center ">
{items.map((item, index) => (
<div
key={item.id}
className={`absolute top-0 w-full max-w-md transform transition-all duration-500 ${getCardAnimationClass(
index
)}`}
>
<Card
className={`overflow-hidden bg-background h-[${cardHeight}px] border shadow-sm
hover:shadow-md flex flex-col`}
>
<div
className="relative bg-black p-6 flex items-center justify-center h-48 overflow-hidden"
style={{
backgroundImage: `url(${item.imageUrl})`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
<div className="absolute inset-0 bg-black/50" />
<div className="relative z-10 text-center text-white">
<h3 className="text-2xl font-bold mb-2">
{item.brand.toUpperCase()}
</h3>
<div className="w-12 h-1 bg-white mx-auto mb-2" />
<p className="text-sm ">{item.title}</p>
</div>
</div>
<CardContent className="p-6 flex flex-col flex-grow">
<h3 className="text-xl font-bold mb-1 text-foreground">
{item.title}
</h3>
<p className="text-gray-500 text-sm font-medium mb-2">
{item.brand}
</p>
<p className="text-gray-600 text-sm flex-grow">
{item.description}
</p>
<div className="mt-4">
<div className="flex flex-wrap gap-2 mb-4">
{item.tags.map((tag, idx) => (
<span
key={idx}
className="px-2 py-1 bg-gray-50 text-gray-600 rounded-full text-xs animate-pulse-slow"
>
{tag}
</span>
))}
</div>
<a
href={item.link}
className="text-gray-500 flex items-center hover:underline relative group"
onClick={() => {
if (item.link.startsWith("/")) {
window.scrollTo(0, 0);
}
}}
>
<span className="relative z-10">Learn more</span>
<ArrowRight className="ml-2 w-4 h-4 relative z-10 transition-transform group-hover:translate-x-1" />
<span className="absolute left-0 bottom-0 w-0 h-0.5 bg-gray-500 transition-all duration-300 group-hover:w-full"></span>
</a>
</div>
</CardContent>
</Card>
</div>
))}
</div>
{!isMobile && (
<>
<button
className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center text-gray-500 hover:bg-white z-30 shadow-md transition-all hover:scale-110"
onClick={() =>
setActive((prev) => (prev - 1 + items.length) % items.length)
}
aria-label="Previous"
>
<ChevronLeft className="w-5 h-5" />
</button>
<button
className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 rounded-full flex items-center justify-center text-gray-500 hover:bg-white z-30 shadow-md transition-all hover:scale-110"
onClick={() => setActive((prev) => (prev + 1) % items.length)}
aria-label="Next"
>
<ChevronRight className="w-5 h-5" />
</button>
</>
)}
<div className="absolute bottom-6 left-0 right-0 flex justify-center items-center space-x-3 z-30">
{items.map((_, idx) => (
<button
key={idx}
className={`w-2 h-2 rounded-full transition-all duration-300 ${
active === idx
? "bg-gray-500 w-5"
: "bg-gray-200 hover:bg-gray-300"
}`}
onClick={() => setActive(idx)}
aria-label={`Go to item ${idx + 1}`}
/>
))}
</div>
</div>
</div>
</section>
);
};
export default ThreeDCarousel;