Skip to content

Commit

Permalink
UPD:ResponsiveNess_added
Browse files Browse the repository at this point in the history
  • Loading branch information
shayan-cyber committed Jul 21, 2024
1 parent bcef354 commit 33f98b3
Show file tree
Hide file tree
Showing 16 changed files with 424 additions and 133 deletions.
117 changes: 68 additions & 49 deletions components/HomePage/Features.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,32 +13,32 @@ const features = [
{
title: '100+ Templates',
description: 'ResumCraft\'s experience and features library make customization easy. Powering over 100 templates, you can easily create a personalized resume that reflects your skills, experiences, and career goals.',
icon: <TbTemplate className='text-4xl text-center' />
icon: <TbTemplate className='text-xl lg:text-4xl text-center' />
},
{
title: 'Customizable',
description: 'Create your own customized resume tailored to your career goals and skills. Simply upload your resume and select the template you want to use, and ResumCraft will generate a personalized resume for you.',
icon: <LuSettings className='text-4xl text-center' />
icon: <LuSettings className='text-xl lg:text-4xl text-center' />
},
{
title: 'Save Changes',
description: 'Save your changes to resume and resume history. ResumCraft will automatically save your changes and generate a personalized resume for you.',
icon: <FiSave className='text-4xl text-center' />
icon: <FiSave className='text-xl lg:text-4xl text-center' />
},
{
title: 'Resume Score',
description: 'Resume Score is a tool that helps you to evaluate your resume. It provides a score based on your resume and highlights areas that need improvement.',
icon: <SiSpeedtest className='text-4xl text-center' />
icon: <SiSpeedtest className='text-xl lg:text-4xl text-center' />
},
{
title: 'Suggestions',
description: 'ResumCraft will suggest improvements to your resume based on your skills and experiences. It will help you to improve your resume and make it more effective.',
icon: <BsFillLightningChargeFill className='text-4xl text-center' />
icon: <BsFillLightningChargeFill className='text-xl lg:text-4xl text-center' />
},
{
title: 'AI Assistance',
description: 'ResumCraft will provide AI assistance to help you create a personalized resume. It will analyze your resume and provide suggestions to improve your resume.',
icon: <TbBrain className='text-4xl text-center' />
icon: <TbBrain className='text-xl lg:text-4xl text-center' />
},
]

Expand All @@ -47,95 +47,114 @@ function Features() {
const interval = useRef(null)
useEffect(() => {

interval.current = setInterval(() => {
setSelected((prev)=>{
if(prev === features.length-1){
interval.current = setInterval(() => {
setSelected((prev) => {
if (prev === features.length - 1) {
return 0
}
return prev+1
return prev + 1
})
}, 7000)
}, 4000)
return () => clearInterval(interval.current)
}, [])

return (
<div className="py-12 relative">
<div className="absolute bottom-0 w-full z-[1] h-full bg-[url('/images/gradient-bg.jpg')] bg-no-repeat bg-center ">

<div className="absolute inset-0 pt-[25rem] z-[1] flex justify-center items-baseline">
<div className='w-[120vw] max-w-[90rem] h-[80vh] bg-[url("/images/gradient-bg.jpg")] bg-no-repeat bg-center '></div>
</div>
<div className='z-[5] relative'>
<h1 className='text-7xl font-bold text-center'>Make your own</h1>
<h1 className='text-7xl font-[100] text-center'>Customized</h1>
<h1 className='text-7xl font-bold text-center underline decoration-dashed decoration-purple-400'>Resume</h1>
<div className='flex justify-center items-center'>
<p className='text-center text-2xl py-6 w-1/2'>
ResumCraft's experience and features library make customization easy. Powering over 100 templates, you can easily create a personalized resume that reflects your skills, experiences, and career goals.
<h1 className='text-3xl lg:text-7xl font-bold text-center'>Make your own</h1>
<h1 className='text-3xl lg:text-7xl font-[100] text-center'>Customized</h1>
<h1 className='text-3xl lg:text-7xl font-bold text-center underline decoration-dashed decoration-purple-400'>Resume</h1>
<div className='flex justify-center items-center lg:px-0 px-3'>
<p className='text-center text-lg lg:text-2xl py-6 lg:w-1/2'>
ResumCraft&apos;s experience and features library make customization easy. Powering over 100 templates, you can easily create a personalized resume that reflects your skills, experiences, and career goals.
</p>
</div>
<div className="flex gap-4 py-12 w-full">
<Splide options={{
type : 'loop',
drag : 'free',
focus : 'center',
gap : '1rem',
perPage: 6,
arrows : false,
pagination: false,
autoScroll: {
speed: 1,
pauseOnHover: true,
},
}}
extensions={{AutoScroll}}
className='w-full'
aria-label="My Favorite Images">



<div className=" gap-4 py-12 w-full hidden lg:flex ">
<Splide options={{
type: 'loop',
drag: 'free',
focus: 'center',
gap: '1rem',
perPage: 6,
arrows: false,
pagination: false,
autoScroll: {
speed: .5,
pauseOnHover: true,
},
}}
extensions={{ AutoScroll }}
className='w-full'
aria-label="Features">

{
features.map((feature, index) => (
<SplideSlide key={index}>
<div className=' flex justify-center cursor-pointer hover:bg-white hover:bg-opacity-20 hover:backdrop-blur-2xl hover:border-2 hover:border-white hover:border-opacity-20 py-2 rounded-2xl' onClick={()=>{
<div className=' flex justify-center cursor-pointer border-2 border-transparent opacity-70 hover:opacity-100 hover:bg-white hover:bg-opacity-20 hover:backdrop-blur-2xl hover:border-2 hover:border-white hover:border-opacity-20 py-2 rounded-2xl' onClick={() => {
clearInterval(interval.current)
setSelected(index)
}}>

<div className='flex flex-col justify-center items-center' key={index}>
{feature.icon}
<h1 className='text-lg mt-2 font-semibold'>{feature.title}</h1>
<h1 className='text-[.5rem] lg:text-lg mt-1 font-[550]'>{feature.title}</h1>
</div>
</div>
</SplideSlide>

))
}

</Splide>
</div>
<div className=" gap-4 py-12 w-full flex lg:hidden ">
<Splide options={{
type: 'loop',
drag: 'free',
focus: 'center',
gap: '1rem',
perPage: 4,
arrows: false,
pagination: false,
autoScroll: {
speed: .5,
pauseOnHover: true,
},
}}
extensions={{ AutoScroll }}
className='w-full'
aria-label="Features">

{
features.map((feature, index) => (
<SplideSlide key={index}>
<div className='flex justify-center cursor-pointer hover:bg-white hover:bg-opacity-20 hover:backdrop-blur-2xl hover:border-2 hover:border-white hover:border-opacity-20 py-2 rounded-2xl' onClick={()=>{
<div className=' flex justify-center cursor-pointer border-2 border-transparent opacity-70 hover:opacity-100 hover:bg-white hover:bg-opacity-20 hover:backdrop-blur-2xl hover:border-2 hover:border-white hover:border-opacity-20 py-2 rounded-2xl' onClick={() => {
clearInterval(interval.current)
setSelected(index)
}}>

<div className='flex flex-col justify-center items-center' key={index}>
{feature.icon}
<h1 className='text-lg mt-2 font-semibold'>{feature.title}</h1>
<h1 className='text-[.65rem] lg:text-lg mt-1 font-[550]'>{feature.title}</h1>
</div>
</div>
</SplideSlide>

))
}
</Splide>
}

</Splide>
</div>

<div className='py-6 flex justify-center items-center '>
<div className='py-6 flex justify-center items-center lg:px-0 px-3'>

<div className='rounded-2xl w-1/2 h-[300px] bg-black text-white p-8 flex flex-col justify-between hover:rounded-[3rem] transition-all duration-300 items-start'>
<div className='rounded-2xl w-full lg:w-1/2 h-[300px] bg-black text-white p-8 flex flex-col justify-between hover:rounded-[3rem] transition-all duration-300 items-start'>
<div>
<h1 className='text-2xl font-bold'>{features[selected].title}</h1>
<p className='text-lg mt-2'>{features[selected].description}</p>
<h1 className='text-xl lg:text-2xl font-bold'>{features[selected].title}</h1>
<p className='text-base lg:text-lg mt-2'>{features[selected].description}</p>
</div>

<button className='bg-white text-black border-black border-2 p-2 px-4 rounded-lg flex justify-center items-center gap-2 mt-2 hover:scale-95 transition-all duration-300'>
Expand Down
46 changes: 46 additions & 0 deletions components/HomePage/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react'
import { GoArrowRight } from "react-icons/go";
function Footer() {
return (
<div className="bg-[url('/images/bg-gradient-dark.jpg')] mt-20 z-10 relative bg-[#1a1919] bg-no-repeat bg-center bg-cover py-12 px-8 flex justify-center rounded-t-[3rem] lg:rounded-t-[8rem]">
<div className='md:w-1/2 pt-12 lg:pt-32 pb-4 text-white'>
<h1 className='text-2xl lg:text-5xl font-bold text-center'>Countless success stories and counting…</h1>
<h1 className='text-2xl lg:text-5xl font-[100] text-center'>Make your own</h1>
<div className='flex justify-center items-center mt-12'>
<button className='bg-white text-black p-2 px-8 rounded-lg flex justify-center items-center gap-2 mt-2 hover:scale-95 hover:rounded-2xl transition-all duration-300'>
<p className='text-sm lg:text-xl'>Get Started now for free</p>
<GoArrowRight className='text-xl' />
</button>

</div>

<div className='grid grid-cols-3 gap-2 lg:gap-8 mt-32'>
<div>
<h1 className='text-sm lg:text-2xl font-semibold'>Product</h1>
<h1 className='mt-1 lg:text-base text-xs'>Select template</h1>
<h1 className='mt-1 lg:text-base text-xs'>Use default template</h1>

</div>
<div className='text-center'>
<h1 className='text-sm lg:text-2xl font-semibold'>Company</h1>
<h1 className='mt-1 lg:text-base text-xs'>About</h1>
<h1 className='mt-1 lg:text-base text-xs'>Blog</h1>


</div>
<div className='text-right'>
<h1 className='text-sm lg:text-2xl font-semibold'>Connect</h1>
<h1 className='mt-1 lg:text-base text-xs'>Linkedin</h1>
<h1 className='mt-1 lg:text-base text-xs'>Github</h1>


</div>

</div>

</div>
</div>
)
}

export default Footer
17 changes: 7 additions & 10 deletions components/HomePage/Hero.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import Typewriter from 'typewriter-effect';
function Hero() {

return (
<div className="h-[auto] w-full bg-[url('/images/bg-gradient.png')] bg-no-repeat bg-opacity-5 px-20 pt-16 pb-4">
<div className="h-[60vh] lg:h-[auto] w-full bg-[url('/images/bg-gradient.png')] bg-center bg-no-repeat bg-opacity-5 px-3 lg:px-20 pt-16 pb-4">
<div className='flex justify-center items-center'>

<h1 className='text-8xl text-center font-[1000]'>Build Your Perfect Resume with <br></br><span className="animate-type"><Typewriter
<h1 className='text-4xl lg:text-8xl text-center font-[1000]'>Build Your Perfect Resume with <br></br><span className="animate-type"><Typewriter
options={{
strings: ['Ease and ', 'Precision ,', 'Tailored'],
autoStart: true,
Expand All @@ -18,16 +18,13 @@ function Hero() {
/></span><span className="font-[100]">for Your Dream Job</span></h1>
</div>

<div className='flex justify-center py-6'>

<div className='w-1/2'>
<p className='text-2xl text-center'>Create a professional resume tailored to your dream job with our user-friendly builder. Choose from customizable templates, highlight your skills, and craft a standout resume in minutes.</p>
</div>

</div>

<div className='flex justify-center py-6 px-5 lg:px-0'>

<div className='w-full lg:w-1/2'>
<p className='text-xl lg:text-2xl text-center'>Create a professional resume tailored to your dream job with our user-friendly builder. Choose from customizable templates, highlight your skills, and craft a standout resume in minutes.</p>
</div>

</div>
</div>
)
}
Expand Down
91 changes: 91 additions & 0 deletions components/HomePage/MarqueeText.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import React from 'react'
import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/react-splide/css';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
function MarqueeText() {
return (
<div className='mt-24'>
<Splide options={{
type: 'loop',
drag: 'free',
focus: 'center',
gap: '0rem',
perPage: 2.5,
arrows: false,
pagination: false,
autoScroll: {
speed: 1,
pauseOnHover: true,
},
}}
extensions={{ AutoScroll }}
className='w-full'
aria-label="Features">
<SplideSlide>
<h1 className='text-[1.35rem] md:text-4xl lg:text-8xl uppercase font-bold'>Easy to Use</h1>
</SplideSlide>
<SplideSlide>
<h1 className='text-[1.35rem] md:text-4xl lg:text-8xl uppercase font-bold not-filled'>Easy to Use</h1>
</SplideSlide>
<SplideSlide>
<h1 className='text-[1.35rem] md:text-4xl lg:text-8xl uppercase font-bold '>Easy to Use</h1>
</SplideSlide>
</Splide>
<Splide options={{
type: 'loop',
drag: 'free',
focus: 'center',
gap: '0rem',
perPage: 2,
arrows: false,
pagination: false,
autoScroll: {
speed: -1,
direction: 'right',
pauseOnHover: true,
},
}}
extensions={{ AutoScroll }}
className='w-full'
aria-label="Features">
<SplideSlide>
<h1 className='text-[1.35rem] md:text-4xl lg:text-8xl uppercase font-bold'>Customizable</h1>
</SplideSlide>
<SplideSlide>
<h1 className='text-[1.35rem] md:text-4xl lg:text-8xl uppercase font-bold not-filled'>Customizable</h1>
</SplideSlide>
<SplideSlide>
<h1 className='text-[1.35rem] md:text-4xl lg:text-8xl uppercase font-bold '>Customizable</h1>
</SplideSlide>
</Splide>
<Splide options={{
type: 'loop',
drag: 'free',
focus: 'center',
gap: '0rem',
perPage: 2.5,
arrows: false,
pagination: false,
autoScroll: {
speed: 1,
pauseOnHover: true,
},
}}
extensions={{ AutoScroll }}
className='w-full'
aria-label="Features">
<SplideSlide>
<h1 className='text-[1.35rem] md:text-4xl lg:text-8xl uppercase font-bold'>AI Powered</h1>
</SplideSlide>
<SplideSlide>
<h1 className='text-[1.35rem] md:text-4xl lg:text-8xl uppercase font-bold not-filled'>AI Powered</h1>
</SplideSlide>
<SplideSlide>
<h1 className='text-[1.35rem] md:text-4xl lg:text-8xl uppercase font-bold '>AI Powered</h1>
</SplideSlide>
</Splide>
</div>
)
}

export default MarqueeText
Loading

0 comments on commit 33f98b3

Please sign in to comment.