Skip to content

Commit

Permalink
Add missing max w-screen for pricing and testimonials
Browse files Browse the repository at this point in the history
  • Loading branch information
@codeofandrin
codeofandrin committed Jan 2, 2025
1 parent 29a8beb commit f3f04fb
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 108 deletions.
2 changes: 1 addition & 1 deletion src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function Links({ title, items }: LinksPropsType) {

export default function Footer() {
return (
<div className="mt-40 w-full px-7 pb-20">
<div className="mt-40 flex w-full flex-col px-7 pb-20 sm:flex-row sm:items-center sm:justify-between">
<div className="flex w-fit flex-col">
{/* Logo */}
<Link href="/" className="group">
Expand Down
104 changes: 52 additions & 52 deletions src/components/root/Pricing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function Card({ children, theme, first = false }: CardPropsType) {
cardClasses = "bg-neutral-800 shadow-apple"
card = (
<div
className={`${cardClasses} ${!first && "mt-14 md:ml-16 md:mt-0 lg:ml-24"} relative w-full rounded-2xl p-8 sm:max-w-md`}>
className={`${cardClasses} ${!first && "mt-14 md:ml-14 md:mt-0 lg:ml-24"} relative w-full rounded-2xl p-8 sm:max-w-md`}>
<div className="absolute inset-0 bg-[radial-gradient(70%_200px_at_50%_0%,theme(backgroundColor.white/10%),transparent)]" />
{children}
</div>
Expand Down Expand Up @@ -142,58 +142,58 @@ export default function Pricing() {
demoFeatures[4].active = false

return (
<div className="mt-52 w-full bg-neutral-100 px-7 pb-40 pt-28 sm:pt-36">
{/* Header */}
<h1
id="pricing"
className="scroll-mt-20 text-center text-3xl font-semibold text-neutral-800 sm:text-4xl">
<p className="flex flex-col sm:block">
Pay once. <span className="font-bold text-accent-500">Use forever.</span>
<div className="mt-52 flex w-full flex-col items-center bg-neutral-100 px-7 pb-40 pt-28 sm:pt-36">
<div id="pricing" className="w-full scroll-mt-20 sm:max-w-screen-xl">
{/* Header */}
<h1 className="text-center text-3xl font-semibold text-neutral-800 sm:text-4xl">
<p className="flex flex-col sm:block">
Pay once. <span className="font-bold text-accent-500">Use forever.</span>
</p>
</h1>
{/* Description */}
<p className="mt-3 text-center text-neutral-600 sm:mt-5 sm:text-lg">
<span className="font-logo font-bold text-logo">exifoo</span> is a one-time purchase with no
recurring fees. You can try it out for free, with the demo version.
</p>
</h1>
{/* Description */}
<p className="mt-3 text-center text-neutral-600 sm:mt-5 sm:text-lg">
<span className="font-logo font-bold text-logo">exifoo</span> is a one-time purchase with no recurring
fees. You can try it out for free, with the demo version.
</p>
{/* Cards */}
<div className="mt-16 flex flex-col items-center sm:mt-28 md:flex-row md:justify-center">
{/* Demo */}
<Card theme="accent" first>
<CardTop
theme="accent"
version="Demo Version"
price="$0"
description={
<>
<span className="font-logo text-base font-medium sm:text-lg">exifoo</span> desktop app with
limited features
</>
}
/>
<CardFeatures theme="accent" features={demoFeatures} />
<CardButton theme="accent" />
</Card>
{/* License */}
<Card theme="primary">
<CardTop
theme="primary"
version="Full Version"
price={
<>
$19 <span className="font-base ml-1 text-xs font-normal sm:text-base">/lifetime</span>
</>
}
description={
<>
<span className="font-logo text-base font-medium sm:text-lg">exifoo</span> desktop app with
all features
</>
}
/>
<CardFeatures theme="primary" features={licenseFeatures} />
<CardButton theme="primary" />
</Card>
{/* Cards */}
<div className="mt-16 flex flex-col items-center sm:mt-28 md:flex-row md:justify-center">
{/* Demo */}
<Card theme="accent" first>
<CardTop
theme="accent"
version="Demo Version"
price="$0"
description={
<>
<span className="font-logo text-base font-medium sm:text-lg">exifoo</span> desktop app with
limited features
</>
}
/>
<CardFeatures theme="accent" features={demoFeatures} />
<CardButton theme="accent" />
</Card>
{/* License */}
<Card theme="primary">
<CardTop
theme="primary"
version="Full Version"
price={
<>
$19 <span className="font-base ml-1 text-xs font-normal sm:text-base">/lifetime</span>
</>
}
description={
<>
<span className="font-logo text-base font-medium sm:text-lg">exifoo</span> desktop app with
all features
</>
}
/>
<CardFeatures theme="primary" features={licenseFeatures} />
<CardButton theme="primary" />
</Card>
</div>
</div>
</div>
)
Expand Down
115 changes: 60 additions & 55 deletions src/components/root/Testimonials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,61 +129,66 @@ function CardAuthor({ imgClass, name, profession }: CardAuthorPropsType) {
export default function Testimonials() {
return (
<div className="mt-40 px-7 pb-40 md:px-10 lg:px-20">
{/* Header */}
<h1 className="text-center text-3xl font-semibold text-neutral-800 sm:text-4xl">What our users say</h1>
{/* Description */}
<p className="mt-3 text-center text-neutral-600 sm:mt-5 sm:text-lg">
Read how <span className="font-logo font-bold text-logo">exifoo</span> has made organizing photos
easier for people just like you.
</p>
{/* Cards */}
<div className="mt-16 sm:mt-28 sm:flex sm:flex-wrap sm:items-start sm:justify-center sm:gap-10 lg:flex-nowrap">
{/* Author 1 */}
<Card className="bg-gradient-to-b from-white to-accent-100 sm:bg-none" first>
<CardReview>
<>
I can't recommend <span className="font-logo font-medium text-logo">exifoo</span> enough! It's
been a game changer for organizing my photos, making them easy to recognize. I also appreciate
its commitment to privacy, it keeps my photos organized and my data safe.
</>
</CardReview>
<CardAuthor
imgClass="bg-[url('../assets/images/testimonial_author_1.jpg')]"
name="James Carter"
profession="Artist"
/>
</Card>
{/* Author 2 */}
<Card className="bg-accent-100 sm:bg-transparent">
<CardReview>
<>
I spent hours sorting through my photos, struggling to remember when and where they were taken.
It was exhausting. But with <span className="font-logo font-medium text-logo">exifoo</span>,
everything is so much easier. And the best thing about it is that I only had to pay once.
</>
</CardReview>
<CardAuthor
imgClass="bg-[url('../assets/images/testimonial_author_2.jpg')]"
name="Sophie Martin"
profession="Traveller"
/>
</Card>
{/* Author 3 */}
<Card className="bg-gradient-to-t from-white to-accent-100 sm:bg-none">
<CardReview>
<>
I love how easy <span className="font-logo font-medium text-logo">exifoo</span> is to use.
There's no sign-up needed, so I could get started right away. The interface is super simple and
makes renaming photos so easy. It's the perfect tool for anyone seeking a quick and easy
solution!
</>
</CardReview>
<CardAuthor
imgClass="bg-[url('../assets/images/testimonial_author_3.jpg')]"
name="Claudia Fischer"
profession="Photographer"
/>
</Card>
<div className="sm:max-w-screen-xl">
{/* Header */}
<h1 className="text-center text-3xl font-semibold text-neutral-800 sm:text-4xl">
What our users say
</h1>
{/* Description */}
<p className="mt-3 text-center text-neutral-600 sm:mt-5 sm:text-lg">
Read how <span className="font-logo font-bold text-logo">exifoo</span> has made organizing photos
easier for people just like you.
</p>
{/* Cards */}
<div className="mt-16 sm:mt-28 sm:flex sm:flex-wrap sm:items-start sm:justify-center sm:gap-10 lg:flex-nowrap">
{/* Author 1 */}
<Card className="bg-gradient-to-b from-white to-accent-100 sm:bg-none" first>
<CardReview>
<>
I can't recommend <span className="font-logo font-medium text-logo">exifoo</span> enough! It's
been a game changer for organizing my photos, making them easy to recognize. I also appreciate
its commitment to privacy, it keeps my photos organized and my data safe.
</>
</CardReview>
<CardAuthor
imgClass="bg-[url('../assets/images/testimonial_author_1.jpg')]"
name="James Carter"
profession="Artist"
/>
</Card>
{/* Author 2 */}
<Card className="bg-accent-100 sm:bg-transparent">
<CardReview>
<>
I spent hours sorting through my photos, struggling to remember when and where they were
taken. It was exhausting. But with{" "}
<span className="font-logo font-medium text-logo">exifoo</span>, everything is so much easier.
And the best thing about it is that I only had to pay once.
</>
</CardReview>
<CardAuthor
imgClass="bg-[url('../assets/images/testimonial_author_2.jpg')]"
name="Sophie Martin"
profession="Traveller"
/>
</Card>
{/* Author 3 */}
<Card className="bg-gradient-to-t from-white to-accent-100 sm:bg-none">
<CardReview>
<>
I love how easy <span className="font-logo font-medium text-logo">exifoo</span> is to use.
There's no sign-up needed, so I could get started right away. The interface is super simple
and makes renaming photos so easy. It's the perfect tool for anyone seeking a quick and easy
solution!
</>
</CardReview>
<CardAuthor
imgClass="bg-[url('../assets/images/testimonial_author_3.jpg')]"
name="Claudia Fischer"
profession="Photographer"
/>
</Card>
</div>
</div>
</div>
)
Expand Down

0 comments on commit f3f04fb

Please sign in to comment.