Skip to content

Commit

Permalink
done landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
jvc-byte committed Oct 8, 2024
1 parent b8e1f20 commit 86a792d
Show file tree
Hide file tree
Showing 17 changed files with 166 additions and 52 deletions.
3 changes: 3 additions & 0 deletions public/images/background/bg.mp4:Zone.Identifier
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=about:internet
File renamed without changes
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=about:internet
Binary file added public/videos/bg.mp4
Binary file not shown.
7 changes: 4 additions & 3 deletions src/app/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,6 @@ a {

.navbar{
background-color: rgb(19, 23, 33);
padding: 20px;
border-radius: 0.5rem;
margin-top: 2rem;
box-shadow: 0 4px 8px rgba(92, 190, 197, 0.2), 0 6px 20px rgba(92, 190, 197, 0.19);
}

Expand All @@ -88,4 +85,8 @@ a {
margin-top: 2rem;
margin-bottom: 5rem;
box-shadow: 0 4px 8px rgba(92, 190, 197, 0.2), 0 6px 20px rgba(92, 190, 197, 0.19);
}

.landing-pg-intro-txt {
letter-spacing: 0.5rem;
}
2 changes: 1 addition & 1 deletion src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function RootLayout({
}: { children: React.ReactNode }) {
return (
<html lang="en">
<body className="body container">
<body className="body">
<OnchainProviders>{children}</OnchainProviders>
</body>
</html>
Expand Down
40 changes: 5 additions & 35 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,18 @@
'use client';
import Footer from 'src/components/Footer';
import TransactionWrapper from 'src/components/TransactionWrapper';
import WalletWrapper from 'src/components/WalletWrapper';
import { useAccount } from 'wagmi';
// import TransactionWrapper from 'src/components/TransactionWrapper';
// import WalletWrapper from 'src/components/WalletWrapper';
// import { useAccount } from 'wagmi';
import Header from 'src/components/Header';
import Home from 'src/components/Home';

export default function Page() {

return (
<div className="">
<Header />
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore aspernatur nesciunt sapiente iste suscipit totam. Ex ut, consequatur quis iste maiores aperiam non earum a! Ea aliquid optio dicta reiciendis!
Minima veritatis placeat blanditiis tempora velit aliquam, obcaecati ullam amet ea autem voluptatibus possimus alias dicta earum vitae numquam, saepe consectetur neque ipsum? Possimus laborum consectetur eius optio odio sint!
Est laudantium voluptatem excepturi fugit qui hic sed omnis dolor perspiciatis quod quibusdam ipsum consequuntur sit officia reiciendis dolores, eos incidunt minus. Illo eveniet dolorum nam fugiat ut quis delectus!
Modi optio nostrum cupiditate obcaecati, harum, consequatur laudantium nihil culpa iure quo molestias aperiam ad similique dolorem suscipit dolorum ullam. Laboriosam odit delectus quae consequatur quis adipisci officiis fuga similique.
Quibusdam, voluptates? Explicabo, enim? Quod est nemo tempore nulla consequatur commodi nihil, ea animi ullam quae amet! Quidem unde, itaque vitae delectus, maxime pariatur nesciunt dolorem inventore ducimus dolore quaerat!
Deleniti ut exercitationem eaque. Minus facere hic maxime, ab odit in accusamus dolore, sapiente provident sunt obcaecati beatae. Repudiandae qui quidem sapiente animi tempore rerum sint sed aliquid doloremque incidunt?
Quasi optio nam beatae tempore distinctio soluta delectus architecto cumque sequi nisi dolore illo aliquam quia magnam, velit consequatur. Quia voluptatibus error hic harum dignissimos blanditiis et officiis eos necessitatibus!
Quidem ea inventore excepturi nesciunt nostrum rem magnam vitae quas! Voluptates eius quae placeat, facere nostrum ipsam vel ipsum perspiciatis culpa autem sequi odio cupiditate dolore? Vero reiciendis eveniet sapiente?
Delectus ad sapiente at unde, aut aliquid. Ad doloremque voluptas perspiciatis sint delectus, ipsum, praesentium pariatur, id voluptatum ex ipsa non accusantium dignissimos ducimus esse. Odio possimus nam laboriosam aliquam.
Consectetur vitae quo repellendus, necessitatibus beatae alias! Odit eveniet sit quas, sequi earum in laudantium officia animi consectetur saepe. Nam laboriosam voluptatem et dignissimos eaque laborum suscipit molestias, maxime fugit.
Labore neque ex expedita maxime dicta blanditiis praesentium! Iure, quae. Enim maiores qui ducimus blanditiis, deserunt unde ex fugit est. Quam exercitationem ut ad sequi illum autem aliquid eaque dolorum!
Quae enim inventore odio voluptas pariatur recusandae aliquid asperiores alias facere aperiam modi, ipsa tempora rem nobis voluptates totam iure explicabo neque. Officiis est consectetur quidem architecto, ullam esse suscipit!
Aspernatur voluptates adipisci corrupti sit quaerat recusandae omnis, exercitationem nesciunt ipsa fugiat alias provident, iusto natus amet veniam, fuga illum quisquam officiis atque nisi iste illo labore? Nemo, cumque velit.
Dolor, nisi sint fugiat perspiciatis nesciunt quaerat natus culpa ad maxime dolorem nihil numquam temporibus. Debitis neque tenetur, vero ratione totam pariatur corporis facere iure, voluptas exercitationem, quidem est doloribus?
Iusto veniam dolorem, accusantium tempora vitae, commodi nisi ex illo quia temporibus iste, neque eveniet delectus corporis distinctio vero quod! Reiciendis impedit ad reprehenderit amet dignissimos ex odio ipsum totam.
Nam atque adipisci natus possimus ratione modi harum vel labore provident perspiciatis aut quas numquam alias, quam, sapiente inventore odit doloribus dicta. Voluptates necessitatibus voluptatem itaque esse quo cupiditate voluptatibus.
Repudiandae amet velit perspiciatis dicta, error beatae provident deserunt qui nihil, blanditiis cum? Quod, laboriosam? Modi eius molestias sed illo esse facilis laborum quasi, id, ab repellat sapiente, eveniet cum?
Sapiente eligendi sequi a sit unde incidunt exercitationem perspiciatis minus vitae dignissimos molestias saepe, laudantium laboriosam impedit? Expedita, voluptate ullam nostrum nemo veniam deserunt corporis voluptatibus suscipit doloribus unde molestiae.
Repellendus asperiores molestias quod, dicta sunt accusamus sequi quo, optio doloribus tempora labore sint. Dolore sequi exercitationem vero debitis velit est quos incidunt, modi ab harum assumenda possimus, dicta qui!
Voluptatum impedit illo aperiam repudiandae obcaecati ipsum veniam, fugit quibusdam sequi quasi assumenda debitis. Sed perspiciatis alias minima deserunt neque corporis corrupti. Perferendis aliquam eveniet excepturi atque? Corrupti, repudiandae facere?
Enim minima dignissimos cum beatae doloribus id quisquam tenetur exercitationem error quo, dolore laboriosam! Voluptatem eaque reprehenderit possimus voluptate facilis et magni consectetur aspernatur sint impedit repudiandae, saepe sed voluptas!
Ipsa, accusantium at. Exercitationem nam delectus error consequuntur modi veritatis aliquid nihil aperiam doloremque quam possimus excepturi porro nulla ex minima voluptatum minus, ipsam odit tenetur, ea voluptates dolore praesentium!
Omnis, illo eos. Maxime nulla iure nihil neque totam iste saepe vel eius omnis blanditiis expedita, odio ipsa distinctio doloribus molestiae quidem iusto commodi magnam a at minus facere quia.
Fuga dolorum accusantium, sapiente quam illum dicta, quis voluptatem, eos rem perspiciatis eaque ut quos! Aperiam laudantium ex aut rerum perspiciatis nisi natus? Aliquid hic exercitationem modi architecto quisquam officia.
Voluptatibus ad expedita at aliquam provident fugiat. Rem quidem magni veniam aut, blanditiis expedita amet nisi facilis nam enim consectetur, mollitia cupiditate dolor ad corporis asperiores eveniet omnis nihil hic.
Maiores expedita ad dolorum voluptas suscipit maxime, rerum accusamus recusandae. Distinctio quasi beatae eveniet necessitatibus exercitationem alias suscipit et voluptatem sit enim reprehenderit omnis pariatur, nam reiciendis amet accusantium aut?
Quas, ullam provident voluptatum sit aliquam cumque quisquam sed quidem excepturi nihil dolore et aliquid inventore iste temporibus dolorem explicabo in vitae iure a veniam sunt! Ducimus laudantium sint quibusdam.
Nostrum temporibus, neque sint eos tempore quisquam, veritatis deserunt quibusdam ducimus nemo enim repudiandae iusto, aperiam odit ipsa blanditiis quos commodi reiciendis? Obcaecati, explicabo omnis corrupti quae dolorum numquam at!
Minima blanditiis neque officiis repudiandae aspernatur fugit soluta illum voluptatem iure excepturi eligendi vero, culpa quidem ipsa eius corporis quae cupiditate doloremque nesciunt aut nisi inventore vel? Nesciunt, officiis ad.
</p>
<p className='text-orange-500 font-black md: italic hover:not-italic text-9xl fixed top-1/2 left-8 right-0'>Development in progress</p>
<Home />
</div>
<Footer />
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function Header() {
const { address } = useAccount();

return (
<div className="navbar bg-base-100 sticky top-0">
<div className="navbar bg-base-100 fixed top-0 z-50">
<div className="navbar-start">
<div className="dropdown">
<div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
Expand All @@ -30,12 +30,12 @@ export default function Header() {
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">Features</a></li>
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">Solutions</a></li>
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">Resources</a></li>
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">Pricing</a></li>
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">About us</a></li>
</ul>
</div>
<div className="flex ali">
<div className="flex">
<a href="#"><img src="favicon.ico" alt="Logo" className="w-21 h-auto" /></a>
<a href="#" className="hidden xl:block btn pl-2 text-4xl text-teal-200 leading-10 tracking-widest font-extrabold bg-opacity-80 bg-base-100">
<a href="#" className="hidden xl:block btn pl-2 text-3xl text-teal-200 leading-10 tracking-widest font-extrabold bg-opacity-80 bg-base-100">
SealedTrust
</a>
</div>
Expand All @@ -45,7 +45,7 @@ export default function Header() {
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">Features</a></li>
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">Solutions</a></li>
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">Resources</a></li>
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">Pricing</a></li>
<li><a className="text-gray-200 text-lg hover:text-white transition-color ease-in-out duration-500">About us</a></li>
</ul>

</div>
Expand Down
13 changes: 13 additions & 0 deletions src/components/Home.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import VideoBackground from "./VideoBackground";
import TrustedByUsers from "./TrutedUsers";
import ProjectDemo from "./ProjectDemo";

export default function Home() {
return (
<>
<VideoBackground />
<TrustedByUsers />
<ProjectDemo />
</>
);
}
2 changes: 1 addition & 1 deletion src/components/LoginButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function LoginButton() {
return (
<WalletWrapper
className="min-w-[90px] btn btn-outline btn-accent"
text="Log in"
text="Connect Wallet"
withWalletAggregator={true}
/>
);
Expand Down
40 changes: 40 additions & 0 deletions src/components/ProjectDemo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@

export default function ProjectDemo() {
return (
<>
<div className="hero bg-base-100 min-h-screen">
<div className="hero-content flex-col lg:flex-row-reverse">

<div>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/HoOt8NeLbv0?si=Iqey3wANeQ-5WGfU"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" >
</iframe>
</div>
<div>
<h2 className='text-base lg:text-xl font-thin landing-pg-intro-txt leading-loose mb-5 animate-slideDown'>Project Demo</h2>
<p className="text-xl animate-slideUp text-justify">A decentralized escrow platform where parties can engage in
agreements with full assurance that the terms of the deal will be met before any funds are released. Using smart
contracts deployed on the Base blockchain, a secure environment for deal-making is assured.
</p>
<div>
<h1 className=" text-lg text-teal-300 mt-5">Key Features of SealedTrust:</h1>
<ul className="text-sm indent-8 ">
<li className="text-sm animate-slideUp text-teal-300 text-justify break-words leading-8">✓ Tamper-proof</li>
<li className="text-sm animate-slideUp text-teal-300 text-justify break-words leading-8">✓ Trustless Escrow</li>
<li className="text-sm animate-slideUp text-teal-300 text-justify break-words leading-8">✓ Fraud Protection</li>
<li className="text-sm animate-slideUp text-teal-300 text-justify break-words leading-8">✓ Transparent Process</li>
<li className="text-sm animate-slideUp text-teal-300 text-justify break-words leading-8">✓ User-Friendly Interface</li>
<li className="text-sm animate-slideUp text-teal-300 text-justify break-words leading-8">✓ Global Accessibility</li>
<li className="text-sm animate-slideUp text-teal-300 text-justify break-words leading-8">⨀ Dispute Resolution via Multisig Wallet</li>
</ul>
</div>
<p className="py-6"></p>
<button className="btn btn-outline btn-accent w-96 glass">Secure Your transaction now!</button>
</div>
</div>
</div>

</>
);
}
4 changes: 2 additions & 2 deletions src/components/SignupButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import WalletWrapper from './WalletWrapper';
export default function SignupButton() {
return (
<WalletWrapper
className="min-w-[90px] btn btn-outline btn-accent"
text="Sign up"
className="min-w-[90px] btn btn-accent"
text="Connect Coinbase"
/>
);
}
10 changes: 10 additions & 0 deletions src/components/TrutedUsers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@

export default function TrustedByUsers() {
return (
<>
<div className="justify-center w-full drop-shadow-2xl">
<button className="btn w-full glass">Comming soon</button>
</div>
</>
);
}
45 changes: 45 additions & 0 deletions src/components/VideoBackground.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';

export default function VideoBackground() {
return (
<div className="relative w-full h-screen overflow-hidden">
<video
src="/videos/bg.mp4" // Ensure the path is correct relative to your public directory
autoPlay
loop
muted
className="absolute top-0 left-0 w-full h-full object-cover" // Make it cover the entire div
/>
<div className="absolute inset-0 bg-black opacity-25" /> {/* Optional dark overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-transparent to-black pointer-events-none" /> {/* Gradient overlay */}
<div className="absolute inset-0 blur-2xl" /> {/* Blurry edges */}

<div className="relative z-10 flex items-center justify-center h-full text-white">

<div className='flex-column'>
<h2 className='text-base lg:text-2xl font-thin landing-pg-intro-txt leading-loose mb-10 animate-slideDown'>Your Number one platform for trustless deal-making.</h2>
<h1 className="text-4xl font-bold lg:text-7xl mb-10 animate-slideUp">Ensuring funds are only released</h1>
<h1 className="text-4xl font-bold mb-10 lg:text-7xl text-teal-300 animate-slideUp">when both parties meet the agreement</h1>

<div className="flex-column lg:flex gap-10 mt-6">
<button className="btn btn-outline btn-accent px-10 w-96 animate-slideUp"><svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg></button>
<button className="btn glass w-96 animate-slideUp">Book A Demo</button>
</div>

</div>

</div>
</div>
);
}
10 changes: 5 additions & 5 deletions src/components/WalletWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,18 @@ export default function WalletWrapper({
<Name />
</ConnectWallet>
<WalletDropdown>
<Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick={true}>
<Identity className=" bg-slate-700 px-4 pt-3 pb-2" hasCopyAddressOnClick={true}>
<Avatar />
<Name />
<Address />
<EthBalance />
</Identity>
<WalletDropdownBasename />
<WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
<WalletDropdownBasename className='bg-slate-700'/>
<WalletDropdownLink className='bg-slate-700' icon="wallet" href="https://wallet.coinbase.com">
Go to Wallet Dashboard
</WalletDropdownLink>
<WalletDropdownFundLink />
<WalletDropdownDisconnect />
<WalletDropdownFundLink className='bg-slate-700' />
<WalletDropdownDisconnect className='bg-slate-700'/>
</WalletDropdown>
</Wallet>
</>
Expand Down
29 changes: 29 additions & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,35 @@ const config: Config = {
xl: '1280px',
},
},
extend: {
transitionProperty: {
'bg': 'background-image',
},
},
keyframes: {
slideDown: {
'0%': { transform: 'translateY(-100%)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideRight: {
'0%': { transform: 'translateX(-100%)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(100%)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideLeft: {
'0%': { transform: 'translateX(100%)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' },
},
},
animation: {
slideDown: 'slideDown 1s ease-in-out',
slideRight: 'slideRight 2s ease-in-out',
slideUp: 'slideUp 1s ease-in-out',
slideLeft: 'slideLeft 2s ease-in-out',
},
},
plugins: [
require('daisyui'),
Expand Down

0 comments on commit 86a792d

Please sign in to comment.