Skip to content

Commit

Permalink
build: landing page
Browse files Browse the repository at this point in the history 
Signed-off-by: Debojeet Karmakar <debojeetk.cse.jisu21@gmail.com>
  • Loading branch information
@debojeet2004
debojeet2004 committed Jun 29, 2024
1 parent e9df934 commit 82b56ab
Show file tree
Hide file tree
Showing 14 changed files with 193 additions and 110 deletions.
2 changes: 1 addition & 1 deletion app/(home)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ interface HomePageProps {

export default function HomePage({ children }: HomePageProps) {
return (
<div className="container max-w-[90rem] mx-auto px-[.6rem] py-4 flex flex-col items-center gap-4">
<div className="container max-w-[100rem] mx-auto px-[.6rem] py-4 flex flex-col items-center gap-4">
{children}
</div>
);
Expand Down
31 changes: 21 additions & 10 deletions app/(home)/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,29 @@ import Image from 'next/image'
import Security_section from '../../components/home/Security_section'
import Features_section from '@/components/home/Features_section'
import Navbar from '@/components/home/Navbar'
// import VerticalCarousel from '../../components/home/VerticalCarousel';
import Footer from '@/components/home/Footer'
import carasouel from '../../public/assets/carasouel.png'




export default function Home() {
return (
<>
<Navbar />
<div className='flex justify-between w-full items-center'>
<Status_card />
<DemoVideo_card />
<div className='w-full flex flex-col justify-start xl:justify-between items-center md:flex-row md:items-start gap-2'>
<div className='w-full md:w-[60%] xl:w-[65%]'>
<div className='flex justify-start gap-2 md:gap-4 2xl:gap-[5rem] w-full items-center'>
<Status_card />
<DemoVideo_card />
</div>
<Title_card />
</div>
{/* <VerticalCarousel items={items} /> */}
<div className='h-[30rem] md:h-[28rem] xl:h-[34rem] 2xl:h-[46rem] w-[24rem] xl:w-[26rem] 2xl:w-[32rem] rounded-2xl 2xl:rounded-3xl overflow-clip'>
<Image src={carasouel} alt='' className='h-full w-full'/>
</div>
</div>
<Title_card />
{/* <VerticalCarousel items={items} /> */}
<div className='h-[30rem] w-[24rem] border border-white rounded-xl'></div>

<div className='w-full h-[2.5rem] flex justify-between items-center '>
<div className='border border-white w-[7rem] h-[2rem] rounded-full flex justify-start px-3 items-center'>
Expand All @@ -35,9 +43,12 @@ export default function Home() {
<div className='border border-white w-[5rem] h-[2rem] rounded-full'></div>
</div>
</div>
<About_section />
<Security_section />
<Features_section />
<div className='w-full flex flex-col justify-center items-center gap-[10rem]'>
<About_section />
<Security_section />
<Features_section />
</div>
<Footer/>
</>
);
}
10 changes: 5 additions & 5 deletions components/home/About_section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import Button from './Button'

function About_section() {
return (
<div className='w-full h-[25rem] flex justify-between '>
<div className='w-[8rem] h-[8rem] flex flex-col gap-1'>
<p className='font-[sansr]'>(01)</p>
<p className='font-[sansl] text-[.8rem]'>more <span className='font-[sansb]'>about</span> our platform</p>
<div className=' w-full h-[25rem] flex justify-between md:justify-start md:gap-[5rem] lg:gap-[10rem] 2xl:gap-[20rem]'>
<div className=' w-[8rem] md:w-[10rem] h-[8rem] flex flex-col gap-1'>
<p className='font-[sansr] 2xl:text-[1.2rem]'>(01)</p>
<p className='font-[sansl] text-[.8rem] md:text-[1rem] lg:text-[1.1rem] 2xl:text-[1.3rem]'>more <span className='font-[sansb]'>about</span> our platform</p>
</div>
<div className='w-[16rem] flex flex-col justify-start items-start gap-[2rem] text-[1rem]'>
<div className=' md:w-[29rem] lg:w-[30rem] 2xl:[35rem] w-[16rem] flex flex-col justify-start items-start gap-[2rem] text-[1rem] md:text-[1.2rem] lg:text-[1.4rem] 2xl:text-[1.6rem]'>
<div className='flex flex-col justify-center items-center gap-3'>
<p className='font-[sansl]'>our platform is designed to be <span className='font-[sansb]'>user-friendly</span>, <span className='font-[sansb]'>secure</span> and <span className='font-[sansb]'>reliable</span>.</p>
<p className='font-[sansl]'>Post your <span className='font-[sansb]'>ideas</span>, share updates, <span className='font-[sansr] underline decoration-1 underline-offset-4'>engage with the community</span> and attract the <span className='font-[sansb]'>investors</span> all in one place</p>
Expand Down
6 changes: 3 additions & 3 deletions components/home/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import rightarrowb from '../../public/assets/Right arrow black.png'

function Button() {
return (
<div className='border border-white flex justify-between items-center w-[8rem] p-1 rounded-full'>
<p className='w-[8rem] text-center text-[.9rem]'>Read More</p>
<Image src={rightarrowb} alt='' className='bg-white w-[1.5rem] h-[1.5rem] rounded-full p-[.3rem]'/>
<div className='border border-white flex justify-between items-center w-[8rem] lg:w-[10rem] p-1 rounded-full'>
<p className='w-[8rem] text-center text-[.9rem] lg:text-[1rem]'>Read More</p>
<Image src={rightarrowb} alt='' className='bg-white w-[1.5rem] lg:w-[2rem] lg:h-[2rem] h-[1.5rem] rounded-full p-[.3rem]'/>
</div>
)
}
Expand Down
16 changes: 8 additions & 8 deletions components/home/DemoVideo_card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import time from '../../public/assets/time.png'
import eth from '../../public/assets/eth.jpg'
function DemoVideo_card() {
return (
<div className='font-[hand] border-2 border-stone-700 flex justify-between items-center h-[8rem] w-[13.5rem] rounded-2xl overflow-clip p-[.05rem] '>
<div className=' py-[.5rem] px-[.25rem] w-[50%] h-[100%] flex flex-col justify-start gap-2 items-start '>
<div className='border w-[85%] flex justify-center gap-1 items-center text-[.7rem] p-[.2rem] rounded-full border-stone-700'>
<Image src={time} alt='' className='w-[.6rem]'/>
<p className="font-[sansl] text-[.5rem]">4m 35s</p>
<div className='font-[hand] border-2 border-stone-700 flex justify-between items-center h-[8rem] w-[13.5rem] lg:h-[10rem] lg:w-[21rem] xl:w-[30rem] xl:h-[13rem] 2xl:h-[14rem] rounded-2xl overflow-clip p-[.05rem] '>
<div className=' py-[.5rem] px-[.1rem] w-[50%] h-[100%] flex flex-col justify-start gap-2 items-start '>
<div className='border lg:border-[1.5px] lg:ml-2 w-[85%] flex justify-center gap-1 lg:gap-2 items-center text-[.7rem] p-[.2rem] lg:p-[.5rem] xl:p-[.7rem] rounded-full border-stone-700'>
<Image src={time} alt='' className='w-[.6rem] lg:w-[.8rem] xl:w-[1rem]'/>
<p className="font-[sansl] text-[.5rem] lg:text-[.7rem] xl:text-[.8rem]">4m 35s</p>
</div>
<div className='flex flex-col gap-[.4rem]'>
<p className='font-[sansr] text-[1rem]'>Watch demo<br />video</p>
<p className='font-[sansl] text-[.41rem]'>see this video to get a idea about our platform</p>
<div className='flex flex-col gap-[.4rem] lg:ml-2'>
<p className='font-[sansr] lg:font-[sansb] text-[.9rem] lg:text-[1.3rem] xl:text-[1.5rem]'>Watch demo<br />video</p>
<p className='font-[sansl] text-[.41rem] lg:text-[.6rem] xl:text-[.8rem]'>see this video to get a idea about our platform</p>
</div>
</div>
<div className='border bordr-white w-[50%] h-[100%] border-stone-800 rounded-xl overflow-clip'>
Expand Down
50 changes: 25 additions & 25 deletions components/home/Features_section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,41 @@ import Button from './Button'

function Features_section() {
return (
<div className='w-full h-[32rem] flex justify-between items-start'>
<div className='w-[8rem] h-[15rem] flex flex-col gap-2'>
<div className=' w-full h-[32rem] 2xl:h-[35rem] flex justify-between items-start md:justify-start md:gap-[5rem] lg:gap-[10rem] 2xl:gap-[20rem]'>
<div className='w-[8rem] md:w-[10rem] h-[15rem] flex flex-col gap-2'>
<div>
<p className='font-[sansr]'>(03)</p>
<p className='font-[sansm] text-[.8rem]'>Benfits & <br/> Features </p>
<p className='font-[sansm] text-[.8rem] md:text-[1rem] lg:text-[1.2rem]'>Benfits & <br/> Features </p>
</div>
<p className='font-[sansl] text-[.65rem]'>powered by <span>Blockchain technology</span> for secure and <span>transperent transaction</span></p>
<p className='font-[sansl] text-[.65rem] md:text-[.7rem] lg:text-[.8rem]'>powered by <span>Blockchain technology</span> for secure and <span>transperent transaction</span></p>
</div>
<div className='w-[16rem] flex flex-col justify-center items-center gap-2'>
<div className='flex flex-col justify-center items-start gap-2'>
<div className='border border-white w-[16rem] h-[8rem] p-2 rounded-xl flex flex-col justify-center items-start'>
<p className='font-[sansm] text-[1.6rem]'>Discover<br/>Promising ideas</p>
<p className='font-[sansl] text-[.6rem]'>Discover and support innovative projects that match your investment goals</p>
</div>
<div className='flex flex-col justify-center items-start'>
<p className='text-[.45rem] w-[10rem]'>Trusted by thousands of users for our secure and trustworthy Environment</p>
<div className=' h-fit w-[16rem] md:w-[30rem] lg:w-[40rem] 2xl:w-[60rem] flex flex-col justify-center items-center gap-2'>
<div className='w-full flex flex-col md:flex-row md:items-end md:justify-start justify-center items-start gap-2 2xl:gap-8 '>
<div className='border 2xl:border-2 border-white w-[16rem] lg:w-[24rem] h-[8rem] md:h-[10rem] lg:h-[12rem] 2xl:h-[18rem] 2xl:w-[34rem] p-2 2xl:p-4 rounded-xl 2xl:rounded-3xl flex flex-col justify-center lg:justify-evenly items-start'>
<p className='font-[sansm] text-[1.6rem] lg:text-[2rem] 2xl:text-[3.4rem] lg:font-[sansb]'>Discover<br/>Promising ideas</p>
<p className='font-[sansl] text-[.6rem] lg:text-[.8rem] 2xl:text-[1rem]'>Discover and support innovative projects that match your investment goals</p>
</div>
<div className='flex flex-col justify-center items-start gap-1 2xl:gap-3 md:mb-5 '>
<p className='text-[.45rem] 2xl:text-[.6rem] 2xl:w-[80%] w-[10rem]'>Trusted by thousands of users for our secure and trustworthy Environment</p>
<div className='flex justify-center items-start'>
<div className='w-[2.4rem] h-[2.4rem] bg-white rounded-full'></div>
<div className='w-[2.4rem] h-[2.4rem] bg-white rounded-full'></div>
<div className='w-[2.4rem] h-[2.4rem] bg-white rounded-full'></div>
<div className='w-[2.4rem] h-[2.4rem] bg-white rounded-full'></div>
<div className='w-[2.4rem] h-[2.4rem] bg-white rounded-full'></div>
<div className='w-[2.4rem] h-[2.4rem] 2xl:h-[4rem] 2xl:w-[4rem] bg-stone-800 opacity-65 rounded-full'></div>
<div className='w-[2.4rem] h-[2.4rem] 2xl:h-[4rem] 2xl:w-[4rem] bg-stone-500 opacity-65 rounded-full'></div>
<div className='w-[2.4rem] h-[2.4rem] 2xl:h-[4rem] 2xl:w-[4rem] bg-stone-400 opacity-65 rounded-full'></div>
<div className='w-[2.4rem] h-[2.4rem] 2xl:h-[4rem] 2xl:w-[4rem] bg-stone-300 opacity-65 rounded-full'></div>
<div className='w-[2.4rem] h-[2.4rem] 2xl:h-[4rem] 2xl:w-[4rem] bg-stone-100 opacity-65 rounded-full'></div>
</div>
</div>
</div>
<div className='flex flex-col justify-center items-start gap-2 '>
<div className='bg-white bg-opacity-70 p-2 text-black w-[16rem] h-[8rem] rounded-xl flex flex-col justify-center items-start'>
<p className='text-[1.6rem] font-[sanseb]'>Direct Investment<br/>Oppournities</p>
<p className='text-[.7rem] font-[sansb]'>Invest directly in exicting projects with secure and transperent contrubution</p>
<div className=' flex flex-col md:flex-row md:items-end md:justify-start justify-center items-start lg:items-center gap-4 2xl:gap-6 w-full '>
<div className=' bg-white bg-opacity-70 p-2 2xl:p-4 text-black w-[16rem] lg:w-[18rem] h-[8rem] md:h-[10rem] lg:h-[12rem] 2xl:w-[25rem] 2xl:h-[14rem] rounded-xl 2xl:rounded-3xl flex flex-col justify-center 2xl:justify-around items-start '>
<p className='text-[1.6rem] font-[sanseb] lg:text-[2rem] 2xl:text-[2.5rem] 2xl:font-[sanseb] lg:font-[sansb]'>Direct Investment<br/>Oppournities</p>
<p className='text-[.7rem] font-[sansb] lg:text-[.8rem] 2xl:text-[1rem]'>Invest directly in exicting projects with secure and transperent contrubution</p>
</div>
<div className='flex flex-col justify-center items-start gap-4'>
<div className=' flex flex-col justify-center items-start gap-4 md:w-[15rem] 2xl:w-[20rem] 2xl:h-[14rem] 2xl:justify-around'>
<div>
<p className='font-[sansm] text-[1rem]'><span className='underline underline-offset-2'>Secure investments</span> <span className='font-[sansb]'>without diluting</span> your <span className='font-[sansb]'>shares</span></p>
<p className='font-[sansl] text-[.8rem] '>-Transparent progress tracking</p>
<p className='font-[sansl] text-[.8rem] '>-Easy Access to Funding</p>
<p className='font-[sansm] text-[1rem] 2xl:text-[1.4rem]'><span className='underline underline-offset-2'>Secure investments</span> <span className='font-[sansb]'>without diluting</span> your <span className='font-[sansb]'>shares</span></p>
<p className='font-[sansl] text-[.8rem] 2xl:text-[1rem] '>-Transparent progress tracking</p>
<p className='font-[sansl] text-[.8rem] 2xl:text-[1rem] '>-Easy Access to Funding</p>
</div>
<Button/>
</div>
Expand Down
42 changes: 42 additions & 0 deletions components/home/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import Image from 'next/image'
import React from 'react'
import logo from '../../public/assets/raisex logo.png'

function Footer() {
return (
<div className='py-6 px-2 w-full h-[23rem] flex flex-col justify-between items-start '>
<div className='w-full flex flex-col md:flex-row md:justify-between md:items-start justify-center items-center'>
<div className=' w-full md:w-fit md:h-fit h-[5rem] flex flex-col justify-start items-start'>
<Image src={logo} alt='' className='w-[2rem] md:w-[3rem]'/>
<p className='text-[1.5rem] md:text-[2rem] font-[sansm]'>Raisx</p>
</div>
<div className=' h-[15rem] w-full md:w-fit 2xl:w-[40rem] md:px-8 flex flex-col md:flex-row justify-between 2xl:justify-start gap-4 items-start'>
<div className=' flex justify-start gap-2 2xl:gap-4 items-center w-full md:w-fit h-[8rem]'>
<div className=' h-full w-[8rem] 2xl:w-[12rem] '>
<p className='font-[sansm] text-[1.2rem] 2xl:text-[1.5rem]'>Social Links</p>
<p className='text-[.8rem] 2xl:text-[.8rem] font-[sansr] underline underline-offset-2'>Twitter</p>
<p className='text-[.8rem] 2xl:text-[.8rem] font-[sansr] underline underline-offset-2'>Linkedin</p>
<p className='text-[.8rem] 2xl:text-[.8rem] font-[sansr] underline underline-offset-2'>Instagram</p>
</div>
<div className=' h-full w-[8rem] 2xl:w-[12rem] '>
<p className='font-[sansm] text-[1.2rem] 2xl:text-[1.5rem]'>Quick Links</p>
<p className='text-[.7rem] 2xl:text-[.8rem] font-[sansr] underline underline-offset-2'>Home</p>
<p className='text-[.7rem] 2xl:text-[.8rem] font-[sansr] underline underline-offset-2'>About Us</p>
<p className='text-[.7rem] 2xl:text-[.8rem] font-[sansr] underline underline-offset-2'>Features</p>
<p className='text-[.7rem] font-[sansr] underline underline-offset-2'>FAQ</p>
</div>
</div>
<div className='s 2xl:w-[12rem] '>
<p className='font-[sansm] text-[1.2rem] 2xl:text-[1.5rem]'>Legal<br/>Infromation</p>
<p className='text-[.7rem] 2xl:text-[.8rem] font-[sansr] underline underline-offset-2'>Privacy Policy</p>
<p className='text-[.7rem] 2xl:text-[.8rem] font-[sansr] underline underline-offset-2'>Terms of Service</p>
<p className='text-[.7rem] 2xl:text-[.8rem] font-[sansr] underline underline-offset-2'>Cookie Policy</p>
</div>
</div>
</div>
<p className='w-full flex justify-center items-center text-[.7rem] font-[sansl]'>@ All rights are resrved</p>
</div>
)
}

export default Footer
35 changes: 23 additions & 12 deletions components/home/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,38 @@
import Image from 'next/image'
import React from 'react'
import rightarroww from '../../public/assets/Right arrow white.png'
import rightarrowb from '../../public/assets/Right arrow black.png'
import { ThemeToggler } from '../shared/ThemeToggler'
// import rightarroww from '../../public/assets/'

// import logo from '../../public/assets/raisex_logo.svg'
import logo from '../../public/assets/raisex logo.png'

function Navbar() {
return (
<div className='border border-white flex justify-between items-center w-full h-[3rem] '>
<div className=' flex justify-between items-center w-full h-[3rem] '>
<div className='flex justify-center items-center'>
<div className='flex justify-start items-center rounded-full bg-black shadow-[0_15px_14px_-18px_rgba(0,0,0,0.3)] shadow-slate-50 px-3 gap-2 w-[6rem] h-[2.5rem] '>
<p>@</p>
{/* <Image src={logo} alt='' className=''/> */}
<p>Raisx</p>
<div className='flex justify-start items-center rounded-full bg-black border border-stone-500 border-opacity-30 px-3 gap-2 w-[6rem] md:w-[7rem] 2xl:w-[10rem] 2xl:h-[3rem] md:justify-center 2xl:justify-start 2xl:px-[1.8rem] h-[2.5rem] '>
<Image src={logo} alt='' className='w-[1.2rem] 2xl:w-[1.8rem]'/>
<p className='font-[sansm] 2xl:text-[1.4rem] '>Raisx</p>
</div>
{/* <div className='border border-white w-[5.2rem] h-[2.5rem] flex justify-center items-center rounded-full font-[sansr]'>FAQ</div> */}
</div>
<div className='flex justify-center items-center gap-2'>
<ThemeToggler />
<div className='border border-white flex justify-center items-center'>
<p>Login</p>
<Image src={rightarroww} alt='' className='w-[2rem]' />
<div className ='flex justify-center items-center gap-3 w-fit md:w-[20rem] lg:w-[25rem] xl:w-[31rem] md:justify-between md:px-1'>
<div className='flex justify-center items-center gap-2'>
<div className='flex flex-col justify-center items-start'>
<p className='font-[sansm] text-[.75rem]'>54K</p>
<p className='font-[sansl] text-[.45rem]'>Active User</p>
</div>
<div className='flex flex-col justify-center items-start'>
<p className='font-[sansm] text-[.75rem]'>22+</p>
<p className='font-[sansl] text-[.45rem]'>Investors</p>
</div>
</div>
<div className='flex justify-between items-center gap-2'>
<ThemeToggler />
<div className='border dark:border-white rounded-full w-[5rem] 2xl:w-[7rem] py-1 md:w-[6rem] dark:bg-white dark:text-black border-black flex justify-center items-center'>
<p className='font-[sansm] text-[.8rem] 2xl:text-[1rem] 2xl:font-[sansb]'>Login</p>
<Image src={rightarrowb} alt='' className='w-[1rem] -rotate-45' />
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 82b56ab

Please sign in to comment.