MetatroncubeSoftwareSolutions/janahan-law
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

about page structure completed

Browse Source
This commit is contained in:
Selvi 2025-08-14 12:20:15 +05:30
parent d85a50bf7c
commit 6ba255bfa4
5 changed files with 77 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/aboutPage/Donors.js
View File

@ -8,7 +8,7 @@ const ClickHandler = () => {
const Donors = () => {
return (
<section className="wpo-donors-section section-padding">
<section className="wpo-donors-section section-padding3">
<div className="container">
<div className="wpo-donors-wrap">
<div className="row align-items-center">

131
components/aboutPage/TestimonialSection.js
View File

@ -1,123 +1,44 @@
import React, { useState } from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import ts1 from '/public/images/about-s2.jpg'
import ts2 from '/public/images/about-s2.jpg'
import ts3 from '/public/images/about-s2.jpg'
import thumb1 from '/public/images/testimonial/thumb1.png'
import thumb2 from '/public/images/testimonial/thumb2.png'
import thumb3 from '/public/images/testimonial/thumb3.png'
import React from 'react';
import sign from '/public/images/signeture.png';
import Image from 'next/image';
const testimonial = [
{
id: '01',
tImg: ts1,
thumbImg: thumb1,
Des: "Each family we help unite, each professional we guide, and each person we protect adds another thread to the rich tapestry.",
Title: 'Robert Willum',
Sub: "President of BPT",
},
{
id: '02',
tImg: ts2,
thumbImg: thumb2,
Des: "Helping individuals achieve their dreams and secure their future strengthens the very fabric of our nation, one story at a time.",
Title: 'Leslie Alexander',
Sub: "President of TBP",
},
{
id: '03',
tImg: ts3,
thumbImg: thumb3,
Des: "Every life we touch, every opportunity we create, contributes to the promise of hope and progress that defines America.",
Title: 'David Joy',
Sub: "President of AML",
}
]
import Link from 'next/link';
const TestimonialSection = (props) => {
const [nav1, setNav1] = useState();
const [nav2, setNav2] = useState();
return (
<section className={`wpo-testimonial-section ${props.tmClass}`}>
<section className={`wpo-about-section section-padding3 ${props.abClass}`}>
<div className="container">
<div className="wpo-testimonial-wrap">
<div className="wpo-about-wrap">
<div className="row align-items-center">
<div className="col-lg-6 col-12 order-lg-1 order-1">
<div class="wpo-section-title-new">
<h2>Where Every Case Contributes to America's Greatness!</h2>
</div>
<div className="wpo-testimonial-items">
<div className="right-slide">
<Slider asNavFor={nav2} ref={(slider1) => setNav1(slider1)} dots={true} arrows={false}>
{
testimonial.map((tesmnl, tsm) => (
<div className="wpo-testimonial-item" key={tsm}>
<div className="wpo-testimonial-text">
<i className="fi flaticon-right-quote-sign"></i>
<p>“{tesmnl.Des}”</p>
{/* <div className="wpo-testimonial-text-btm">
<div className="wpo-testimonial-text-btm-img">
<Image src={tesmnl.thumbImg} alt=""/>
</div>
<div className="wpo-testimonial-text-btm-info">
<h3>{tesmnl.Title}</h3>
<span>{tesmnl.Sub}</span>
</div>
</div> */}
</div>
</div>
))
}
</Slider>
</div>
</div>
</div>
<div className="col-lg-6 col-12 order-lg-1 order-2">
<div className="testimonial-left">
<div className="testimonial-left-inner">
<div className="left-slide">
<Slider
asNavFor={nav1}
ref={(slider2) => setNav2(slider2)}
slidesToShow={1}
fade={true}
dots={false}
arrows={false}
swipeToSlide={true}
focusOnSelect={true}
>
{
testimonial.map((tesmnl, tsm) => (
<div className="testimonial-img" key={tsm}>
<Image src={tesmnl?.tImg} alt="" />
</div>
))
}
</Slider>
</div>
{/* <div className="shape-1"></div>
<div className="border-s1"></div>
<div className="border-s2"></div>
<div className="border-s3"></div> */}
<div className="col-lg-6 col-md-12 col-12 order-1 order-lg-2">
<div className="wpo-about-img">
<Image src={props.abimg} alt="About Image" />
</div>
</div>
{/* Text Column — Show first on mobile, second on desktop */}
<div className="col-lg-6 col-md-12 col-12 order-2 order-lg-1 mb-5">
<div className="wpo-about-text">
<div className="wpo-section-title">
<span>Our Mission</span>
<h2>Transforming Immigration Through Advocacy</h2>
</div>
<p>
At Janhanlaw, our mission extends far beyond legal representation - we are dedicated to transforming the immigration experience through compassionate advocacy, strategic excellence, and unwavering commitment to justice. For over 25 years, we have stood as a beacon of hope for individuals and families navigating the complex landscape of U.S. immigration law.
</p>
</div>
<div className="close-form mt-5">
<Link className="theme-btn" href="/about/our-mission"><span className="text">Know More</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
};
export default TestimonialSection;

44
components/aboutPage/TestimonialSection2.js Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import sign from '/public/images/signeture.png';
import Image from 'next/image';
import Link from 'next/link';
const TestimonialSection2 = (props) => {
return (
<section className={`wpo-about-section section-padding3 ${props.abClass}`}>
<div className="container">
<div className="wpo-about-wrap">
<div className="row align-items-center">
{/* Text Column — Show first on mobile, second on desktop */}
<div className="col-lg-6 col-md-12 col-12 order-1 order-lg-2 mb-5">
<div className="wpo-about-text">
<div className="wpo-section-title">
<span>Racial Justice</span>
<h2>Championing Equal Immigration Rights</h2>
</div>
<p>
At Janhanlaw, we recognize that the pursuit of justice in immigration law cannot be separated from the fight against racial discrimination and systemic bias. For over 25 years, we have witnessed how racial prejudice can influence immigration decisions, from consular officer interviews to immigration court proceedings, affecting families from specific countries and communities disproportionately.
</p>
</div>
<div className="close-form mt-5">
<Link className="theme-btn" href="/about/racial-justice"><span className="text">Know More</span>
</Link>
</div>
</div>
<div className="col-lg-6 col-md-12 col-12 order-2 order-lg-1">
<div className="wpo-about-img">
<Image src={props.abimg} alt="About Image" />
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default TestimonialSection2;

4
pages/about/index.js
View File

@ -16,6 +16,7 @@ import AboutSection from '../../components/aboutPage/AboutSection';
import ServicesSection from '../../components/aboutPage/SevicesSection';
import TeamsSection from '../../components/aboutPage/TeamSection';
import TestimonialSection from '../../components/aboutPage/TestimonialSection';
import TestimonialSection2 from '../../components/aboutPage/TestimonialSection2';
const AboutPage = () => {
return (
@ -27,7 +28,8 @@ const AboutPage = () => {
{/* <CampaignSection /> */}
{/* <Testimonial /> */}
{/* <FunFact /> */}
<TestimonialSection/>
<TestimonialSection abimg={abimg}/>
<TestimonialSection2 abimg={abimg}/>
{/* <TeamsSection /> */}
<Donors />
{/* <PartnerSection/> */}

2
styles/sass/page/_home-default.scss
View File

@ -211,7 +211,7 @@
.wpo-about-img-text {
width: 237.48px;
height: 237.48px;
background: linear-gradient(90deg, #ED6B37 11.32%, #EC180C 95.28%);
background: #c12026;
display: flex;
justify-content: center;
align-items: center;