mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Styling fixes for new hero banner, add promotional carousel to about page
This commit is contained in:
austinkelsay
parent
9d35f9a846
commit
7d8f67dc76
@ -14,7 +14,8 @@ const HeroBanner = () => {
|
||||
const isTabView = windowWidth <= 1360;
|
||||
const router = useRouter();
|
||||
const { returnImageProxy } = useImageProxy();
|
||||
const videoRef = useRef(null);
|
||||
|
||||
const isMobile = windowWidth <= 800;
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
@ -40,28 +41,16 @@ const HeroBanner = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// videoRef.current.play();
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<div className="h-[450px] relative flex justify-center items-center overflow-hidden">
|
||||
<div className={`${isMobile ? 'h-[350px]' : 'h-[450px]'} mx-0 relative flex justify-center items-center overflow-hidden`}>
|
||||
<Image
|
||||
src={returnImageProxy("https://media.istockphoto.com/id/1224500457/photo/programming-code-abstract-technology-background-of-software-developer-and-computer-script.jpg?s=612x612&w=0&k=20&c=nHMypkMTU1HUUW85Zt0Ff7MDbq17n0eVeXaoM9Knt4Q=")}
|
||||
alt="Banner"
|
||||
quality={100}
|
||||
fill
|
||||
style={{ objectFit: 'cover' }}
|
||||
className='opacity-100'
|
||||
className='opacity-100 rounded-lg'
|
||||
/>
|
||||
{/* <video
|
||||
src={"https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/plebdevs-montage.mp4"}
|
||||
className={`object-cover w-full h-[450px] rounded-lg rounded-tr-none rounded-br-none`}
|
||||
ref={videoRef}
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
/> */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-black via-black/40 to-transparent rounded-lg" />
|
||||
<div className={`absolute inset-0 flex flex-col justify-center ${isTabView ? 'items-center text-center' : 'items-start pl-12'}`}>
|
||||
<h1 className={`text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 ${isTabView ? 'px-4' : ''}`}>
|
||||
@ -71,16 +60,22 @@ const HeroBanner = () => {
|
||||
</span>
|
||||
<span className="block">Become a dev</span>
|
||||
</h1>
|
||||
<h2 className="text-2xl text-[#f8f8ff] mb-8 font-semibold">
|
||||
A one of a kind developer education and community platform built on Nostr and fully Lightning integrated.
|
||||
</h2>
|
||||
{isMobile ? (
|
||||
<h3 className="text-[#f8f8ff] mb-8 font-semibold">
|
||||
A one of a kind developer education and community platform built on Nostr and fully Lightning integrated.
|
||||
</h3>
|
||||
) : (
|
||||
<h2 className="text-[#f8f8ff] mb-8 font-semibold">
|
||||
A one of a kind developer education and community platform built on Nostr and fully Lightning integrated.
|
||||
</h2>
|
||||
)}
|
||||
<div className="space-x-4">
|
||||
<GenericButton
|
||||
label="Learn"
|
||||
icon="pi pi-book"
|
||||
rounded
|
||||
severity="info"
|
||||
size="large"
|
||||
size={isMobile ? null : "large"}
|
||||
outlined
|
||||
onClick={() => router.push('/content?tag=all')}
|
||||
/>
|
||||
@ -88,7 +83,7 @@ const HeroBanner = () => {
|
||||
label="Connect"
|
||||
icon="pi pi-users"
|
||||
rounded
|
||||
size="large"
|
||||
size={isMobile ? null : "large"}
|
||||
severity="success"
|
||||
outlined
|
||||
onClick={() => router.push('/feed?channel=global')}
|
||||
|
||||
@ -51,7 +51,6 @@ const InteractivePromotionalCarousel = () => {
|
||||
const { showToast } = useToast();
|
||||
const windowWidth = useWindowWidth();
|
||||
const isTabView = windowWidth <= 1360;
|
||||
const isMobile = windowWidth <= 768;
|
||||
const router = useRouter();
|
||||
const videoRef = useRef(null);
|
||||
|
||||
@ -78,13 +77,13 @@ const InteractivePromotionalCarousel = () => {
|
||||
}, [selectedPromotion]);
|
||||
|
||||
return (
|
||||
<div className={`flex ${isTabView ? 'flex-col' : 'flex-row'} bg-gray-900 text-white m-4 mx-14 rounded-lg ${isTabView ? 'h-auto' : 'h-[620px]'} ${isTabView ? 'w-full mx-0 ml-0 mt-0' : null}`}>
|
||||
<div className={`flex ${isTabView ? 'flex-col' : 'flex-row'} bg-gray-900 text-white m-4 mx-0 rounded-lg ${isTabView ? 'h-auto' : 'h-[620px]'} ${isTabView ? 'w-full mx-0 ml-0 mt-0' : null}`}>
|
||||
<div className={isTabView ? 'w-full' : 'lg:w-2/3 relative'}>
|
||||
{selectedPromotion.video ? (
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={selectedPromotion.video}
|
||||
className={`object-cover w-full ${isTabView ? 'h-[300px]' : 'h-full'} rounded-lg rounded-tr-none rounded-br-none`}
|
||||
className={`object-cover w-full ${isTabView ? 'h-[300px] rounded-lg' : 'h-full rounded-tr-none rounded-br-none'} rounded-lg opacity-100`}
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
@ -95,7 +94,7 @@ const InteractivePromotionalCarousel = () => {
|
||||
alt={selectedPromotion.title}
|
||||
width={800}
|
||||
height={600}
|
||||
className={`object-cover w-full ${isTabView ? 'h-[300px]' : 'h-full'} rounded-lg opacity-75 rounded-tr-none rounded-br-none`}
|
||||
className={`object-cover w-full ${isTabView ? 'h-[300px] rounded-lg' : 'h-full rounded-tr-none rounded-br-none'} rounded-lg opacity-75`}
|
||||
/>
|
||||
)}
|
||||
{isTabView ? (
|
||||
@ -155,7 +154,7 @@ const InteractivePromotionalCarousel = () => {
|
||||
case "PLEBDEVS":
|
||||
return (
|
||||
<div className="flex flex-row gap-4 mt-4">
|
||||
<GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="About" className="py-2 font-semibold" size="small" outlined />
|
||||
{/* <GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="About" className="py-2 font-semibold" size="small" outlined /> */}
|
||||
<GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined />
|
||||
<GenericButton onClick={() => router.push('/content?tag=all')} severity="primary" icon={<i className="pi pi-eye pr-2" />} label="All content" className="py-2 font-semibold" size="small" outlined />
|
||||
<GenericButton onClick={() => copyToClipboard()} icon={<i className="pi pi-bolt pr-2" />} label="Donate" className={`py-2 font-semibold text-yellow-300 ${yellowFocusOutlineStyle}`} size="small" outlined />
|
||||
|
||||
@ -150,7 +150,7 @@ const Sidebar = ({ course = false }) => {
|
||||
<i className="pi pi-plus pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Create</p>
|
||||
</div>
|
||||
)}
|
||||
<div onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=subscribe') || isActive('/subscribe') ? 'bg-gray-700' : ''}`}>
|
||||
<div onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/subscribe')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=subscribe') || isActive('/subscribe') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-star pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Subscribe</p>
|
||||
</div>
|
||||
<Accordion activeIndex={0} className={styles['p-accordion']}>
|
||||
|
||||
@ -6,11 +6,14 @@ import { Message } from 'primereact/message';
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import useWindowWidth from "@/hooks/useWindowWidth";
|
||||
import GenericButton from '@/components/buttons/GenericButton';
|
||||
import InteractivePromotionalCarousel from '@/components/content/carousels/InteractivePromotionalCarousel';
|
||||
|
||||
const AboutPage = () => {
|
||||
const { showToast } = useToast();
|
||||
const windowWidth = useWindowWidth();
|
||||
|
||||
const isTabView = windowWidth <= 1360;
|
||||
|
||||
const copyToClipboard = async (text) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
@ -28,34 +31,8 @@ const AboutPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-4xl mx-auto">
|
||||
{windowWidth < 768 && (
|
||||
<h1 className="text-3xl font-bold mb-6">About PlebDevs</h1>
|
||||
)}
|
||||
|
||||
<Card title="About PlebDevs" className="mb-4">
|
||||
<div className='flex flex-row gap-4 max-mob:flex-col max-tab:flex-col'>
|
||||
<Message pt={{
|
||||
icon: {
|
||||
className: 'hidden'
|
||||
}
|
||||
}} severity="info" text="PlebDevs is a fully Lightning and Nostr integrated education, content, and community platform designed to help new and aspiring developers, with a focus on Bitcoin / Lightning / Nostr technologies." />
|
||||
<Message pt={{
|
||||
icon: {
|
||||
className: 'hidden'
|
||||
}
|
||||
}} severity="success" text="PlebDevs offers a personal yet distributed learning experience, combining videos, courses, documents, and community channels through Nostr, monetizing with Lightning, and integrating them into a single platform" />
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<h3 className='font-bold mb-2'>The pitch is simple:</h3>
|
||||
<ul className='list-disc list-inside ml-6 space-y-2'>
|
||||
<li className='text-lg'>Learn how to code 💻</li>
|
||||
<li className='text-lg'>Build Bitcoin / Lightning / Nostr apps ⚡</li>
|
||||
<li className='text-lg'>Become a developer 🚀</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className={`${isTabView ? 'w-full' : 'w-[83vw]'} p-4 mx-auto`}>
|
||||
<InteractivePromotionalCarousel />
|
||||
<Card title="Key Features" className="mb-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col items-start justify-center">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user