Skip to content

Commit

Permalink
feat(page): style about us
Browse files Browse the repository at this point in the history 
style about us page and add responsiveness

close #25
  • Loading branch information
@darinetag
darinetag committed Nov 18, 2023
1 parent 64052ef commit 287dbc7
Show file tree
Hide file tree
Showing 11 changed files with 92 additions and 69 deletions.
Binary file removed public/images/2.png
View file
Binary file not shown.
Binary file added public/images/aboutus.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/images/developer1.jfif
View file
Binary file not shown.
Binary file added public/images/developer1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/ecology.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/laid benglia.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/mohamed-ch.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/sara bagach.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/sharing.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 5 additions & 3 deletions src/components/developeravatar/DeveloperAvatar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import Link from "next/link";
const DeveloperAvatar = ({ name, avatarUrl, description, href }) => {
return (
<Link href={href}>
<div className='text-center flex flex-col items-center justify-center w-full md:w-80 rounded-lg p-4 border border-gray hover:bg-slate-100'>
<div className=' relative w-32 h-32 md:w-20 md:h-20 lg:w-36 lg:h-36 mb-2 mx-auto '>
<div className=' text-center group-hover:scale-[10] flex flex-col items-center cursor-pointer overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl justify-center w-full md:w-80 rounded-3xl p-4 hover:bg-slate-100'>
<div className='relative w-32 h-32 md:w-20 md:h-20 lg:w-36 lg:h-36 mb-2 mx-auto '>
<Image
src={avatarUrl}
alt={`${name}'s Avatar`}
Expand All @@ -14,7 +14,9 @@ const DeveloperAvatar = ({ name, avatarUrl, description, href }) => {
layout='fill'
/>
</div>
<p className='text-xl font-semibold my-2'>{name}</p>
<p className='text-xl text-lime-800 font-semibold my-2'>
{name}
</p>
<p className='text-black text-base w-4/5 md:w-full '>
{description}
</p>
Expand Down
153 changes: 87 additions & 66 deletions src/pages/about/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,98 @@
import Image from "next/image";
import Link from "next/link";

import DeveloperAvatar from "@/components/developeravatar/DeveloperAvatar";

function AboutPage() {
return (
<section className='container mx-auto'>
<div className='lg:grid grid-cols-10 lg:flex-row flex-col'>
<div className='lg:my-28 lg:col-span-5'>
<p className='m-20 text-xl'>
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Ullam, quia ad alias non saepe aliquid, totam,
aliqu perspiciatis optio doloribus debitis vero
voluptates esse. Voluptatum nihil nam fuga minima! quis
nostr exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<div className='lg:col-span-5 lg:order-first'>
<Image
className='lg:m-0 lg:w-11/12 w-3/4 mx-0'
src='/images/about.jpg'
width={300}
height={300}
alt='hero image'
/>
<section>
<div className='bg-gradient-to-tr from-lime-400 via-white to-white'>
<div className='sm:flex flex flex-row items-center max-w-screen-xl flex-wrap-reverse p-10 lg:p-0'>
<div className='sm:w-1/2 lg:pb-24 pb-16 pt-20 lg:pl-32 pl-1'>
<div className='display block lg:h-80 lg:w-96 max-w-screen-xl max-h-96'>
<Image
className='w-10/12 h-96 blur-sm drop-shadow-2xl flex items-center justify-center'
src='/images/aboutus.png'
width={500}
height={500}
alt='hero'
/>
</div>
</div>
<div className='sm:w-1/2 p-5'>
<div className='text'>
<span className='text-gray-500 border-b-2 border-lime-600 uppercase'>
About us
</span>

<h2 className='my-4 font-bold text-3xl sm:text-4xl '>
Who{" "}
<span className='text-lime-600'>We Are</span>
</h2>
<p className='text-gray-700'>
Welcome to Let&apos;s Share - where sharing is
caring! In our community, we believe in the
heartwarming essence of sharing daily
essentials. Extra food, lovely clothes, or cozy
furniture - at Let&apos;s Share, it&apos;s about
connecting and making a positive impact right
where you are. Let&apos;s transform our region
into a haven of shared moments. Join Let&apos;s
Share, where sharing isn&apos;t just a choice;
it&apos;s a way of life.
</p>
</div>
</div>
</div>
</div>
<div className='flex flex-wrap justify-center mt-20 mb-20'>
<div className='text-center w-full mb-4'>
<h1 className='text-2xl font-bold'>Our Team</h1>

<div className='bg-gradient-to-br from-lime-400 via-white to-white'>
<div className='flex flex-wrap justify-center mb-20'>
<div className='text-center w-full mb-4'>
<h1 className='text-3xl font-bold p-12'>Our Team</h1>
</div>
{/* Developer 1 */}
<DeveloperAvatar
name='Darine Tag'
avatarUrl='/images/developer1.png'
description='Visionary creator of seamless, stunning user experiences.'
href='https://www.linkedin.com/in/darine-tag/'
/>
{/* Developer 2 */}
<DeveloperAvatar
name='Hadj Said Bouras'
avatarUrl='/images/developer2.jfif'
description='Meticulous architect, crafting clean, efficient, pixel-perfect interfaces.'
href='https://www.linkedin.com/in/hadj-said-front-end-web-developer-a577a8255/'
/>
{/* Developer 3 */}
<DeveloperAvatar
name='Ismail Benlaredj'
avatarUrl='/images/developer3.jfif'
description='Dynamic innovator, blends energy, tech trends for excellence.'
href='https://www.linkedin.com/in/ismailbenlaredj/'
/>
{/* Developer 4 */}
<DeveloperAvatar
name='Mohamed Cheraitia'
avatarUrl='/images/mohamed-ch.jpg'
description='Versatile engineer, seamlessly blends creativity with technicality.'
href='https://www.linkedin.com/in/mohamed-ch-947939272/'
/>
{/* Developer 5 */}
<DeveloperAvatar
name='Laid Benglia'
avatarUrl='/images/laid benglia.jpg'
description='Front-end magician, turns ideas into interactive wonders.'
href='https://www.linkedin.com/in/laid-benglia-452013199/'
/>
{/* Developer 6 */}
<DeveloperAvatar
name='sara Bagache'
avatarUrl='/images/sara bagach.jpg'
description='Pragmatic developer, builds robust, scalable, user-friendly applications.'
href='https://github.com/SaraBegache'
/>
</div>
{/* Developer 1 */}
<DeveloperAvatar
name='Developer 1'
avatarUrl='/images/developer1.jfif'
description='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
href='https://www.linkedin.com/in/darine-tag/'
/>
{/* Developer 2 */}
<DeveloperAvatar
name='Hadj Said Bouras'
avatarUrl='/images/developer2.jfif'
description='Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
href='https://www.linkedin.com/in/hadj-said-front-end-web-developer-a577a8255/'
/>
{/* Developer 3 */}
<DeveloperAvatar
name='Developer 3'
avatarUrl='/images/developer3.jfif'
description='Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.'
href='/developer3'
/>
{/* Developer 4 */}
<DeveloperAvatar
name='Developer 4'
avatarUrl='/images/developer4.jpg'
description='Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
href='/developer4'
/>
{/* Developer 5 */}
<DeveloperAvatar
name='Developer 5'
avatarUrl='/images/developer5.jpg'
description='Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
href='/developer5'
/>
{/* Developer 6 */}
<DeveloperAvatar
name='Developer 6'
avatarUrl='/images/developer6.jpg'
description='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
href='/developer6'
/>
</div>
</section>
);
Expand Down

0 comments on commit 287dbc7

Please sign in to comment.