Skip to content

Commit 7ff7a0b

Browse files
barthez-kenwoubarthez-kenwou
committed
feat: Add newsletter section and Benefit section in home page
1 parent e709ff9 commit 7ff7a0b

19 files changed

Lines changed: 459 additions & 43 deletions

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<meta name="author" content="Barthez Kenwou" /> <!-- Specifies the author of the project -->
1414
<meta name="theme-color" content="#1E293B" /> <!-- Sets the theme color for mobile browsers -->
1515
<meta name="language" content="en" /> <!-- Specifies the primary language of the content -->
16+
<meta name="year-of-publication" content="2025">
1617
<meta name="application-name" content="Iphone Cameroon" /> <!-- Application name -->
1718

1819
<!-- Compatibility meta tag for Internet Explorer -->

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
]
9595
},
9696
"dependencies": {
97-
"@hookform/resolvers": "^3.9.1",
97+
"@hookform/resolvers": "^3.10.0",
9898
"@radix-ui/react-dropdown-menu": "^2.1.4",
9999
"@radix-ui/react-label": "^2.1.1",
100100
"@radix-ui/react-separator": "^1.1.1",
@@ -114,7 +114,7 @@
114114
"framer-motion": "^11.15.0",
115115
"konva": "^9.3.16",
116116
"lucide-react": "^0.468.0",
117-
"motion": "^11.18.1",
117+
"motion": "^12.0.0",
118118
"path": "^0.12.7",
119119
"postcss": "^8.4.49",
120120
"process": "^0.11.10",

‎src/components/custom/Benefits.tsx‎

Lines changed: 88 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,96 @@
1+
import { BenefitsElements } from '@/core/mocks/mock-benefits'
2+
import { motion } from 'framer-motion'
13
import React from 'react'
4+
import { MagicCard } from "@/components/ui/magic-card";
5+
import { Link } from 'react-router-dom';
6+
import { useTheme } from "@/hooks/use-theme";
7+
import { cardBenefitsVariants } from '@/core/variants/varaints';
28

39
const Benefits: React.FC = () => {
10+
const { theme } = useTheme();
11+
412
return (
5-
<div>
6-
Benefits
7-
</div>
13+
<section className='py-6 md:py-10 lg:py-12'>
14+
<div className="container grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-4">
15+
{
16+
BenefitsElements.map((ele, index) => (
17+
<motion.div
18+
key={ele.id}
19+
custom={index}
20+
variants={cardBenefitsVariants}
21+
initial="hidden"
22+
whileInView="visible"
23+
viewport={{once: true, amount: .2}}
24+
className='w-auto relative'
25+
>
26+
<MagicCard
27+
className="flex flex-col items-center justify-center text-center gap-4 shadow-none p-4 md:p-6"
28+
gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"}
29+
>
30+
<Link
31+
to={ele.link}
32+
className="inline-block p-2 md:p-3 rounded-full bg-foreground/90 hover:bg-foreground text-center text-background/90 hover:text-background duration-300 text-lg md:text-xl"
33+
>
34+
{ele.icon}
35+
</Link>
36+
37+
<Link
38+
to={ele.link}
39+
className=""
40+
>
41+
<h4 className="text-sm md:text-sm font-medium capitalize text-center text-foreground/90 hover:text-foreground duration-300">
42+
{ele.content}
43+
</h4>
44+
</Link>
45+
</MagicCard>
46+
</motion.div>
47+
))
48+
}
49+
</div>
50+
</section>
851
)
952
}
1053

1154
export default Benefits
55+
56+
57+
/*
58+
import { BenefitsElements } from '@/core/mocks/mock-benefits'
59+
import React from 'react'
60+
import { motion } from 'framer-motion';
61+
import { MagicCard } from "@/components/ui/magic-card";
62+
// import { useTheme } from "@/hooks/use-theme";
63+
import { Link } from 'react-router-dom';
64+
65+
const Benefits: React.FC = () => {
66+
// const { theme } = useTheme();
67+
68+
return (
69+
<section className='py-6 md:py-10 lg:py-12'>
70+
<div className="container flex justify-between">
71+
{
72+
BenefitsElements.map((ele) => (
73+
<motion.div
74+
key={ele.id}
75+
>
76+
<MagicCard
77+
className="flex flex-col items-center shadow-2xl"
78+
// gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"}
79+
>
80+
<Link
81+
to={ele.link}
82+
className="inline-block p-4 rounded-full bg-foreground/80 hover:bg-foreground text-center text-background/80 hover:text-background"
83+
>
84+
{ele.icon}
85+
<Link>
86+
</MagicCard>
87+
</motion.div>
88+
))
89+
}
90+
</div>
91+
</section>
92+
)
93+
}
94+
export default Benefits
95+
96+
*/

‎src/components/custom/Newsletter.tsx‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,45 @@
11
import React from 'react'
2+
import { Link } from 'react-router-dom'
3+
import NewsletterForm from './utils/NewsletterForm'
24

35
const Newsletter: React.FC = () => {
46
return (
5-
<div>
6-
Newsletter
7-
</div>
7+
<section className='bg-gradient-to-br from-foreground/70 via-slate-800/90 to-foreground/80 dark:from-slate-900/80 dark:via-slate-800 dark:to-background py-6 md:py-10 lg:py-12'>
8+
<div className="container flex flex-col items-center gap-4 md:gap-6 lg:gap-8">
9+
<h3 className="text-center text-2xl md:text-3xl lg:text-4xl text-footer-foreground font-semibold">
10+
Sign up for our newsletter
11+
</h3>
12+
13+
<p className="max-w-full md:max-w-[85%] lg:max-w-[70%] text-center text-sm md:text-base text-footer-foreground/90 ">
14+
Would you like to be notified when there are new products, promotions or sales?
15+
Subscribe to our newsletter and you will be among the first to know.
16+
</p>
17+
18+
{/* Form of newsletter */}
19+
<div className="flex flex-col items-center gap-6">
20+
{/* Newsletter form */}
21+
<NewsletterForm />
22+
23+
{/* Notification */}
24+
<p className="text-center text-xs md:text-sm text-footer-foreground/80">
25+
By subscribing, you agree with Our&nbsp;
26+
<Link
27+
to={'/terms-and-conditions'}
28+
className='text-sky-400 hover:underline duration-300'
29+
>
30+
Terms of Use
31+
</Link>
32+
&nbsp;and&nbsp;
33+
<Link
34+
to={'/privacy-policy'}
35+
className='text-sky-400 hover:underline duration-300'
36+
>
37+
Privacy Policy.
38+
</Link>
39+
</p>
40+
</div>
41+
</div>
42+
</section>
843
)
944
}
1045

‎src/components/custom/utils/CTA.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const CTA: React.FC = () => {
88
return (
99
<Button
1010
variant={'outline'}
11-
className='w-fit border-footer-foreground bg-background/5 text-base hover:bg-background/20 py-6 px-10 md:px-14'
11+
className='w-fit border-footer-foreground bg-background/5 text-base hover:bg-background/20 py-6 px-10 md:px-14 backdrop-blur-md'
1212
onClick={() => { navigate("/products"); }}
1313
>
1414
Shop Now

‎src/components/custom/utils/CTA2.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const CTA2: React.FC<ICTA2> = ({name="Shop Now", url}) => {
99
return (
1010
<Button
1111
variant={'outline'}
12-
className='w-fit border-foreground bg-transparent py-5 px-6 md:px-10'
12+
className='w-fit border-foreground bg-transparent py-5 px-6 md:px-10 backdrop-blur-md'
1313
onClick={() => { navigate(`${url}`) }}
1414
>
1515
{name}

‎src/components/custom/utils/CTAProduct.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const CTAProduct: React.FC<ICTAProduct> = ({ url, name="Buy Now" }) => {
77

88
return (
99
<button
10-
className="w-fit bg-foreground/95 hover:bg-foreground px-14 py-2 rounded-md text-background/95 hover:text-background font-semibold duration-300 whitespace-nowrap"
10+
className="w-fit bg-foreground/95 hover:bg-foreground px-14 py-2 rounded-md text-background/95 hover:text-background font-semibold duration-300 whitespace-nowrap backdrop-blur-md"
1111
onClick={() => navigate(url)}
1212
>
1313
{name}

‎src/components/custom/utils/NewsletterForm.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { BsArrowRight } from "react-icons/bs";
2+
import React from 'react'
3+
import { zodResolver } from "@hookform/resolvers/zod"
4+
import { useForm } from "react-hook-form"
5+
import { formSchemaEmail } from '@/core/schema/schema'
6+
import type { z } from 'zod'
7+
import { toast } from '@/hooks/use-toast'
8+
import { Button } from '@/components/ui/button'
9+
import {
10+
Form,
11+
FormControl,
12+
FormField,
13+
FormItem,
14+
FormMessage
15+
} from '@/components/ui/form'
16+
17+
const NewsletterForm: React.FC = () => {
18+
// Define the form
19+
const form = useForm<z.infer<typeof formSchemaEmail>>({
20+
resolver: zodResolver(formSchemaEmail),
21+
})
22+
23+
// 2. Define a submit handler.
24+
function onSubmit(values: z.infer<typeof formSchemaEmail>) {
25+
// Request and function to add this email address to newsletter
26+
console.log(values)
27+
28+
29+
// Success message at the end
30+
toast({
31+
title: "Abonnement Réussite !",
32+
description: <>
33+
<p>Thank's <b>{values.email}</b>: to subscribe to our plateform 🎉</p>
34+
</>,
35+
duration: 2500,
36+
className: 'bg-card/95 shadow shadow-primary'
37+
})
38+
}
39+
40+
return (
41+
<div>
42+
<Form {...form}>
43+
<form onSubmit={form.handleSubmit(onSubmit)}>
44+
<div className="w-fit rounded-lg flex items-center gap-0 overflow-hidden">
45+
<FormField
46+
control={form.control}
47+
name="email"
48+
render={({ field }) => (
49+
<FormItem className="">
50+
<FormControl
51+
>
52+
<input
53+
placeholder="Enter your email ..."
54+
type="email"
55+
required
56+
minLength={5}
57+
maxLength={75}
58+
autoComplete="off"
59+
className="w-full max-w-[50rem] md:max-w-full px-2 md:px-4 py-1 md:py-2 border-none focus:border-none focus:outline-none focus-visible:outline-none focus-visible:border-none text-sm md:text-base placeholder:text-sm md:placeholder:text-base"
60+
{...field}
61+
/>
62+
</FormControl>
63+
<FormMessage className="absolute animate-incommingErrorMSG" />
64+
</FormItem>
65+
)}
66+
/>
67+
68+
<Button
69+
type="submit"
70+
className="w-auto h-auto rounded-l-none rounded-r-lg py-1 md:py-1.5 px-2 md:px-3 bg-footer/90 text-footer-foreground/90 hover:bg-footer hover:text-footer-foreground duration-300"
71+
>
72+
<span className="text-sm md:text-lg">
73+
Suscribe
74+
</span>
75+
<BsArrowRight className="text-xl" />
76+
</Button>
77+
</div>
78+
</form>
79+
</Form>
80+
</div>
81+
)
82+
}
83+
84+
export default NewsletterForm

‎src/components/ui/form.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const FormItem = React.forwardRef<
7878

7979
return (
8080
<FormItemContext.Provider value={{ id }}>
81-
<div ref={ref} className={cn("space-y-2", className)} {...props} />
81+
<div ref={ref} className={cn("space-y-1 md:space-y-2", className)} {...props} />
8282
</FormItemContext.Provider>
8383
)
8484
})

0 commit comments

Comments
 (0)