Skip to content

Commit

Permalink
style : redesign first cta
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-mansi-d
cp-mansi-d committed Sep 6, 2023
1 parent c8ce556 commit 7fc801b
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 114 deletions.
Binary file added assets/images/cta/first-cta-2400w.webp
View file
Binary file not shown.
Binary file added assets/images/cta/first-cta-400w.webp
View file
Binary file not shown.
Binary file removed assets/images/cta/first-cta-800w.webp
View file
Binary file not shown.
Binary file removed assets/images/cta/first-cta-bg400w.webp
View file
Binary file not shown.
163 changes: 49 additions & 114 deletions components/cta/CTA1.js
View file
Original file line number Diff line number Diff line change
@@ -1,132 +1,67 @@
"use client";

import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar } from "@fortawesome/free-solid-svg-icons";
import Image from "next/image";
import ctabg400w from "../../assets/images/cta/first-cta-bg400w.webp";
import cta800w from "../../assets/images/cta/first-cta-800w.webp";
import background400w from "../../assets/images/cta/first-cta-400w.webp";
import desktop_background2400w from "../../assets/images/cta/first-cta-2400w.webp";
import Link from "next/link";
import config from "../../config";
import "swiper/css";
import "swiper/css/autoplay";

export default function CTA() {
const [swiper, setSwiper] = useState(null);

const slides = [
{
title: "50+",
content: "Projects",
hasStar: false,
},
{
title: "5.0",
content: "Clutch Reviews",
hasStar: true,
},
];

const playSwiper = (play) => {
if (swiper) {
play ? swiper.autoplay.start() : swiper.autoplay.stop();
}
};

return (
<section className="container relative mt-32 xl:mt-44 mb-20 xl:mb-0 font-inter-medium 3xl:px-12">
<div className="xl:hidden">
<section className="relative bg-[#FDE0E2] bg-gradient-background md:mt-0 md:bg-none">
<div className="md:hidden mb-[-15px] sm:mb-0">
<Image
src={ctabg400w}
src={background400w}
alt="background-image"
className="absolute h-full w-full"
loading="lazy"
alt="cta-bg-image"
className="absolute top-[-6.5rem] sm:left-[4.5rem] md:left-[6.5rem] w-[100%] sm:w-[80%] object-content"
/>
</div>
<div className="xl:container xl:flex xl:flex-row">
<div className="flex flex-col items-center xl:items-start xl:mb-20 xl:w-[60%] 2xl:w-[50%]">
<p className="text-center xl:text-left text-[1.875rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[2.5rem] md:leading-[3.75rem] lg:leading-[5.156rem] font-inter-bold text-black-core/[0.87]">
Want to build a new version of your existing app or add new
features?
<div className="container sticky flex flex-col items-center justify-center py-20">
<p className="gradient-text flex text-center font-inter-medium text-base leading-[1.21rem]">
Get started today
</p>
<p className="mt-6 text-center font-inter-bold text-4xl leading-[2.723rem] text-black-core/[0.85]">
Let&apos;s build the next big thing!
</p>
<p className="mt-4 text-[1rem] md:text-[1.25rem] leading-[1.5rem] md:leading-[1.875rem] font-inter-medium text-center xl:text-left text-black-core/[0.87] lg:text-black-core/[0.60]">
Not sure where to start? We also offer code and architecture
reviews, strategic planning, and more.
<p className="mt-4 text-center font-inter-regular text-sm leading-[1.313rem] text-black-core/[0.75]">
Let&apos;s improve your business&apos;s digital strategy and
implement robust mobile apps to achieve your business objectives.
Schedule Your Free Consultation Now.
</p>
<Link
href={`${config.WEBSITE_URL}/contact`}
className="relative justify-self-center mt-6 rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] font-inter-semibold text-white"
>
<div className="py-[0.8rem] px-[1.5rem] text-[1.188rem] leading-[1.425rem] md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem] tracking-normal hoverable-text inline-block">
Talk to our experts
<Link href={`${config.WEBSITE_URL}/contact`}>
<div className="flex items-center mt-10 mx-auto md:mx-0 w-max rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal text-[1.1875rem] leading-[1.1875rem] font-inter-semibold tracking-normal text-white active:scale-[0.98]">
<span className="py-4 px-[1.2rem] hoverable-text inline-block">
Get Free Consultation
</span>
</div>
</Link>
</div>
<div className="hidden xl:block relative w-[53%] xl:w-[40%] 2xl:w-[50%]">
<Image
src={cta800w}
loading="lazy"
className="absolute right-0 h-full object-contain z-[2] mr-[-50px]"
alt="cta-image"
/>
</div>

<div className="swiper-content flex xl:items-center w-full h-full pl-4 md:pl-0">
<Swiper
slidesPerView={1}
spaceBetween={20}
speed={5000}
centeredSlides={false}
loop={true}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
modules={[Autoplay]}
onSwiper={(swiper) => {
setSwiper(swiper);
}}
>
{slides.map((slide, index) => {
return (
<SwiperSlide
key={index}
onMouseOver={() => playSwiper(false)}
onMouseLeave={() => playSwiper(true)}
onTouchStart={() => playSwiper(false)}
onTouchMove={() => playSwiper(true)}
onTouchEnd={() => playSwiper(true)}
className="cursor-pointer"
>
<div
className={`flex flex-col items-center rounded-[16px] bg-gradient-to-r from-[#FF835B]/[0.3] to-[#F2709C]/[0.3] w-[50%] p-[20px] h-[140px] ${
slide.hasStar ? "justify-between" : "justify-center"
}`}
>
<span className="font-inter-bold text-[1.5rem] leading-[2.25rem]">
{slide.title}
</span>
<span className="font-inter-medium text-[1.1875rem] leading-[1.78125rem] text-black-core/[0.6]">
{slide.content}
</span>
{slide.hasStar && (
<div className="flex justify-between mt-[3px]">
{[...Array(5)].map((_, i) => (
<FontAwesomeIcon
key={i}
className="fa w-[15px] h-[15px] mr-[5px] text-[#F2709C]"
icon={faStar}
/>
))}
</div>
)}
</div>
</SwiperSlide>
);
})}
</Swiper>
</div>
<div className="hidden md:block">
<Image
src={desktop_background2400w}
alt="background-image"
className="absolute h-full w-full"
loading="lazy"
/>
<div className="container sticky z-[1] flex flex-col items-center justify-center py-20 4xl:py-32">
<p className="gradient-text text-center font-inter-medium text-lg leading-[1.375rem] xl:text-xl xl:leading-[1.513rem]">
Get started today
</p>
<p className="mt-4 4xl:mt-6 text-center font-inter-bold text-[2.813rem] leading-[3.438rem] text-black-core/[0.85] xl:text-[3.438rem] xl:leading-[4.16rem]">
Let&apos;s build the next big thing!
</p>
<p className="mt-4 4xl:mt-6 w-[75%] text-center font-inter-regular text-[1.063rem] leading-[1.625rem] text-black-core/[0.75] xl:text-xl xl:leading-[1.875rem]">
Let&apos;s improve your business&apos;s digital strategy and
implement robust mobile apps to achieve your business objectives.
Schedule Your Free Consultation Now.
</p>
<Link href={`${config.WEBSITE_URL}/contact`}>
<div className="flex items-center mt-10 mx-auto md:mx-0 w-max rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] text-center font-normal text-[1.1875rem] leading-[1.1875rem] font-inter-semibold tracking-normal text-white active:scale-[0.98]">
<span className="py-4 px-[1.2rem] hoverable-text inline-block">
Get Free Consultation
</span>
</div>
</Link>
</div>
</div>
</section>
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ module.exports = {
xl: "1200px",
"2xl": "1400px",
"3xl": "1600px",
"4xl": "2440px",
},
fontFamily: {
"product-black": ["Product Sans Black"],
Expand Down Expand Up @@ -52,6 +53,8 @@ module.exports = {
"gradient-L": "linear-gradient(178deg, #FFFFFF 68%, #f77783 40%);",
"gradient-W": "linear-gradient(257deg, #FFFFFF 65%, #f77783 68%);",
"gradient-T": "linear-gradient(540deg, #FFFFFF 30.5%, #f77783 10%);",
"gradient-background":
"linear-gradient(to bottom, #FFFFFF , #FDE0E2 23%, #FDE0E2 88%, #FFFFFF 100%);",
},
},
},
Expand Down

0 comments on commit 7fc801b

Please sign in to comment.